@flows/react-components - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3-canary.0

dist/chunk-XG37DHOR.mjs

+"use client"
+var ot=Object.defineProperty,nt=Object.defineProperties;var lt=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var D=(t,e,o)=>e in t?ot(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,u=(t,e)=>{for(var o in e||(e={}))L.call(e,o)&&D(t,o,e[o]);if(T)for(var o of T(e))U.call(e,o)&&D(t,o,e[o]);return t},H=(t,e)=>nt(t,lt(e));var w=(t,e)=>{var o={};for(var n in t)L.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&T)for(var n of T(t))e.indexOf(n)<0&&U.call(t,n)&&(o[n]=t[n]);return o};import{useCallback as it}from"react";import st from"classnames";import{jsx as rt}from"react/jsx-runtime";var G=n=>{var s=n,{className:t,variant:e}=s,o=w(s,["className","variant"]);let r=o.href?"a":"button";return rt(r,u({type:r==="button"?"button":void 0,className:st("flows_button",`flows_button_${e}`,t)},o))};import{jsx as at}from"react/jsx-runtime";var k=({action:t,variant:e})=>{let o=it(()=>{var n;(n=t.callAction)==null||n.call(t)},[t]);return at(G,{variant:e,href:t.url,target:t.openInNew?"_blank":void 0,onClick:o,children:t.label})};import z from"classnames";import{jsx as V}from"react/jsx-runtime";function v(t){return V("svg",H(u({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:V("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}import ct from"classnames";import{jsx as dt}from"react/jsx-runtime";var d=n=>{var s=n,{className:t,variant:e}=s,o=w(s,["className","variant"]);return dt("p",u({className:ct("flows_text",`flows_text_${e}`,t)},o))};import mt from"classnames";import{jsx as ft}from"react/jsx-runtime";var b=o=>{var n=o,{className:t}=n,e=w(n,["className"]);return ft("button",u({type:"button",className:mt("flows_iconButton",t)},e))};import{Fragment as ut,jsx as a,jsxs as q}from"react/jsx-runtime";var pe=t=>{let e=t.position||"center",o=t.size||"small",n=[];return t.secondaryButton&&n.push(a(k,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&n.push(a(k,{action:t.primaryButton,variant:"primary"},"primary")),q(ut,{children:[t.overlay?a("div",{className:z("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,a("div",{className:"flows_modal_wrapper",children:q("div",{className:z("flows_modal_modal",`flows_modal_${e}`,`flows_modal_width_${o}`),children:[a(d,{className:"flows_modal_title",variant:"title",children:t.title}),a(d,{className:"flows_modal_body",variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),t.dots?a("div",{className:"flows_modal_dots",children:t.dots}):null,n.length?a("div",{className:"flows_modal_footer",children:n}):null,t.onClose?a(b,{"aria-label":"Close",className:"flows_modal_close",onClick:t.onClose,children:a(v,{})}):null]})})]})};import{useCallback as Ct,useEffect as M,useMemo as Nt,useRef as O,useState as ht}from"react";import{useFloating as Et,shift as xt,offset as Rt,arrow as At,flip as Tt,autoUpdate as Bt}from"@floating-ui/react-dom";import Q from"classnames";var pt="#22262d",_t="#fff",Y="%cFlows%c",X=`color:${_t};background:${pt};padding:2px 4px;border-radius:4px`,B={error:(t,...e)=>{console.error(`${Y} ${t}`,X,"",...e)},warn:(t,...e)=>{console.warn(`${Y} ${t}`,X,"",...e)}};import{useState as yt,useEffect as gt}from"react";var wt=t=>typeof window=="undefined"?null:document.querySelector(t);function F(t){let[e,o]=yt(t?wt(t):null);return gt(()=>{if(!t){o(null);return}let n=()=>{let r=document.querySelector(t);o(i=>i!==r?r:i)};n();let s=new MutationObserver(r=>{r.some(f=>f.addedNodes.length>0||f.removedNodes.length>0)&&n()});return s.observe(document.documentElement,{childList:!0,subtree:!0}),()=>{s.disconnect()}},[t]),e}import{useEffect as vt,useState as bt}from"react";var P=()=>{let[t,e]=bt(!0);return vt(()=>{e(!1)},[]),t};import{jsx as m,jsxs as I}from"react/jsx-runtime";var Ft=4,W=6,Pt=Ft+W,St=8,kt=8,Mt=(t,e,o)=>Bt(t,e,o,{animationFrame:!0}),Pe=t=>{var A,g,h;let e=P(),o=O(null),n=O(null),s=O(null),r=F(t.targetElement),{refs:i,middlewareData:f,placement:c,x:E,y:S}=Et({placement:t.placement,elements:{reference:r},whileElementsMounted:Mt,middleware:[Tt({fallbackPlacements:["top","bottom","left","right"]}),xt({crossAxis:!0,padding:St}),At({element:n,padding:kt}),Rt(Pt)]}),[y,p]=ht(!1);M(()=>{r||p(!1)},[r]),M(()=>{if(y)return;let l=i.floating.current;if(!l)return;window.getComputedStyle(l).animationName!=="none"||p(!0)},[y,i.floating]);let x=Ct(()=>{p(!0)},[]),R=Nt(()=>c.includes("top")?"bottom":c.includes("bottom")?"top":c.includes("left")?"right":"left",[c]);if(M(()=>{t.targetElement||B.error("Cannot render Tooltip without target element")},[t.targetElement]),!r||e)return null;i.floating.current&&(i.floating.current.style.left=`${E}px`,i.floating.current.style.top=`${S}px`);let C=(A=f.arrow)==null?void 0:A.x,N=(g=f.arrow)==null?void 0:g.y;if([n,o].forEach(l=>{l.current&&(l.current.style.left=C!=null?`${C}px`:"",l.current.style.top=N!=null?`${N}px`:"",l.current.style.right="",l.current.style.bottom="",l.current.style[R]=`${-W}px`)}),s.current){let l=r.getBoundingClientRect();s.current.style.top=`${l.top}px`,s.current.style.left=`${l.left}px`,s.current.style.width=`${l.width}px`,s.current.style.height=`${l.height}px`}return I("div",{className:"flows_tooltip_root",children:[t.overlay?m("div",{className:"flows_tooltip_overlay",ref:s}):null,I("div",{className:"flows_tooltip_tooltip",ref:i.setFloating,"data-open":y?"true":"false",onAnimationEnd:x,children:[m(d,{className:"flows_tooltip_title",variant:"title",children:t.title}),m(d,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),((h=t.dots)!=null?h:t.buttons)?I("div",{className:"flows_tooltip_footer",children:[t.dots,t.buttons?m("div",{className:"flows_tooltip_buttons_wrapper",children:m("div",{className:"flows_tooltip_buttons",children:t.buttons})}):null]}):null,t.onClose?m(b,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:m(v,{})}):null,m("div",{className:Q("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:n}),m("div",{className:Q("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:o})]})]})};import{flip as Ot,offset as It,shift as $t,useFloating as Z,autoUpdate as Dt}from"@floating-ui/react-dom";import{useCallback as K,useEffect as J,useState as j}from"react";import{Fragment as Gt,jsx as _,jsxs as $}from"react/jsx-runtime";var Lt=300,Ut=8,Ht=4,tt=(t,e,o)=>Dt(t,e,o,{animationFrame:!0}),Ge=t=>{var x,R,C;let e=P(),[o,n]=j(!1),s=K(()=>{n(!0)},[]),r=F(t.targetElement),i=Z({placement:t.placement,elements:{reference:r},whileElementsMounted:tt,transform:!1}),f=i.refs.floating,c=Z({placement:"bottom",elements:{reference:i.refs.floating.current},whileElementsMounted:tt,transform:!1,middleware:[Ot({fallbackPlacements:["top","bottom","left","right"]}),$t({crossAxis:!0,padding:Ut}),It(Ht)]}),E=c.refs.floating,[S,y]=j(!1),p=K(()=>{y(!0),setTimeout(()=>{n(!1),y(!1)},Lt)},[]);return J(()=>{let N=A=>{let g=A.target,h=E.current,l=f.current;if(!h||!g.isConnected)return;!h.contains(g)&&!(l!=null&&l.contains(g))&&p()};return window.addEventListener("click",N),()=>{window.removeEventListener("click",N)}},[p,f,E]),J(()=>{t.targetElement||B.error("Cannot render Hint without target element")},[t.targetElement]),!r||e?null:$(Gt,{children:[_("button",{ref:i.refs.setFloating,style:{left:i.x+((x=t.offsetX)!=null?x:0),top:i.y+((R=t.offsetY)!=null?R:0)},"aria-label":"Open hint",type:"button",className:"flows_hint_hotspot",onClick:o?p:s}),o?$("div",{className:"flows_tooltip_tooltip flows_hint_tooltip","data-open":S?"false":"true",ref:c.refs.setFloating,style:{left:c.x,top:c.y},children:[_(d,{className:"flows_tooltip_title",variant:"title",children:t.title}),_(d,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),((C=t.dots)!=null?C:t.buttons)?$("div",{className:"flows_tooltip_footer",children:[t.dots,t.buttons?_("div",{className:"flows_tooltip_buttons_wrapper",children:_("div",{className:"flows_tooltip_buttons",children:t.buttons})}):null]}):null,t.onClose?_(b,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:_(v,{})}):null]}):null]})};export{k as a,pe as b,Pe as c,Ge as d};

dist/library-Bnlo0c6z.d.mts

+/**
+ * Properties provided by Flows based on block and block template setup.
+ */
+interface FlowsProperties {
+    /**
+     * Unique identifier of the block, useful for stable key during rendering. Keep in mind each workflow version will have a different id for each block.
+     */
+    id: string;
+    /**
+     * User defined key for identifying the block.
+     */
+    key?: string;
+    /**
+     * Id of the workflow this block belongs to.
+     */
+    workflowId: string;
+    /**
+     * Total number of visible tour blocks (components) in the current tour.
+     */
+    tourVisibleStepCount?: number;
+    /**
+     * 0-based index of the currently visible tour block (component) in the current tour.
+     */
+    tourVisibleStepIndex?: number;
+}
+type ComponentProps<T extends Record<string, any> = any> = {
+    /**
+     * Properties provided by Flows based on block and block template setup.
+     */
+    __flows: FlowsProperties;
+} & T;
+type TourComponentProps<T extends Record<string, any> = any> = {
+    /**
+     * Properties provided by Flows based on block and block template setup.
+     */
+    __flows: FlowsProperties;
+    continue: () => void;
+    previous?: () => void;
+    cancel: () => void;
+} & T;
+/**
+ * The object representing action property in your component properties.
+ */
+interface Action {
+    /**
+     * The label of the element used to trigger the action (eg. button text).
+     */
+    label: string;
+    /**
+     * Optional URL to navigate to when the action is triggered.
+     * When provided no special handling is done, you need to handle the navigation yourself using a link or similar.
+     */
+    url?: string;
+    /**
+     * Optional flag to open the URL in a new tab.
+     * When provided no special handling is done, you need to pass this to the element that will handle the navigation.
+     */
+    openInNew?: boolean;
+    /**
+     * Function to call when the action is triggered.
+     * Currently supports only transition to a specified exit node.
+     */
+    callAction?: () => Promise<void>;
+}
+
+type Placement = "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+type ModalPosition = "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type ModalSize = "small" | "medium" | "auto";
+interface TooltipProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    targetElement: string;
+    placement?: Placement;
+    dismissible: boolean;
+    hideOverlay: boolean;
+    continue: () => void;
+    close: () => void;
+}
+interface TourTooltipProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    targetElement: string;
+    placement?: Placement;
+    dismissible: boolean;
+    hideOverlay: boolean;
+    hideProgress: boolean;
+}
+interface ModalProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    dismissible: boolean;
+    hideOverlay: boolean;
+    position?: ModalPosition;
+    size?: ModalSize;
+    continue: () => void;
+    close: () => void;
+}
+interface TourModalProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    dismissible: boolean;
+    hideOverlay: boolean;
+    position?: ModalPosition;
+    size?: ModalSize;
+    hideProgress: boolean;
+}
+interface HintProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    targetElement: string;
+    placement?: Placement;
+    offsetX?: number;
+    offsetY?: number;
+    dismissible: boolean;
+    continue: () => void;
+    close: () => void;
+}
+interface TourHintProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    targetElement: string;
+    placement?: Placement;
+    offsetX?: number;
+    offsetY?: number;
+    dismissible: boolean;
+    hideProgress: boolean;
+}
+
+export type { ComponentProps as C, HintProps as H, ModalProps as M, TooltipProps as T, TourComponentProps as a, TourHintProps as b, TourModalProps as c, TourTooltipProps as d };

dist/library-Bnlo0c6z.d.ts

+/**
+ * Properties provided by Flows based on block and block template setup.
+ */
+interface FlowsProperties {
+    /**
+     * Unique identifier of the block, useful for stable key during rendering. Keep in mind each workflow version will have a different id for each block.
+     */
+    id: string;
+    /**
+     * User defined key for identifying the block.
+     */
+    key?: string;
+    /**
+     * Id of the workflow this block belongs to.
+     */
+    workflowId: string;
+    /**
+     * Total number of visible tour blocks (components) in the current tour.
+     */
+    tourVisibleStepCount?: number;
+    /**
+     * 0-based index of the currently visible tour block (component) in the current tour.
+     */
+    tourVisibleStepIndex?: number;
+}
+type ComponentProps<T extends Record<string, any> = any> = {
+    /**
+     * Properties provided by Flows based on block and block template setup.
+     */
+    __flows: FlowsProperties;
+} & T;
+type TourComponentProps<T extends Record<string, any> = any> = {
+    /**
+     * Properties provided by Flows based on block and block template setup.
+     */
+    __flows: FlowsProperties;
+    continue: () => void;
+    previous?: () => void;
+    cancel: () => void;
+} & T;
+/**
+ * The object representing action property in your component properties.
+ */
+interface Action {
+    /**
+     * The label of the element used to trigger the action (eg. button text).
+     */
+    label: string;
+    /**
+     * Optional URL to navigate to when the action is triggered.
+     * When provided no special handling is done, you need to handle the navigation yourself using a link or similar.
+     */
+    url?: string;
+    /**
+     * Optional flag to open the URL in a new tab.
+     * When provided no special handling is done, you need to pass this to the element that will handle the navigation.
+     */
+    openInNew?: boolean;
+    /**
+     * Function to call when the action is triggered.
+     * Currently supports only transition to a specified exit node.
+     */
+    callAction?: () => Promise<void>;
+}
+
+type Placement = "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+type ModalPosition = "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type ModalSize = "small" | "medium" | "auto";
+interface TooltipProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    targetElement: string;
+    placement?: Placement;
+    dismissible: boolean;
+    hideOverlay: boolean;
+    continue: () => void;
+    close: () => void;
+}
+interface TourTooltipProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    targetElement: string;
+    placement?: Placement;
+    dismissible: boolean;
+    hideOverlay: boolean;
+    hideProgress: boolean;
+}
+interface ModalProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    dismissible: boolean;
+    hideOverlay: boolean;
+    position?: ModalPosition;
+    size?: ModalSize;
+    continue: () => void;
+    close: () => void;
+}
+interface TourModalProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    dismissible: boolean;
+    hideOverlay: boolean;
+    position?: ModalPosition;
+    size?: ModalSize;
+    hideProgress: boolean;
+}
+interface HintProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    targetElement: string;
+    placement?: Placement;
+    offsetX?: number;
+    offsetY?: number;
+    dismissible: boolean;
+    continue: () => void;
+    close: () => void;
+}
+interface TourHintProps {
+    title: string;
+    body: string;
+    primaryButton?: Action;
+    secondaryButton?: Action;
+    targetElement: string;
+    placement?: Placement;
+    offsetX?: number;
+    offsetY?: number;
+    dismissible: boolean;
+    hideProgress: boolean;
+}
+
+export type { ComponentProps as C, HintProps as H, ModalProps as M, TooltipProps as T, TourComponentProps as a, TourHintProps as b, TourModalProps as c, TourTooltipProps as d };

dist/index.css

@@ -1,1 +0,1 @@
-:root{--flows-bg-default: #ffffff;--flows-bg-subtle: #fafafa;--flows-bg-hover: #f0f0f0;--flows-bg-primary: #067efd;--flows-bg-primary-hover: #0d67ec;--flows-bg-overlay: rgba(0, 0, 0, .4);--flows-fg-default: #1a1a1a;--flows-fg-onPrimary: #ffffff;--flows-borderWidth: 1px;--flows-border: var(--flows-borderWidth) solid #d6d6d6;--flows-border-strong: var(--flows-borderWidth) solid #ccc;--flows-border-strong-hover: var(--flows-borderWidth) solid #bababa;--flows-border-primary: var(--flows-borderWidth) solid #0d67ec;--flows-shadow: 0px 6px 18px rgba(0, 0, 0, .15), 0px 3px 8px rgba(0, 0, 0, .03), 0px 0px 1px rgba(0, 0, 0, .05);--flows-shadow-large: 0px 10px 48px rgba(0, 0, 0, .1), 0px 4px 24px rgba(0, 0, 0, .12), 0px 0px 1px rgba(0, 0, 0, .05);--flows-borderRadius-xSmall: 3px;--flows-borderRadius-small: 6px;--flows-borderRadius-medium: 8px;--flows-borderRadius-large: 12px;--flows-size-xSmall: 4px;--flows-size-small: 8px;--flows-size-medium: 12px;--flows-size-large: 20px;--flows-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--flows-base-font-size: 14px;--flows-base-line-height: 20px;--flows-title-font-size: 16px;--flows-title-line-height: 24px;--flows-title-font-weight: 600;--flows-zIndex: 1500;--flows-tooltip-padding: var(--flows-size-large);--flows-tooltip-overlayBackground: var(--flows-bg-overlay);--flows-tooltip-overlayBorderRadius: var(--flows-borderRadius-medium);--flows-tooltip-overlayPadding: 4px;--flows-tooltip-minWidth: 200px;--flows-tooltip-maxWidth: 320px;--flows-modal-overlayBackground: var(--flows-bg-overlay);--flows-modal-padding: var(--flows-size-large);--flows-modal-minWidth: 320px;--flows-modal-maxWidth: 640px;--flows-banner-screenEdgePadding: var(--flows-size-large);--flows-banner-padding: var(--flows-size-large);--flows-banner-minWidth: 200px;--flows-banner-maxWidth: 320px}.dark{--flows-bg-default: #1e1e1e;--flows-bg-subtle: #262626;--flows-bg-hover: #333333;--flows-bg-primary: #357ddb;--flows-bg-primary-hover: #3382e7;--flows-bg-overlay: rgba(0, 0, 0, .6);--flows-fg-default: #fafafa;--flows-fg-onPrimary: #ffffff;--flows-border: 1px solid #3d3d3d;--flows-border-strong: 1px solid #4a4a4a;--flows-border-strong-hover: 1px solid #616161;--flows-border-primary: 1px solid #468ff1;--flows-shadow: 0px 4px 12px rgba(0, 0, 0, .2), 0px 2px 6px rgba(0, 0, 0, .25), 0px 1px 1px rgba(0, 0, 0, .2);--flows-shadow-large: 0px 1px 1px rgba(0, 0, 0, .2), 0px 2px 8px rgba(0, 0, 0, .2), 0px 4px 12px rgba(0, 0, 0, .2), 0px 4px 20px rgba(0, 0, 0, .2), 0px 4px 40px rgba(0, 0, 0, .15)}@keyframes flows-scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes flows-scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes flows-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes flows-ping{0%{transform:scale(1);opacity:.75}75%,to{transform:scale(2);opacity:0}}.flows_text{font-family:var(--flows-font-family);margin:0}.flows_text_body{font-size:var(--flows-base-font-size);line-height:var(--flows-base-line-height)}.flows_text_title{font-size:var(--flows-title-font-size);line-height:var(--flows-title-line-height);font-weight:var(--flows-title-font-weight)}.flows_button{border-radius:var(--flows-borderRadius-small);cursor:pointer;transition:background-color .12s ease-in-out,border-color .12s ease-in-out;padding:4px 8px;font-family:var(--flows-font-family);font-size:var(--flows-base-font-size);line-height:var(--flows-base-line-height);font-weight:600;white-space:nowrap;text-decoration:none}.flows_button_primary{background-color:var(--flows-bg-primary);border:var(--flows-border-primary);color:var(--flows-fg-onPrimary)}.flows_button_primary:hover{background-color:var(--flows-bg-primary-hover);border:1px solid var(--flows-bg-primary-hover)}.flows_button_secondary{background-color:var(--flows-bg-subtle);border:var(--flows-border-strong);color:var(--flows-fg-default)}.flows_button_secondary:hover{background-color:var(--flows-bg-hover);border:var(--flows-border-strong-hover)}.flows_iconButton{border-radius:var(--flows-borderRadius-small);cursor:pointer;transition:background-color .12s ease-in-out,border-color .12s ease-in-out;background-color:#0000;border:none;padding:0;width:20px;height:20px;display:grid;place-items:center}.flows_iconButton:hover{background-color:var(--flows-bg-hover)}.flows_tooltip_root{width:100%;top:0;left:0;position:absolute;z-index:var(--flows-zIndex)}.flows_tooltip_overlay{position:fixed;z-index:-1;pointer-events:none;animation:flows-fadeIn .1s ease-out}.flows_tooltip_overlay:after{content:"";position:absolute;inset:0;margin:calc(var(--flows-tooltip-overlayPadding) * -1);box-shadow:var(--flows-tooltip-overlayBackground) 0 0 0 9999px;border-radius:var(--flows-tooltip-overlayBorderRadius)}.flows_tooltip_tooltip{background-color:var(--flows-bg-default);border:var(--flows-border);color:var(--flows-fg-default);border-radius:var(--flows-borderRadius-medium);position:absolute;padding:var(--flows-tooltip-padding);font-family:var(--flows-font-family);font-size:var(--flows-base-font-size);line-height:var(--flows-base-line-height);box-sizing:border-box;min-width:var(--flows-tooltip-minWidth);max-width:min(var(--flows-tooltip-maxWidth),calc(100% - 16px));animation:flows-scaleIn .15s ease-out}.flows_tooltip_tooltip[data-open=true]{transition:all .15s ease-out}.flows_tooltip_tooltip:before{box-shadow:var(--flows-shadow);border-radius:var(--flows-borderRadius-medium);content:"";position:absolute;inset:calc(var(--flows-borderWidth) * -1);z-index:-1;pointer-events:none}.flows_tooltip_title{margin-right:24px}.flows_tooltip_body{margin-top:var(--flows-size-small)}.flows_tooltip_arrow{position:absolute;width:var(--flows-size-medium);height:var(--flows-size-medium);transform:rotate(45deg);border-radius:var(--flows-borderRadius-xSmall)}.flows_tooltip_tooltip[data-open=false] .flows_tooltip_arrow{border-color:var(--flows-bg-default);box-shadow:none}.flows_tooltip_arrow-bottom{border:var(--flows-border);z-index:-1;box-shadow:var(--flows-shadow)}.flows_tooltip_arrow-top{background-color:var(--flows-bg-default);border:var(--flows-border);border-color:#0000;background-clip:padding-box}.flows_tooltip_footer{margin-top:var(--flows-size-medium);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--flows-size-small)}.flows_tooltip_close{position:absolute;top:var(--flows-tooltip-padding);right:var(--flows-tooltip-padding)}.flows_modal_overlay{position:fixed;inset:0;background-color:var(--flows-modal-overlayBackground);pointer-events:none;animation:flows-fadeIn .1s ease-out;z-index:var(--flows-zIndex)}.flows_modal_wrapper{position:fixed;inset:0;display:grid;place-items:center;padding:var(--flows-modal-padding);overflow:auto;pointer-events:none;z-index:var(--flows-zIndex)}.flows_modal_modal{pointer-events:auto;background-color:var(--flows-bg-default);border:var(--flows-border);color:var(--flows-fg-default);border-radius:var(--flows-borderRadius-medium);box-shadow:var(--flows-shadow-large);padding:var(--flows-modal-padding);position:relative;box-sizing:border-box;min-width:var(--flows-modal-minWidth);max-width:var(--flows-modal-maxWidth);animation:flows-scaleIn .15s ease-out}.flows_modal_footer{margin-top:var(--flows-size-medium);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--flows-size-small)}.flows_modal_close{position:absolute;top:var(--flows-modal-padding);right:var(--flows-modal-padding)}.flows_hint_hotspot{position:absolute;background-color:var(--flows-bg-primary);border-radius:50%;transition:background-color .12s ease-in-out;z-index:var(--flows-zIndex);width:16px;height:16px}.flows_hint_hotspot:hover{background-color:var(--flows-bg-primary-hover)}.flows_hint_hotspot:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:50%;background-color:var(--flows-bg-primary);animation:flows-ping 2s cubic-bezier(0,0,.2,1) infinite}.flows_hint_tooltip.flows_hint_tooltip{transition:none}.flows_hint_tooltip{z-index:calc(var(--flows-zIndex) + 1)}.flows_hint_tooltip[data-open=false]{animation:flows-scaleOut .15s ease-out;opacity:0}
+:root{--flows-bg-default: #ffffff;--flows-bg-subtle: #fafafa;--flows-bg-strong: #eaeaea;--flows-bg-hover: #f0f0f0;--flows-bg-primary: #262626;--flows-bg-primary-hover: #3b3b3b;--flows-bg-overlay: rgba(0, 0, 0, .4);--flows-fg-default: #1a1a1a;--flows-fg-onPrimary: #ffffff;--flows-borderWidth: 1px;--flows-border: var(--flows-borderWidth) solid #d6d6d6;--flows-border-strong: var(--flows-borderWidth) solid #ccc;--flows-border-strong-hover: var(--flows-borderWidth) solid #bababa;--flows-border-primary: var(--flows-borderWidth) solid #262626;--flows-shadow: 0px 6px 18px rgba(0, 0, 0, .15), 0px 3px 8px rgba(0, 0, 0, .03), 0px 0px 1px rgba(0, 0, 0, .05);--flows-shadow-large: 0px 10px 48px rgba(0, 0, 0, .1), 0px 4px 24px rgba(0, 0, 0, .12), 0px 0px 1px rgba(0, 0, 0, .05);--flows-borderRadius-xs: 3px;--flows-borderRadius-m: 8px;--flows-borderRadius-l: 12px;--flows-borderRadius-xl: 16px;--flows-size-xs: 2px;--flows-size-s: 8px;--flows-size-m: 12px;--flows-size-l: 16px;--flows-size-xl: 20px;--flows-size-xxl: 24px;--flows-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--flows-base-font-size: 14px;--flows-base-line-height: 20px;--flows-title-font-size: 16px;--flows-title-line-height: 24px;--flows-title-font-weight: 600;--flows-zIndex: 1500;--flows-tooltip-padding: var(--flows-size-xl);--flows-tooltip-overlayBackground: var(--flows-bg-overlay);--flows-tooltip-overlayBorderRadius: var(--flows-borderRadius-m);--flows-tooltip-overlayPadding: 4px;--flows-tooltip-minWidth: 200px;--flows-tooltip-maxWidth: 320px;--flows-modal-overlayBackground: var(--flows-bg-overlay);--flows-modal-padding: var(--flows-size-xxl);--flows-modal-minWidth: 320px;--flows-modal-maxWidth: 640px;--flows-modal-size-small: 420px;--flows-modal-size-medium: 640px;--flows-modal-button-max-width: 600px;--flows-banner-screenEdgePadding: var(--flows-size-xl);--flows-banner-padding: var(--flows-size-xl);--flows-banner-minWidth: 200px;--flows-banner-maxWidth: 320px;--flows-button-font-size: 15px;--flows-button-line-height: 24px;--flows-primary-button-gradient: linear-gradient(#ffffff14, #fff0);--flows-primary-button-shadow: inset 0 1px #ffffff1f, 0 1px 2px #0a0d120d;--flows-secondary-button-shadow: inset 0 -2px 0 0 #fafafa, 0 1px 2px 0 #0d0d0d0d;--flows-progress-dots-size: 10px;--flows-progress-dots-gap: 6px}.dark{--flows-bg-default: #1e1e1e;--flows-bg-subtle: #262626;--flows-bg-strong: #303030;--flows-bg-hover: #333333;--flows-bg-primary: #f1f1f1;--flows-bg-primary-hover: #dddddd;--flows-bg-overlay: rgba(0, 0, 0, .6);--flows-fg-default: #fafafa;--flows-fg-onPrimary: #1e1e1e;--flows-border: 1px solid #3d3d3d;--flows-border-strong: 1px solid #4a4a4a;--flows-border-strong-hover: 1px solid #616161;--flows-border-primary: 1px solid #f1f1f1;--flows-shadow: 0px 4px 12px rgba(0, 0, 0, .2), 0px 2px 6px rgba(0, 0, 0, .25), 0px 1px 1px rgba(0, 0, 0, .2);--flows-shadow-large: 0px 1px 1px rgba(0, 0, 0, .2), 0px 2px 8px rgba(0, 0, 0, .2), 0px 4px 12px rgba(0, 0, 0, .2), 0px 4px 20px rgba(0, 0, 0, .2), 0px 4px 40px rgba(0, 0, 0, .15);--flows-primary-button-gradient: linear-gradient(#fff0, #0000001a);--flows-primary-button-shadow: inset 0 1px #ffffff1f;--flows-secondary-button-shadow: unset}@keyframes flows-scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes flows-scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes flows-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes flows-ping{0%{transform:scale(1);opacity:.75}75%,to{transform:scale(2.5);opacity:0}}.flows_text{font-family:var(--flows-font-family);margin:0}.flows_text_body{font-size:var(--flows-base-font-size);line-height:var(--flows-base-line-height)}.flows_text_title{font-size:var(--flows-title-font-size);line-height:var(--flows-title-line-height);font-weight:var(--flows-title-font-weight)}.flows_button{border-radius:var(--flows-borderRadius-m);cursor:pointer;transition:background-color .12s ease-in-out,border-color .12s ease-in-out;padding:5px 15px;font-family:var(--flows-font-family);font-size:var(--flows-button-font-size);line-height:var(--flows-button-line-height);font-weight:600;white-space:nowrap;text-decoration:none;text-align:center}.flows_button_primary{background-color:var(--flows-bg-primary);border:var(--flows-border-primary);color:var(--flows-fg-onPrimary);background-image:var(--flows-primary-button-gradient);box-shadow:var(--flows-primary-button-shadow)}.flows_button_primary:hover{background-color:var(--flows-bg-primary-hover)}.flows_button_secondary{background-color:var(--flows-bg-subtle);border:var(--flows-border-strong);color:var(--flows-fg-default);box-shadow:var(--flows-secondary-button-shadow)}.flows_button_secondary:hover{background-color:var(--flows-bg-hover);border:var(--flows-border-strong-hover)}.flows_iconButton{border-radius:var(--flows-borderRadius-m);cursor:pointer;transition:background-color .12s ease-in-out,border-color .12s ease-in-out;background-color:#0000;border:none;padding:0;width:20px;height:20px;display:grid;place-items:center}.flows_iconButton:hover{background-color:var(--flows-bg-hover)}.flows_dots{justify-content:center;display:flex;gap:var(--flows-progress-dots-gap);overflow:hidden}.flows_dots_dot{width:var(--flows-progress-dots-size);height:var(--flows-progress-dots-size);border-radius:50%;flex-shrink:0;background-color:var(--flows-bg-strong)}.flows_dots_dot_active{background-color:var(--flows-bg-primary)}.flows_tooltip_root{width:100%;top:0;left:0;position:absolute;z-index:var(--flows-zIndex)}.flows_tooltip_overlay{position:fixed;z-index:-1;pointer-events:none;animation:flows-fadeIn .1s ease-out}.flows_tooltip_overlay:after{content:"";position:absolute;inset:0;margin:calc(var(--flows-tooltip-overlayPadding) * -1);box-shadow:var(--flows-tooltip-overlayBackground) 0 0 0 9999px;border-radius:var(--flows-tooltip-overlayBorderRadius)}.flows_tooltip_tooltip{background-color:var(--flows-bg-default);border:var(--flows-border);color:var(--flows-fg-default);border-radius:var(--flows-borderRadius-l);position:absolute;padding:var(--flows-tooltip-padding);font-family:var(--flows-font-family);font-size:var(--flows-base-font-size);line-height:var(--flows-base-line-height);box-sizing:border-box;min-width:var(--flows-tooltip-minWidth);max-width:min(var(--flows-tooltip-maxWidth),calc(100% - 16px));animation:flows-scaleIn .15s ease-out}.flows_tooltip_tooltip[data-open=true]{transition:all .15s ease-out}.flows_tooltip_tooltip:before{box-shadow:var(--flows-shadow);border-radius:var(--flows-borderRadius-l);content:"";position:absolute;inset:calc(var(--flows-borderWidth) * -1);z-index:-1;pointer-events:none}.flows_tooltip_title{margin-right:24px;margin-bottom:var(--flows-size-xs)}.flows_tooltip_arrow{position:absolute;width:var(--flows-size-l);height:var(--flows-size-l);transform:rotate(45deg);border-radius:var(--flows-borderRadius-xs)}.flows_tooltip_tooltip[data-open=false] .flows_tooltip_arrow{border-color:var(--flows-bg-default);box-shadow:none}.flows_tooltip_arrow-bottom{border:var(--flows-border);z-index:-1;box-shadow:var(--flows-shadow)}.flows_tooltip_arrow-top{background-color:var(--flows-bg-default);border:var(--flows-border);border-color:#0000;background-clip:padding-box}.flows_tooltip_footer{margin-top:var(--flows-size-l);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:var(--flows-size-s);row-gap:var(--flows-size-l)}.flows_tooltip_buttons_wrapper{flex:1;flex-basis:auto;display:flex;justify-content:flex-end}.flows_tooltip_buttons{display:flex;gap:var(--flows-size-s);flex-wrap:wrap-reverse}.flows_tooltip_buttons button,.flows_modal_footer a{flex:1}.flows_tooltip_close{position:absolute;top:var(--flows-tooltip-padding);right:var(--flows-tooltip-padding)}.flows_modal_overlay{position:fixed;inset:0;background-color:var(--flows-modal-overlayBackground);pointer-events:none;animation:flows-fadeIn .1s ease-out;z-index:var(--flows-zIndex)}.flows_modal_wrapper{position:fixed;inset:0;display:grid;padding:var(--flows-modal-padding);overflow:auto;pointer-events:none;z-index:var(--flows-zIndex)}.flows_modal_modal{pointer-events:auto;background-color:var(--flows-bg-default);border:var(--flows-border);color:var(--flows-fg-default);border-radius:var(--flows-borderRadius-xl);box-shadow:var(--flows-shadow-large);padding:var(--flows-size-xxl);position:relative;box-sizing:border-box;animation:flows-scaleIn .15s ease-out}.flows_modal_width_small{width:100%;max-width:var(--flows-modal-size-small)}.flows_modal_width_medium{width:100%;max-width:var(--flows-modal-size-medium)}.flows_modal_width_auto{min-width:var(--flows-modal-minWidth);max-width:var(--flows-modal-maxWidth)}.flows_modal_title{text-align:center;margin-bottom:var(--flows-size-xs)}.flows_modal_body{text-align:center}.flows_modal_center{place-self:center}.flows_modal_top{place-self:start center}.flows_modal_bottom{place-self:end center}.flows_modal_left{place-self:center start}.flows_modal_right{place-self:center end}.flows_modal_top-left{place-self:start start}.flows_modal_top-right{place-self:start end}.flows_modal_bottom-left{place-self:end start}.flows_modal_bottom-right{place-self:end end}.flows_modal_footer{margin-top:var(--flows-size-xxl);margin-right:auto;margin-left:auto;max-width:var(--flows-modal-button-max-width);display:flex;flex-wrap:wrap-reverse;gap:var(--flows-size-m)}.flows_modal_footer button,.flows_modal_footer a{flex:1}.flows_modal_footer .flows_button{width:100%}.flows_modal_close{position:absolute;top:var(--flows-size-xl);right:var(--flows-size-xl)}.flows_modal_dots{margin-top:var(--flows-size-xxl);display:flex;justify-content:center}.flows_hint_hotspot{position:absolute;background-color:var(--flows-bg-primary);border-radius:50%;transition:background-color .12s ease-in-out;z-index:var(--flows-zIndex);width:var(--flows-size-l);height:var(--flows-size-l);cursor:pointer;border:var(--flows-border-primary);background-image:var(--flows-primary-button-gradient);box-shadow:var(--flows-primary-button-shadow)}.flows_hint_hotspot:hover{background-color:var(--flows-bg-primary-hover)}.flows_hint_hotspot:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:50%;background-color:var(--flows-bg-primary);animation:flows-ping 2s cubic-bezier(0,0,.2,1) infinite}.flows_hint_tooltip.flows_hint_tooltip{transition:none}.flows_hint_tooltip{z-index:calc(var(--flows-zIndex) + 1)}.flows_hint_tooltip[data-open=false]{animation:flows-scaleOut .15s ease-out;opacity:0}

dist/index.d.mts

 import { FC } from 'react';
-import { C as ComponentProps, P as Placement } from './tooltip-BH43qtSr.mjs';
+import { C as ComponentProps, M as ModalProps$1, T as TooltipProps$1, H as HintProps$1 } from './library-Bnlo0c6z.mjs';
 
-type ModalProps = ComponentProps<{
-    title: string;
-    body: string;
-    continueText?: string;
-    showCloseButton: boolean;
-    hideOverlay: boolean;
-    continue: () => void;
-    close: () => void;
-}>;
-declare const Modal: FC<ModalProps>;
+type ModalProps = ComponentProps<ModalProps$1>;
+declare const BasicsV2Modal: FC<ModalProps>;
 
-type TooltipProps = ComponentProps<{
-    title: string;
-    body: string;
-    continueText?: string;
-    targetElement: string;
-    showCloseButton: boolean;
-    placement?: Placement;
-    hideOverlay?: boolean;
-    continue: () => void;
-    close: () => void;
-}>;
-declare const Tooltip: FC<TooltipProps>;
+type TooltipProps = ComponentProps<TooltipProps$1>;
+declare const BasicsV2Tooltip: FC<TooltipProps>;
 
-type HintProps = ComponentProps<{
-    title: string;
-    body: string;
-    continueText?: string;
-    showCloseButton: boolean;
-    targetElement: string;
-    placement?: Placement;
-    offsetX?: number;
-    offsetY?: number;
-    continue: () => void;
-    close: () => void;
-}>;
-declare const Hint: FC<HintProps>;
+type HintProps = ComponentProps<HintProps$1>;
+declare const BasicsV2Hint: FC<HintProps>;
 
-export { Hint, type HintProps, Modal, type ModalProps, Tooltip, type TooltipProps };
+export { BasicsV2Hint, BasicsV2Modal, BasicsV2Tooltip, type HintProps, type ModalProps, type TooltipProps };

dist/index.js

 "use client"
-"use strict";var ct=Object.create;var P=Object.defineProperty,mt=Object.defineProperties,ut=Object.getOwnPropertyDescriptor,ft=Object.getOwnPropertyDescriptors,dt=Object.getOwnPropertyNames,O=Object.getOwnPropertySymbols,pt=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var X=(t,e,o)=>e in t?P(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,b=(t,e)=>{for(var o in e||(e={}))L.call(e,o)&&X(t,o,e[o]);if(O)for(var o of O(e))q.call(e,o)&&X(t,o,e[o]);return t},Q=(t,e)=>mt(t,ft(e));var _=(t,e)=>{var o={};for(var n in t)L.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&O)for(var n of O(t))e.indexOf(n)<0&&q.call(t,n)&&(o[n]=t[n]);return o};var yt=(t,e)=>{for(var o in e)P(t,o,{get:e[o],enumerable:!0})},V=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of dt(e))!L.call(t,l)&&l!==o&&P(t,l,{get:()=>e[l],enumerable:!(n=ut(e,l))||n.enumerable});return t};var B=(t,e,o)=>(o=t!=null?ct(pt(t)):{},V(e||!t||!t.__esModule?P(o,"default",{value:t,enumerable:!0}):o,t)),gt=t=>V(P({},"__esModule",{value:!0}),t);var Rt={};yt(Rt,{Hint:()=>Ft,Modal:()=>bt,Tooltip:()=>xt});module.exports=gt(Rt);var W=B(require("classnames"));var Z=require("react/jsx-runtime"),h=n=>{var l=n,{className:t,variant:e}=l,o=_(l,["className","variant"]);return(0,Z.jsx)("button",b({type:"button",className:(0,W.default)("flows_button",`flows_button_${e}`,t)},o))};var tt=B(require("classnames"));var $=require("react/jsx-runtime");function N(t){return(0,$.jsx)("svg",Q(b({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,$.jsx)("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}var K=B(require("classnames"));var z=require("react/jsx-runtime"),y=n=>{var l=n,{className:t,variant:e}=l,o=_(l,["className","variant"]);return(0,z.jsx)("p",b({className:(0,K.default)("flows_text",`flows_text_${e}`,t)},o))};var J=B(require("classnames"));var j=require("react/jsx-runtime"),E=o=>{var n=o,{className:t}=n,e=_(n,["className"]);return(0,j.jsx)("button",b({type:"button",className:(0,J.default)("flows_iconButton",t)},e))};var a=require("react/jsx-runtime"),et=t=>(0,a.jsxs)(a.Fragment,{children:[t.overlay?(0,a.jsx)("div",{className:(0,tt.default)("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,(0,a.jsx)("div",{className:"flows_modal_wrapper",children:(0,a.jsxs)("div",{className:"flows_modal_modal",children:[(0,a.jsx)(y,{variant:"title",children:t.title}),(0,a.jsx)(y,{variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?(0,a.jsx)("div",{className:"flows_modal_footer",children:t.buttons}):null,t.onClose?(0,a.jsx)(E,{"aria-label":"Close",className:"flows_modal_close",onClick:t.onClose,children:(0,a.jsx)(N,{})}):null]})})]});var H=require("react/jsx-runtime"),bt=t=>{let e=[];return t.continueText&&e.push((0,H.jsx)(h,{variant:"primary",onClick:t.continue,children:t.continueText},"continue")),(0,H.jsx)(et,{title:t.title,body:t.body,buttons:e.length?e:void 0,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.close:void 0})};var s=require("react"),u=require("@floating-ui/react-dom"),U=B(require("classnames"));var Ct="#22262d",vt="#fff",ot="%cFlows%c",nt=`color:${vt};background:${Ct};padding:2px 4px;border-radius:4px`,S={error:(t,...e)=>{console.error(`${ot} ${t}`,nt,"",...e)},warn:(t,...e)=>{console.warn(`${ot} ${t}`,nt,"",...e)}};var M=require("react");function D(t){let[e,o]=(0,M.useState)(t?document.querySelector(t):null);return(0,M.useEffect)(()=>{if(!t){o(null);return}let n=()=>{let r=document.querySelector(t);o(p=>p!==r?r:p)};n();let l=new MutationObserver(r=>{r.some(c=>c.addedNodes.length>0||c.removedNodes.length>0)&&n()});return l.observe(document.documentElement,{childList:!0,subtree:!0}),()=>{l.disconnect()}},[t]),e}var m=require("react/jsx-runtime"),wt=4,lt=6,_t=wt+lt,ht=8,Nt=8,Et=(t,e,o)=>(0,u.autoUpdate)(t,e,o,{animationFrame:!0}),it=t=>{var w,T;let e=(0,s.useRef)(null),o=(0,s.useRef)(null),n=(0,s.useRef)(null),l=D(t.targetElement),{refs:r,middlewareData:p,placement:c,x:F,y:I}=(0,u.useFloating)({placement:t.placement,elements:{reference:l},whileElementsMounted:Et,middleware:[(0,u.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,u.shift)({crossAxis:!0,padding:ht}),(0,u.arrow)({element:o,padding:Nt}),(0,u.offset)(_t)]}),[v,C]=(0,s.useState)(!1);(0,s.useEffect)(()=>{l||C(!1)},[l]),(0,s.useEffect)(()=>{if(v)return;let i=r.floating.current;if(!i)return;window.getComputedStyle(i).animationName!=="none"||C(!0)},[v,r.floating]);let R=(0,s.useCallback)(()=>{C(!0)},[]),A=(0,s.useMemo)(()=>c.includes("top")?"bottom":c.includes("bottom")?"top":c.includes("left")?"right":"left",[c]);if((0,s.useEffect)(()=>{t.targetElement||S.error("Cannot render Tooltip without target element")},[t.targetElement]),!l)return null;r.floating.current&&(r.floating.current.style.left=`${F}px`,r.floating.current.style.top=`${I}px`);let x=(w=p.arrow)==null?void 0:w.x,k=(T=p.arrow)==null?void 0:T.y;if([o,e].forEach(i=>{i.current&&(i.current.style.left=x!=null?`${x}px`:"",i.current.style.top=k!=null?`${k}px`:"",i.current.style.right="",i.current.style.bottom="",i.current.style[A]=`${-lt}px`)}),n.current){let i=l.getBoundingClientRect();n.current.style.top=`${i.top}px`,n.current.style.left=`${i.left}px`,n.current.style.width=`${i.width}px`,n.current.style.height=`${i.height}px`}return(0,m.jsxs)("div",{className:"flows_tooltip_root",children:[t.overlay?(0,m.jsx)("div",{className:"flows_tooltip_overlay",ref:n}):null,(0,m.jsxs)("div",{className:"flows_tooltip_tooltip",ref:r.setFloating,"data-open":v?"true":"false",onAnimationEnd:R,children:[(0,m.jsx)(y,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,m.jsx)(y,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?(0,m.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}):null,t.onClose?(0,m.jsx)(E,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,m.jsx)(N,{})}):null,(0,m.jsx)("div",{className:(0,U.default)("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:o}),(0,m.jsx)("div",{className:(0,U.default)("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:e})]})]})};var G=require("react/jsx-runtime"),xt=t=>{let e=[];return t.continueText&&e.push((0,G.jsx)(h,{variant:"primary",onClick:t.continue,children:t.continueText},"continue")),(0,G.jsx)(it,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.close:void 0,buttons:e.length?e:void 0})};var d=require("@floating-ui/react-dom");var g=require("react");var f=require("react/jsx-runtime"),Tt=300,Pt=8,Bt=4,rt=(t,e,o)=>(0,d.autoUpdate)(t,e,o,{animationFrame:!0}),st=t=>{var R,A;let[e,o]=(0,g.useState)(!1),n=(0,g.useCallback)(()=>{o(!0)},[]),l=D(t.targetElement),r=(0,d.useFloating)({placement:t.placement,elements:{reference:l},whileElementsMounted:rt,transform:!1}),p=r.refs.floating,c=(0,d.useFloating)({placement:"bottom",elements:{reference:r.refs.floating.current},whileElementsMounted:rt,transform:!1,middleware:[(0,d.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,d.shift)({crossAxis:!0,padding:Pt}),(0,d.offset)(Bt)]}),F=c.refs.floating,[I,v]=(0,g.useState)(!1),C=(0,g.useCallback)(()=>{v(!0),setTimeout(()=>{o(!1),v(!1)},Tt)},[]);return(0,g.useEffect)(()=>{let x=k=>{let w=k.target,T=F.current,i=p.current;if(!T||!w.isConnected)return;!T.contains(w)&&!(i!=null&&i.contains(w))&&C()};return window.addEventListener("click",x),()=>{window.removeEventListener("click",x)}},[C,p,F]),(0,g.useEffect)(()=>{t.targetElement||S.error("Cannot render Hint without target element")},[t.targetElement]),l?(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)("button",{ref:r.refs.setFloating,style:{left:r.x+((R=t.offsetX)!=null?R:0),top:r.y+((A=t.offsetY)!=null?A:0)},"aria-label":"Open hint",type:"button",className:"flows_hint_hotspot",onClick:e?C:n}),e?(0,f.jsxs)("div",{className:"flows_tooltip_tooltip flows_hint_tooltip","data-open":I?"false":"true",ref:c.refs.setFloating,style:{left:c.x,top:c.y},children:[(0,f.jsx)(y,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,f.jsx)(y,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?(0,f.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}):null,t.onClose?(0,f.jsx)(E,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,f.jsx)(N,{})}):null]}):null]}):null};var Y=require("react/jsx-runtime"),Ft=t=>{let e=[];return t.continueText&&e.push((0,Y.jsx)(h,{variant:"primary",onClick:t.continue,children:t.continueText},"continue")),(0,Y.jsx)(st,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.showCloseButton?t.close:void 0,buttons:e.length?e:void 0})};
+"use strict";var _t=Object.create;var A=Object.defineProperty,bt=Object.defineProperties,gt=Object.getOwnPropertyDescriptor,vt=Object.getOwnPropertyDescriptors,wt=Object.getOwnPropertyNames,L=Object.getOwnPropertySymbols,Ct=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var Q=(t,e,o)=>e in t?A(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,v=(t,e)=>{for(var o in e||(e={}))G.call(e,o)&&Q(t,o,e[o]);if(L)for(var o of L(e))W.call(e,o)&&Q(t,o,e[o]);return t},Z=(t,e)=>bt(t,vt(e));var N=(t,e)=>{var o={};for(var n in t)G.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&L)for(var n of L(t))e.indexOf(n)<0&&W.call(t,n)&&(o[n]=t[n]);return o};var ht=(t,e)=>{for(var o in e)A(t,o,{get:e[o],enumerable:!0})},K=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of wt(e))!G.call(t,l)&&l!==o&&A(t,l,{get:()=>e[l],enumerable:!(n=gt(e,l))||n.enumerable});return t};var F=(t,e,o)=>(o=t!=null?_t(Ct(t)):{},K(e||!t||!t.__esModule?A(o,"default",{value:t,enumerable:!0}):o,t)),Nt=t=>K(A({},"__esModule",{value:!0}),t);var Ut={};ht(Ut,{BasicsV2Hint:()=>Ht,BasicsV2Modal:()=>Bt,BasicsV2Tooltip:()=>Lt});module.exports=Nt(Ut);var X=F(require("classnames"));var Y=require("react/jsx-runtime");function E(t){return(0,Y.jsx)("svg",Z(v({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,Y.jsx)("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}var J=F(require("classnames"));var j=require("react/jsx-runtime"),y=n=>{var l=n,{className:t,variant:e}=l,o=N(l,["className","variant"]);return(0,j.jsx)("p",v({className:(0,J.default)("flows_text",`flows_text_${e}`,t)},o))};var tt=F(require("classnames"));var et=require("react/jsx-runtime"),B=o=>{var n=o,{className:t}=n,e=N(n,["className"]);return(0,et.jsx)("button",v({type:"button",className:(0,tt.default)("flows_iconButton",t)},e))};var rt=require("react");var ot=F(require("classnames"));var lt=require("react/jsx-runtime"),nt=n=>{var l=n,{className:t,variant:e}=l,o=N(l,["className","variant"]);let i=o.href?"a":"button";return(0,lt.jsx)(i,v({type:i==="button"?"button":void 0,className:(0,ot.default)("flows_button",`flows_button_${e}`,t)},o))};var it=require("react/jsx-runtime"),_=({action:t,variant:e})=>{let o=(0,rt.useCallback)(()=>{var n;(n=t.callAction)==null||n.call(t)},[t]);return(0,it.jsx)(nt,{variant:e,href:t.url,target:t.openInNew?"_blank":void 0,onClick:o,children:t.label})};var a=require("react/jsx-runtime"),st=t=>{let e=t.position||"center",o=t.size||"small",n=[];return t.secondaryButton&&n.push((0,a.jsx)(_,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&n.push((0,a.jsx)(_,{action:t.primaryButton,variant:"primary"},"primary")),(0,a.jsxs)(a.Fragment,{children:[t.overlay?(0,a.jsx)("div",{className:(0,X.default)("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,(0,a.jsx)("div",{className:"flows_modal_wrapper",children:(0,a.jsxs)("div",{className:(0,X.default)("flows_modal_modal",`flows_modal_${e}`,`flows_modal_width_${o}`),children:[(0,a.jsx)(y,{className:"flows_modal_title",variant:"title",children:t.title}),(0,a.jsx)(y,{className:"flows_modal_body",variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),t.dots?(0,a.jsx)("div",{className:"flows_modal_dots",children:t.dots}):null,n.length?(0,a.jsx)("div",{className:"flows_modal_footer",children:n}):null,t.onClose?(0,a.jsx)(B,{"aria-label":"Close",className:"flows_modal_close",onClick:t.onClose,children:(0,a.jsx)(E,{})}):null]})})]})};var at=require("react/jsx-runtime"),Et=t=>(0,at.jsx)(st,{title:t.title,body:t.body,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,overlay:!t.hideOverlay,onClose:t.dismissible?t.close:void 0,position:t.position,size:t.size}),Bt=Et;var m=require("react"),f=require("@floating-ui/react-dom"),q=F(require("classnames"));var Pt="#22262d",Tt="#fff",ct="%cFlows%c",mt=`color:${Tt};background:${Pt};padding:2px 4px;border-radius:4px`,O={error:(t,...e)=>{console.error(`${ct} ${t}`,mt,"",...e)},warn:(t,...e)=>{console.warn(`${ct} ${t}`,mt,"",...e)}};var I=require("react"),xt=t=>typeof window=="undefined"?null:document.querySelector(t);function $(t){let[e,o]=(0,I.useState)(t?xt(t):null);return(0,I.useEffect)(()=>{if(!t){o(null);return}let n=()=>{let i=document.querySelector(t);o(s=>s!==i?i:s)};n();let l=new MutationObserver(i=>{i.some(g=>g.addedNodes.length>0||g.removedNodes.length>0)&&n()});return l.observe(document.documentElement,{childList:!0,subtree:!0}),()=>{l.disconnect()}},[t]),e}var D=require("react"),H=()=>{let[t,e]=(0,D.useState)(!0);return(0,D.useEffect)(()=>{e(!1)},[]),t};var c=require("react/jsx-runtime"),At=4,dt=6,Ft=At+dt,Rt=8,Mt=8,kt=(t,e,o)=>(0,f.autoUpdate)(t,e,o,{animationFrame:!0}),ft=t=>{var S,h,x;let e=H(),o=(0,m.useRef)(null),n=(0,m.useRef)(null),l=(0,m.useRef)(null),i=$(t.targetElement),{refs:s,middlewareData:g,placement:p,x:R,y:z}=(0,f.useFloating)({placement:t.placement,elements:{reference:i},whileElementsMounted:kt,middleware:[(0,f.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,f.shift)({crossAxis:!0,padding:Rt}),(0,f.arrow)({element:n,padding:Mt}),(0,f.offset)(Ft)]}),[C,w]=(0,m.useState)(!1);(0,m.useEffect)(()=>{i||w(!1)},[i]),(0,m.useEffect)(()=>{if(C)return;let r=s.floating.current;if(!r)return;window.getComputedStyle(r).animationName!=="none"||w(!0)},[C,s.floating]);let M=(0,m.useCallback)(()=>{w(!0)},[]),k=(0,m.useMemo)(()=>p.includes("top")?"bottom":p.includes("bottom")?"top":p.includes("left")?"right":"left",[p]);if((0,m.useEffect)(()=>{t.targetElement||O.error("Cannot render Tooltip without target element")},[t.targetElement]),!i||e)return null;s.floating.current&&(s.floating.current.style.left=`${R}px`,s.floating.current.style.top=`${z}px`);let P=(S=g.arrow)==null?void 0:S.x,T=(h=g.arrow)==null?void 0:h.y;if([n,o].forEach(r=>{r.current&&(r.current.style.left=P!=null?`${P}px`:"",r.current.style.top=T!=null?`${T}px`:"",r.current.style.right="",r.current.style.bottom="",r.current.style[k]=`${-dt}px`)}),l.current){let r=i.getBoundingClientRect();l.current.style.top=`${r.top}px`,l.current.style.left=`${r.left}px`,l.current.style.width=`${r.width}px`,l.current.style.height=`${r.height}px`}return(0,c.jsxs)("div",{className:"flows_tooltip_root",children:[t.overlay?(0,c.jsx)("div",{className:"flows_tooltip_overlay",ref:l}):null,(0,c.jsxs)("div",{className:"flows_tooltip_tooltip",ref:s.setFloating,"data-open":C?"true":"false",onAnimationEnd:M,children:[(0,c.jsx)(y,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,c.jsx)(y,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),((x=t.dots)!=null?x:t.buttons)?(0,c.jsxs)("div",{className:"flows_tooltip_footer",children:[t.dots,t.buttons?(0,c.jsx)("div",{className:"flows_tooltip_buttons_wrapper",children:(0,c.jsx)("div",{className:"flows_tooltip_buttons",children:t.buttons})}):null]}):null,t.onClose?(0,c.jsx)(B,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,c.jsx)(E,{})}):null,(0,c.jsx)("div",{className:(0,q.default)("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:n}),(0,c.jsx)("div",{className:(0,q.default)("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:o})]})]})};var U=require("react/jsx-runtime"),St=t=>{let e=[];return t.secondaryButton&&e.push((0,U.jsx)(_,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&e.push((0,U.jsx)(_,{action:t.primaryButton,variant:"primary"},"primary")),(0,U.jsx)(ft,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.dismissible?t.close:void 0,buttons:e.length?e:void 0})},Lt=St;var u=require("@floating-ui/react-dom");var b=require("react");var d=require("react/jsx-runtime"),Ot=300,It=8,$t=4,ut=(t,e,o)=>(0,u.autoUpdate)(t,e,o,{animationFrame:!0}),pt=t=>{var M,k,P;let e=H(),[o,n]=(0,b.useState)(!1),l=(0,b.useCallback)(()=>{n(!0)},[]),i=$(t.targetElement),s=(0,u.useFloating)({placement:t.placement,elements:{reference:i},whileElementsMounted:ut,transform:!1}),g=s.refs.floating,p=(0,u.useFloating)({placement:"bottom",elements:{reference:s.refs.floating.current},whileElementsMounted:ut,transform:!1,middleware:[(0,u.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,u.shift)({crossAxis:!0,padding:It}),(0,u.offset)($t)]}),R=p.refs.floating,[z,C]=(0,b.useState)(!1),w=(0,b.useCallback)(()=>{C(!0),setTimeout(()=>{n(!1),C(!1)},Ot)},[]);return(0,b.useEffect)(()=>{let T=S=>{let h=S.target,x=R.current,r=g.current;if(!x||!h.isConnected)return;!x.contains(h)&&!(r!=null&&r.contains(h))&&w()};return window.addEventListener("click",T),()=>{window.removeEventListener("click",T)}},[w,g,R]),(0,b.useEffect)(()=>{t.targetElement||O.error("Cannot render Hint without target element")},[t.targetElement]),!i||e?null:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("button",{ref:s.refs.setFloating,style:{left:s.x+((M=t.offsetX)!=null?M:0),top:s.y+((k=t.offsetY)!=null?k:0)},"aria-label":"Open hint",type:"button",className:"flows_hint_hotspot",onClick:o?w:l}),o?(0,d.jsxs)("div",{className:"flows_tooltip_tooltip flows_hint_tooltip","data-open":z?"false":"true",ref:p.refs.setFloating,style:{left:p.x,top:p.y},children:[(0,d.jsx)(y,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,d.jsx)(y,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),((P=t.dots)!=null?P:t.buttons)?(0,d.jsxs)("div",{className:"flows_tooltip_footer",children:[t.dots,t.buttons?(0,d.jsx)("div",{className:"flows_tooltip_buttons_wrapper",children:(0,d.jsx)("div",{className:"flows_tooltip_buttons",children:t.buttons})}):null]}):null,t.onClose?(0,d.jsx)(B,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,d.jsx)(E,{})}):null]}):null]})};var V=require("react/jsx-runtime"),Dt=t=>{let e=[];return t.secondaryButton&&e.push((0,V.jsx)(_,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&e.push((0,V.jsx)(_,{action:t.primaryButton,variant:"primary"},"primary")),(0,V.jsx)(pt,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.dismissible?t.close:void 0,buttons:e.length?e:void 0})},Ht=Dt;

dist/index.mjs

 "use client"
-import{a as e,b as n,c as i,d as l}from"./chunk-NC7W7N7K.mjs";import{jsx as r}from"react/jsx-runtime";var f=t=>{let o=[];return t.continueText&&o.push(r(e,{variant:"primary",onClick:t.continue,children:t.continueText},"continue")),r(n,{title:t.title,body:t.body,buttons:o.length?o:void 0,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.close:void 0})};import{jsx as m}from"react/jsx-runtime";var g=t=>{let o=[];return t.continueText&&o.push(m(e,{variant:"primary",onClick:t.continue,children:t.continueText},"continue")),m(i,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.close:void 0,buttons:o.length?o:void 0})};import{jsx as s}from"react/jsx-runtime";var x=t=>{let o=[];return t.continueText&&o.push(s(e,{variant:"primary",onClick:t.continue,children:t.continueText},"continue")),s(l,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.showCloseButton?t.close:void 0,buttons:o.length?o:void 0})};export{x as Hint,f as Modal,g as Tooltip};
+import{a as e,b as r,c as s,d as a}from"./chunk-XG37DHOR.mjs";import{jsx as y}from"react/jsx-runtime";var m=t=>y(r,{title:t.title,body:t.body,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,overlay:!t.hideOverlay,onClose:t.dismissible?t.close:void 0,position:t.position,size:t.size}),u=m;import{jsx as i}from"react/jsx-runtime";var l=t=>{let o=[];return t.secondaryButton&&o.push(i(e,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&o.push(i(e,{action:t.primaryButton,variant:"primary"},"primary")),i(s,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.dismissible?t.close:void 0,buttons:o.length?o:void 0})},h=l;import{jsx as n}from"react/jsx-runtime";var d=t=>{let o=[];return t.secondaryButton&&o.push(n(e,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&o.push(n(e,{action:t.primaryButton,variant:"primary"},"primary")),n(a,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.dismissible?t.close:void 0,buttons:o.length?o:void 0})},g=d;export{g as BasicsV2Hint,u as BasicsV2Modal,h as BasicsV2Tooltip};

dist/tour.d.mts

@@ -1,39 +0,13 @@
-import { T as TourComponentProps, P as Placement } from './tooltip-BH43qtSr.mjs';
+import { a as TourComponentProps, b as TourHintProps, c as TourModalProps, d as TourTooltipProps } from './library-Bnlo0c6z.mjs';
 import { FC } from 'react';
 
-type HintProps = TourComponentProps<{
-    title: string;
-    body: string;
-    continueText?: string;
-    previousText?: string;
-    showCloseButton: boolean;
-    targetElement: string;
-    placement?: Placement;
-    offsetX?: number;
-    offsetY?: number;
-}>;
-declare const Hint: FC<HintProps>;
+type HintProps = TourComponentProps<TourHintProps>;
+declare const BasicsV2Hint: FC<HintProps>;
 
-type ModalProps = TourComponentProps<{
-    title: string;
-    body: string;
-    continueText?: string;
-    previousText?: string;
-    showCloseButton: boolean;
-    hideOverlay: boolean;
-}>;
-declare const Modal: FC<ModalProps>;
+type ModalProps = TourComponentProps<TourModalProps>;
+declare const BasicsV2Modal: FC<ModalProps>;
 
-type TooltipProps = TourComponentProps<{
-    title: string;
-    body: string;
-    continueText?: string;
-    previousText?: string;
-    showCloseButton: boolean;
-    targetElement: string;
-    placement?: Placement;
-    hideOverlay?: boolean;
-}>;
-declare const Tooltip: FC<TooltipProps>;
+type TooltipProps = TourComponentProps<TourTooltipProps>;
+declare const BasicsV2Tooltip: FC<TooltipProps>;
 
-export { Hint, type HintProps, Modal, type ModalProps, Tooltip, type TooltipProps };
+export { BasicsV2Hint, BasicsV2Modal, BasicsV2Tooltip, type HintProps, type ModalProps, type TooltipProps };

dist/tour.d.ts

@@ -1,39 +0,13 @@
-import { T as TourComponentProps, P as Placement } from './tooltip-BH43qtSr.js';
+import { a as TourComponentProps, b as TourHintProps, c as TourModalProps, d as TourTooltipProps } from './library-Bnlo0c6z.js';
 import { FC } from 'react';
 
-type HintProps = TourComponentProps<{
-    title: string;
-    body: string;
-    continueText?: string;
-    previousText?: string;
-    showCloseButton: boolean;
-    targetElement: string;
-    placement?: Placement;
-    offsetX?: number;
-    offsetY?: number;
-}>;
-declare const Hint: FC<HintProps>;
+type HintProps = TourComponentProps<TourHintProps>;
+declare const BasicsV2Hint: FC<HintProps>;
 
-type ModalProps = TourComponentProps<{
-    title: string;
-    body: string;
-    continueText?: string;
-    previousText?: string;
-    showCloseButton: boolean;
-    hideOverlay: boolean;
-}>;
-declare const Modal: FC<ModalProps>;
+type ModalProps = TourComponentProps<TourModalProps>;
+declare const BasicsV2Modal: FC<ModalProps>;
 
-type TooltipProps = TourComponentProps<{
-    title: string;
-    body: string;
-    continueText?: string;
-    previousText?: string;
-    showCloseButton: boolean;
-    targetElement: string;
-    placement?: Placement;
-    hideOverlay?: boolean;
-}>;
-declare const Tooltip: FC<TooltipProps>;
+type TooltipProps = TourComponentProps<TourTooltipProps>;
+declare const BasicsV2Tooltip: FC<TooltipProps>;
 
-export { Hint, type HintProps, Modal, type ModalProps, Tooltip, type TooltipProps };
+export { BasicsV2Hint, BasicsV2Modal, BasicsV2Tooltip, type HintProps, type ModalProps, type TooltipProps };

dist/tour.js

 "use client"
-"use strict";var ct=Object.create;var F=Object.defineProperty,mt=Object.defineProperties,ut=Object.getOwnPropertyDescriptor,ft=Object.getOwnPropertyDescriptors,dt=Object.getOwnPropertyNames,M=Object.getOwnPropertySymbols,yt=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var X=(t,e,o)=>e in t?F(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,w=(t,e)=>{for(var o in e||(e={}))U.call(e,o)&&X(t,o,e[o]);if(M)for(var o of M(e))q.call(e,o)&&X(t,o,e[o]);return t},Q=(t,e)=>mt(t,ft(e));var x=(t,e)=>{var o={};for(var n in t)U.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&M)for(var n of M(t))e.indexOf(n)<0&&q.call(t,n)&&(o[n]=t[n]);return o};var gt=(t,e)=>{for(var o in e)F(t,o,{get:e[o],enumerable:!0})},V=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of dt(e))!U.call(t,l)&&l!==o&&F(t,l,{get:()=>e[l],enumerable:!(n=ut(e,l))||n.enumerable});return t};var k=(t,e,o)=>(o=t!=null?ct(yt(t)):{},V(e||!t||!t.__esModule?F(o,"default",{value:t,enumerable:!0}):o,t)),pt=t=>V(F({},"__esModule",{value:!0}),t);var kt={};gt(kt,{Hint:()=>ht,Modal:()=>Tt,Tooltip:()=>Ft});module.exports=pt(kt);var d=require("@floating-ui/react-dom");var vt="#22262d",bt="#fff",W="%cFlows%c",Z=`color:${bt};background:${vt};padding:2px 4px;border-radius:4px`,D={error:(t,...e)=>{console.error(`${W} ${t}`,Z,"",...e)},warn:(t,...e)=>{console.warn(`${W} ${t}`,Z,"",...e)}};var b=require("react");var I=require("react");function L(t){let[e,o]=(0,I.useState)(t?document.querySelector(t):null);return(0,I.useEffect)(()=>{if(!t){o(null);return}let n=()=>{let r=document.querySelector(t);o(p=>p!==r?r:p)};n();let l=new MutationObserver(r=>{r.some(c=>c.addedNodes.length>0||c.removedNodes.length>0)&&n()});return l.observe(document.documentElement,{childList:!0,subtree:!0}),()=>{l.disconnect()}},[t]),e}var G=require("react/jsx-runtime");function N(t){return(0,G.jsx)("svg",Q(w({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,G.jsx)("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}var K=k(require("classnames"));var z=require("react/jsx-runtime"),v=n=>{var l=n,{className:t,variant:e}=l,o=x(l,["className","variant"]);return(0,z.jsx)("p",w({className:(0,K.default)("flows_text",`flows_text_${e}`,t)},o))};var J=k(require("classnames"));var j=require("react/jsx-runtime"),E=o=>{var n=o,{className:t}=n,e=x(n,["className"]);return(0,j.jsx)("button",w({type:"button",className:(0,J.default)("flows_iconButton",t)},e))};var m=require("react/jsx-runtime"),Ct=300,wt=8,_t=4,tt=(t,e,o)=>(0,d.autoUpdate)(t,e,o,{animationFrame:!0}),et=t=>{var A,O;let[e,o]=(0,b.useState)(!1),n=(0,b.useCallback)(()=>{o(!0)},[]),l=L(t.targetElement),r=(0,d.useFloating)({placement:t.placement,elements:{reference:l},whileElementsMounted:tt,transform:!1}),p=r.refs.floating,c=(0,d.useFloating)({placement:"bottom",elements:{reference:r.refs.floating.current},whileElementsMounted:tt,transform:!1,middleware:[(0,d.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,d.shift)({crossAxis:!0,padding:wt}),(0,d.offset)(_t)]}),R=c.refs.floating,[H,h]=(0,b.useState)(!1),_=(0,b.useCallback)(()=>{h(!0),setTimeout(()=>{o(!1),h(!1)},Ct)},[]);return(0,b.useEffect)(()=>{let P=S=>{let T=S.target,B=R.current,i=p.current;if(!B||!T.isConnected)return;!B.contains(T)&&!(i!=null&&i.contains(T))&&_()};return window.addEventListener("click",P),()=>{window.removeEventListener("click",P)}},[_,p,R]),(0,b.useEffect)(()=>{t.targetElement||D.error("Cannot render Hint without target element")},[t.targetElement]),l?(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)("button",{ref:r.refs.setFloating,style:{left:r.x+((A=t.offsetX)!=null?A:0),top:r.y+((O=t.offsetY)!=null?O:0)},"aria-label":"Open hint",type:"button",className:"flows_hint_hotspot",onClick:e?_:n}),e?(0,m.jsxs)("div",{className:"flows_tooltip_tooltip flows_hint_tooltip","data-open":H?"false":"true",ref:c.refs.setFloating,style:{left:c.x,top:c.y},children:[(0,m.jsx)(v,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,m.jsx)(v,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?(0,m.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}):null,t.onClose?(0,m.jsx)(E,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,m.jsx)(N,{})}):null]}):null]}):null};var ot=k(require("classnames"));var nt=require("react/jsx-runtime"),C=n=>{var l=n,{className:t,variant:e}=l,o=x(l,["className","variant"]);return(0,nt.jsx)("button",w({type:"button",className:(0,ot.default)("flows_button",`flows_button_${e}`,t)},o))};var y=require("react/jsx-runtime"),ht=t=>{let e=t.previous&&t.previousText&&(0,y.jsx)(C,{variant:"secondary",onClick:t.previous,children:t.previousText}),o=t.continueText&&(0,y.jsx)(C,{variant:"primary",onClick:t.continue,children:t.continueText}),n=o||e?(0,y.jsxs)(y.Fragment,{children:[e!=null?e:(0,y.jsx)("div",{"aria-hidden":!0}),o!=null?o:(0,y.jsx)("div",{"aria-hidden":!0})]}):null;return(0,y.jsx)(et,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.showCloseButton?t.cancel:void 0,buttons:n},t.__flows.id)};var lt=k(require("classnames"));var s=require("react/jsx-runtime"),it=t=>(0,s.jsxs)(s.Fragment,{children:[t.overlay?(0,s.jsx)("div",{className:(0,lt.default)("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,(0,s.jsx)("div",{className:"flows_modal_wrapper",children:(0,s.jsxs)("div",{className:"flows_modal_modal",children:[(0,s.jsx)(v,{variant:"title",children:t.title}),(0,s.jsx)(v,{variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?(0,s.jsx)("div",{className:"flows_modal_footer",children:t.buttons}):null,t.onClose?(0,s.jsx)(E,{"aria-label":"Close",className:"flows_modal_close",onClick:t.onClose,children:(0,s.jsx)(N,{})}):null]})})]});var $=require("react/jsx-runtime"),Tt=t=>{let e=[];return t.previous&&t.previousText&&e.push((0,$.jsx)(C,{variant:"secondary",onClick:t.previous,children:t.previousText},"previous")),t.continueText&&e.push((0,$.jsx)(C,{variant:"primary",onClick:t.continue,children:t.continueText},"continue")),(0,$.jsx)(it,{title:t.title,body:t.body,overlay:!t.hideOverlay,buttons:e.length?e:void 0,onClose:t.showCloseButton?t.cancel:void 0})};var a=require("react"),f=require("@floating-ui/react-dom"),Y=k(require("classnames"));var u=require("react/jsx-runtime"),xt=4,rt=6,Nt=xt+rt,Et=8,Pt=8,Bt=(t,e,o)=>(0,f.autoUpdate)(t,e,o,{animationFrame:!0}),at=t=>{var T,B;let e=(0,a.useRef)(null),o=(0,a.useRef)(null),n=(0,a.useRef)(null),l=L(t.targetElement),{refs:r,middlewareData:p,placement:c,x:R,y:H}=(0,f.useFloating)({placement:t.placement,elements:{reference:l},whileElementsMounted:Bt,middleware:[(0,f.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,f.shift)({crossAxis:!0,padding:Et}),(0,f.arrow)({element:o,padding:Pt}),(0,f.offset)(Nt)]}),[h,_]=(0,a.useState)(!1);(0,a.useEffect)(()=>{l||_(!1)},[l]),(0,a.useEffect)(()=>{if(h)return;let i=r.floating.current;if(!i)return;window.getComputedStyle(i).animationName!=="none"||_(!0)},[h,r.floating]);let A=(0,a.useCallback)(()=>{_(!0)},[]),O=(0,a.useMemo)(()=>c.includes("top")?"bottom":c.includes("bottom")?"top":c.includes("left")?"right":"left",[c]);if((0,a.useEffect)(()=>{t.targetElement||D.error("Cannot render Tooltip without target element")},[t.targetElement]),!l)return null;r.floating.current&&(r.floating.current.style.left=`${R}px`,r.floating.current.style.top=`${H}px`);let P=(T=p.arrow)==null?void 0:T.x,S=(B=p.arrow)==null?void 0:B.y;if([o,e].forEach(i=>{i.current&&(i.current.style.left=P!=null?`${P}px`:"",i.current.style.top=S!=null?`${S}px`:"",i.current.style.right="",i.current.style.bottom="",i.current.style[O]=`${-rt}px`)}),n.current){let i=l.getBoundingClientRect();n.current.style.top=`${i.top}px`,n.current.style.left=`${i.left}px`,n.current.style.width=`${i.width}px`,n.current.style.height=`${i.height}px`}return(0,u.jsxs)("div",{className:"flows_tooltip_root",children:[t.overlay?(0,u.jsx)("div",{className:"flows_tooltip_overlay",ref:n}):null,(0,u.jsxs)("div",{className:"flows_tooltip_tooltip",ref:r.setFloating,"data-open":h?"true":"false",onAnimationEnd:A,children:[(0,u.jsx)(v,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,u.jsx)(v,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?(0,u.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}):null,t.onClose?(0,u.jsx)(E,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,u.jsx)(N,{})}):null,(0,u.jsx)("div",{className:(0,Y.default)("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:o}),(0,u.jsx)("div",{className:(0,Y.default)("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:e})]})]})};var g=require("react/jsx-runtime"),Ft=t=>{let e=t.previous&&t.previousText&&(0,g.jsx)(C,{variant:"secondary",onClick:t.previous,children:t.previousText}),o=t.continueText&&(0,g.jsx)(C,{variant:"primary",onClick:t.continue,children:t.continueText}),n=o||e?(0,g.jsxs)(g.Fragment,{children:[e!=null?e:(0,g.jsx)("div",{"aria-hidden":!0}),o!=null?o:(0,g.jsx)("div",{"aria-hidden":!0})]}):null;return(0,g.jsx)(at,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.cancel:void 0,buttons:n})};
+"use strict";var wt=Object.create;var M=Object.defineProperty,Ct=Object.defineProperties,ht=Object.getOwnPropertyDescriptor,Nt=Object.getOwnPropertyDescriptors,Et=Object.getOwnPropertyNames,$=Object.getOwnPropertySymbols,Tt=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable;var K=(t,e,o)=>e in t?M(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,C=(t,e)=>{for(var o in e||(e={}))Y.call(e,o)&&K(t,o,e[o]);if($)for(var o of $(e))J.call(e,o)&&K(t,o,e[o]);return t},j=(t,e)=>Ct(t,Nt(e));var T=(t,e)=>{var o={};for(var n in t)Y.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&$)for(var n of $(t))e.indexOf(n)<0&&J.call(t,n)&&(o[n]=t[n]);return o};var Pt=(t,e)=>{for(var o in e)M(t,o,{get:e[o],enumerable:!0})},tt=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of Et(e))!Y.call(t,l)&&l!==o&&M(t,l,{get:()=>e[l],enumerable:!(n=ht(e,l))||n.enumerable});return t};var P=(t,e,o)=>(o=t!=null?wt(Tt(t)):{},tt(e||!t||!t.__esModule?M(o,"default",{value:t,enumerable:!0}):o,t)),Bt=t=>tt(M({},"__esModule",{value:!0}),t);var Yt={};Pt(Yt,{BasicsV2Hint:()=>Ot,BasicsV2Modal:()=>It,BasicsV2Tooltip:()=>Gt});module.exports=Bt(Yt);var f=require("@floating-ui/react-dom");var xt="#22262d",Ft="#fff",et="%cFlows%c",ot=`color:${Ft};background:${xt};padding:2px 4px;border-radius:4px`,L={error:(t,...e)=>{console.error(`${et} ${t}`,ot,"",...e)},warn:(t,...e)=>{console.warn(`${et} ${t}`,ot,"",...e)}};var g=require("react");var H=require("react"),At=t=>typeof window=="undefined"?null:document.querySelector(t);function V(t){let[e,o]=(0,H.useState)(t?At(t):null);return(0,H.useEffect)(()=>{if(!t){o(null);return}let n=()=>{let i=document.querySelector(t);o(r=>r!==i?i:r)};n();let l=new MutationObserver(i=>{i.some(w=>w.addedNodes.length>0||w.removedNodes.length>0)&&n()});return l.observe(document.documentElement,{childList:!0,subtree:!0}),()=>{l.disconnect()}},[t]),e}var X=require("react/jsx-runtime");function B(t){return(0,X.jsx)("svg",j(C({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,X.jsx)("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}var U=require("react"),z=()=>{let[t,e]=(0,U.useState)(!0);return(0,U.useEffect)(()=>{e(!1)},[]),t};var nt=P(require("classnames"));var lt=require("react/jsx-runtime"),b=n=>{var l=n,{className:t,variant:e}=l,o=T(l,["className","variant"]);return(0,lt.jsx)("p",C({className:(0,nt.default)("flows_text",`flows_text_${e}`,t)},o))};var it=P(require("classnames"));var rt=require("react/jsx-runtime"),x=o=>{var n=o,{className:t}=n,e=T(n,["className"]);return(0,rt.jsx)("button",C({type:"button",className:(0,it.default)("flows_iconButton",t)},e))};var d=require("react/jsx-runtime"),Rt=300,St=8,Mt=4,st=(t,e,o)=>(0,f.autoUpdate)(t,e,o,{animationFrame:!0}),at=t=>{var O,D,A;let e=z(),[o,n]=(0,g.useState)(!1),l=(0,g.useCallback)(()=>{n(!0)},[]),i=V(t.targetElement),r=(0,f.useFloating)({placement:t.placement,elements:{reference:i},whileElementsMounted:st,transform:!1}),w=r.refs.floating,_=(0,f.useFloating)({placement:"bottom",elements:{reference:r.refs.floating.current},whileElementsMounted:st,transform:!1,middleware:[(0,f.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,f.shift)({crossAxis:!0,padding:St}),(0,f.offset)(Mt)]}),k=_.refs.floating,[G,N]=(0,g.useState)(!1),h=(0,g.useCallback)(()=>{N(!0),setTimeout(()=>{n(!1),N(!1)},Rt)},[]);return(0,g.useEffect)(()=>{let R=I=>{let E=I.target,S=k.current,s=w.current;if(!S||!E.isConnected)return;!S.contains(E)&&!(s!=null&&s.contains(E))&&h()};return window.addEventListener("click",R),()=>{window.removeEventListener("click",R)}},[h,w,k]),(0,g.useEffect)(()=>{t.targetElement||L.error("Cannot render Hint without target element")},[t.targetElement]),!i||e?null:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("button",{ref:r.refs.setFloating,style:{left:r.x+((O=t.offsetX)!=null?O:0),top:r.y+((D=t.offsetY)!=null?D:0)},"aria-label":"Open hint",type:"button",className:"flows_hint_hotspot",onClick:o?h:l}),o?(0,d.jsxs)("div",{className:"flows_tooltip_tooltip flows_hint_tooltip","data-open":G?"false":"true",ref:_.refs.setFloating,style:{left:_.x,top:_.y},children:[(0,d.jsx)(b,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,d.jsx)(b,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),((A=t.dots)!=null?A:t.buttons)?(0,d.jsxs)("div",{className:"flows_tooltip_footer",children:[t.dots,t.buttons?(0,d.jsx)("div",{className:"flows_tooltip_buttons_wrapper",children:(0,d.jsx)("div",{className:"flows_tooltip_buttons",children:t.buttons})}):null]}):null,t.onClose?(0,d.jsx)(x,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,d.jsx)(B,{})}):null]}):null]})};var ut=require("react");var dt=P(require("classnames"));var mt=require("react/jsx-runtime"),ct=n=>{var l=n,{className:t,variant:e}=l,o=T(l,["className","variant"]);let i=o.href?"a":"button";return(0,mt.jsx)(i,C({type:i==="button"?"button":void 0,className:(0,dt.default)("flows_button",`flows_button_${e}`,t)},o))};var ft=require("react/jsx-runtime"),v=({action:t,variant:e})=>{let o=(0,ut.useCallback)(()=>{var n;(n=t.callAction)==null||n.call(t)},[t]);return(0,ft.jsx)(ct,{variant:e,href:t.url,target:t.openInNew?"_blank":void 0,onClick:o,children:t.label})};var pt=P(require("classnames")),yt=require("react"),q=require("react/jsx-runtime"),F=({count:t,index:e})=>{let o=(0,yt.useMemo)(()=>Array(t).fill(null).map((n,l)=>l),[t]);return(0,q.jsx)("div",{className:"flows_dots",children:o.map(n=>(0,q.jsx)("div",{className:(0,pt.default)("flows_dots_dot",n===e&&"flows_dots_dot_active")},n))})};var p=require("react/jsx-runtime"),kt=t=>{var i,r;let e=t.primaryButton?(0,p.jsx)(v,{action:t.primaryButton,variant:"primary"}):null,o=t.secondaryButton?(0,p.jsx)(v,{action:t.secondaryButton,variant:"secondary"}):null,n=e||o?(0,p.jsxs)(p.Fragment,{children:[o!=null?o:(0,p.jsx)("div",{"aria-hidden":!0}),e!=null?e:(0,p.jsx)("div",{"aria-hidden":!0})]}):null,l=t.hideProgress?null:(0,p.jsx)(F,{count:(i=t.__flows.tourVisibleStepCount)!=null?i:0,index:(r=t.__flows.tourVisibleStepIndex)!=null?r:0});return(0,p.jsx)(at,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.dismissible?t.cancel:void 0,buttons:n,dots:l},t.__flows.id)},Ot=kt;var Q=P(require("classnames"));var a=require("react/jsx-runtime"),_t=t=>{let e=t.position||"center",o=t.size||"small",n=[];return t.secondaryButton&&n.push((0,a.jsx)(v,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&n.push((0,a.jsx)(v,{action:t.primaryButton,variant:"primary"},"primary")),(0,a.jsxs)(a.Fragment,{children:[t.overlay?(0,a.jsx)("div",{className:(0,Q.default)("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,(0,a.jsx)("div",{className:"flows_modal_wrapper",children:(0,a.jsxs)("div",{className:(0,Q.default)("flows_modal_modal",`flows_modal_${e}`,`flows_modal_width_${o}`),children:[(0,a.jsx)(b,{className:"flows_modal_title",variant:"title",children:t.title}),(0,a.jsx)(b,{className:"flows_modal_body",variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),t.dots?(0,a.jsx)("div",{className:"flows_modal_dots",children:t.dots}):null,n.length?(0,a.jsx)("div",{className:"flows_modal_footer",children:n}):null,t.onClose?(0,a.jsx)(x,{"aria-label":"Close",className:"flows_modal_close",onClick:t.onClose,children:(0,a.jsx)(B,{})}):null]})})]})};var W=require("react/jsx-runtime"),Dt=t=>{var o,n;let e=t.hideProgress?null:(0,W.jsx)(F,{count:(o=t.__flows.tourVisibleStepCount)!=null?o:0,index:(n=t.__flows.tourVisibleStepIndex)!=null?n:0});return(0,W.jsx)(_t,{title:t.title,body:t.body,overlay:!t.hideOverlay,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,onClose:t.dismissible?t.cancel:void 0,position:t.position,size:t.size,dots:e})},It=Dt;var m=require("react"),u=require("@floating-ui/react-dom"),Z=P(require("classnames"));var c=require("react/jsx-runtime"),$t=4,bt=6,Lt=$t+bt,Ht=8,Vt=8,Ut=(t,e,o)=>(0,u.autoUpdate)(t,e,o,{animationFrame:!0}),gt=t=>{var I,E,S;let e=z(),o=(0,m.useRef)(null),n=(0,m.useRef)(null),l=(0,m.useRef)(null),i=V(t.targetElement),{refs:r,middlewareData:w,placement:_,x:k,y:G}=(0,u.useFloating)({placement:t.placement,elements:{reference:i},whileElementsMounted:Ut,middleware:[(0,u.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,u.shift)({crossAxis:!0,padding:Ht}),(0,u.arrow)({element:n,padding:Vt}),(0,u.offset)(Lt)]}),[N,h]=(0,m.useState)(!1);(0,m.useEffect)(()=>{i||h(!1)},[i]),(0,m.useEffect)(()=>{if(N)return;let s=r.floating.current;if(!s)return;window.getComputedStyle(s).animationName!=="none"||h(!0)},[N,r.floating]);let O=(0,m.useCallback)(()=>{h(!0)},[]),D=(0,m.useMemo)(()=>_.includes("top")?"bottom":_.includes("bottom")?"top":_.includes("left")?"right":"left",[_]);if((0,m.useEffect)(()=>{t.targetElement||L.error("Cannot render Tooltip without target element")},[t.targetElement]),!i||e)return null;r.floating.current&&(r.floating.current.style.left=`${k}px`,r.floating.current.style.top=`${G}px`);let A=(I=w.arrow)==null?void 0:I.x,R=(E=w.arrow)==null?void 0:E.y;if([n,o].forEach(s=>{s.current&&(s.current.style.left=A!=null?`${A}px`:"",s.current.style.top=R!=null?`${R}px`:"",s.current.style.right="",s.current.style.bottom="",s.current.style[D]=`${-bt}px`)}),l.current){let s=i.getBoundingClientRect();l.current.style.top=`${s.top}px`,l.current.style.left=`${s.left}px`,l.current.style.width=`${s.width}px`,l.current.style.height=`${s.height}px`}return(0,c.jsxs)("div",{className:"flows_tooltip_root",children:[t.overlay?(0,c.jsx)("div",{className:"flows_tooltip_overlay",ref:l}):null,(0,c.jsxs)("div",{className:"flows_tooltip_tooltip",ref:r.setFloating,"data-open":N?"true":"false",onAnimationEnd:O,children:[(0,c.jsx)(b,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,c.jsx)(b,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),((S=t.dots)!=null?S:t.buttons)?(0,c.jsxs)("div",{className:"flows_tooltip_footer",children:[t.dots,t.buttons?(0,c.jsx)("div",{className:"flows_tooltip_buttons_wrapper",children:(0,c.jsx)("div",{className:"flows_tooltip_buttons",children:t.buttons})}):null]}):null,t.onClose?(0,c.jsx)(x,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,c.jsx)(B,{})}):null,(0,c.jsx)("div",{className:(0,Z.default)("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:n}),(0,c.jsx)("div",{className:(0,Z.default)("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:o})]})]})};var y=require("react/jsx-runtime"),zt=t=>{var i,r;let e=t.primaryButton?(0,y.jsx)(v,{action:t.primaryButton,variant:"primary"}):null,o=t.secondaryButton?(0,y.jsx)(v,{action:t.secondaryButton,variant:"secondary"}):null,n=e||o?(0,y.jsxs)(y.Fragment,{children:[o!=null?o:(0,y.jsx)("div",{"aria-hidden":!0}),e!=null?e:(0,y.jsx)("div",{"aria-hidden":!0})]}):null,l=t.hideProgress?null:(0,y.jsx)(F,{count:(i=t.__flows.tourVisibleStepCount)!=null?i:0,index:(r=t.__flows.tourVisibleStepIndex)!=null?r:0});return(0,y.jsx)(gt,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.dismissible?t.cancel:void 0,buttons:n,dots:l})},Gt=zt;

dist/tour.mjs

 "use client"
-import{a as n,b as u,c as m,d as s}from"./chunk-NC7W7N7K.mjs";import{Fragment as d,jsx as i,jsxs as c}from"react/jsx-runtime";var C=t=>{let e=t.previous&&t.previousText&&i(n,{variant:"secondary",onClick:t.previous,children:t.previousText}),o=t.continueText&&i(n,{variant:"primary",onClick:t.continue,children:t.continueText}),l=o||e?c(d,{children:[e!=null?e:i("div",{"aria-hidden":!0}),o!=null?o:i("div",{"aria-hidden":!0})]}):null;return i(s,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.showCloseButton?t.cancel:void 0,buttons:l},t.__flows.id)};import{jsx as a}from"react/jsx-runtime";var B=t=>{let e=[];return t.previous&&t.previousText&&e.push(a(n,{variant:"secondary",onClick:t.previous,children:t.previousText},"previous")),t.continueText&&e.push(a(n,{variant:"primary",onClick:t.continue,children:t.continueText},"continue")),a(u,{title:t.title,body:t.body,overlay:!t.hideOverlay,buttons:e.length?e:void 0,onClose:t.showCloseButton?t.cancel:void 0})};import{Fragment as y,jsx as r,jsxs as f}from"react/jsx-runtime";var F=t=>{let e=t.previous&&t.previousText&&r(n,{variant:"secondary",onClick:t.previous,children:t.previousText}),o=t.continueText&&r(n,{variant:"primary",onClick:t.continue,children:t.continueText}),l=o||e?f(y,{children:[e!=null?e:r("div",{"aria-hidden":!0}),o!=null?o:r("div",{"aria-hidden":!0})]}):null;return r(m,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.cancel:void 0,buttons:l})};export{C as Hint,B as Modal,F as Tooltip};
+import{a as i,b as u,c,d as f}from"./chunk-XG37DHOR.mjs";import b from"classnames";import{useMemo as _}from"react";import{jsx as y}from"react/jsx-runtime";var r=({count:t,index:e})=>{let o=_(()=>Array(t).fill(null).map((n,a)=>a),[t]);return y("div",{className:"flows_dots",children:o.map(n=>y("div",{className:b("flows_dots_dot",n===e&&"flows_dots_dot_active")},n))})};import{Fragment as C,jsx as l,jsxs as T}from"react/jsx-runtime";var B=t=>{var d,m;let e=t.primaryButton?l(i,{action:t.primaryButton,variant:"primary"}):null,o=t.secondaryButton?l(i,{action:t.secondaryButton,variant:"secondary"}):null,n=e||o?T(C,{children:[o!=null?o:l("div",{"aria-hidden":!0}),e!=null?e:l("div",{"aria-hidden":!0})]}):null,a=t.hideProgress?null:l(r,{count:(d=t.__flows.tourVisibleStepCount)!=null?d:0,index:(m=t.__flows.tourVisibleStepIndex)!=null?m:0});return l(f,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.dismissible?t.cancel:void 0,buttons:n,dots:a},t.__flows.id)},D=B;import{jsx as P}from"react/jsx-runtime";var v=t=>{var o,n;let e=t.hideProgress?null:P(r,{count:(o=t.__flows.tourVisibleStepCount)!=null?o:0,index:(n=t.__flows.tourVisibleStepIndex)!=null?n:0});return P(u,{title:t.title,body:t.body,overlay:!t.hideOverlay,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,onClose:t.dismissible?t.cancel:void 0,position:t.position,size:t.size,dots:e})},O=v;import{Fragment as h,jsx as s,jsxs as w}from"react/jsx-runtime";var p=t=>{var d,m;let e=t.primaryButton?s(i,{action:t.primaryButton,variant:"primary"}):null,o=t.secondaryButton?s(i,{action:t.secondaryButton,variant:"secondary"}):null,n=e||o?w(h,{children:[o!=null?o:s("div",{"aria-hidden":!0}),e!=null?e:s("div",{"aria-hidden":!0})]}):null,a=t.hideProgress?null:s(r,{count:(d=t.__flows.tourVisibleStepCount)!=null?d:0,index:(m=t.__flows.tourVisibleStepIndex)!=null?m:0});return s(c,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.dismissible?t.cancel:void 0,buttons:n,dots:a})},G=p;export{D as BasicsV2Hint,O as BasicsV2Modal,G as BasicsV2Tooltip};

package.json

 {
   "name": "@flows/react-components",
-  "version": "1.2.2",
+  "version": "1.2.3-canary.0",
   "description": "Built-in components for Flows React SDK",
@@ -33,7 +33,7 @@ "keywords": [
     "@types/react": "^19.1.10",
-    "jest": "^30.0.5",
-    "jest-environment-jsdom": "^30.0.5",
-    "ts-jest": "^29.4.1",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "ts-jest": "^29.4.5",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "@flows/shared": "1.0.0",
@@ -46,3 +46,3 @@ "@flows/styles": "1.0.0"
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.5",
+    "@floating-ui/react-dom": "^2.1.6",
     "classnames": "^2.5.1"
@@ -49,0 +49,0 @@ },

README.md

@@ -1,20 +0,43 @@
-<h1 align="center">Flows React components</h1>
+<p align="center">
+  <a href="https://flows.sh">
+    <img src="https://raw.githubusercontent.com/RBND-studio/flows-sdk/refs/heads/main/docs/avatar.png" height="96">
+    <h3 align="center">Flows React Components</h3>
+  </a>
+</p>
 
-## Getting started
+<p align="center">
+  The better way to build product adoption.
+</p>
 
-Build native product growth experiences, your way – Meet Flows, the flexible platform for building in-app experiences. Focus on your product, not creating one-off logic.
+<p align="center">
+  <a href="https://flows.sh/docs"><strong>Documentation</strong></a> ·
+  <a href="https://flows.sh/changelog"><strong>Changelog</strong></a> ·
+  <a href="https://flows.sh/examples"><strong>Examples</strong></a> ·
+  <a href="https://flows.sh/docs/sdk-overview"><strong>SDKs</strong></a>
+</p>
 
-- Build powerful in-app experiences to drive product growth
-- Embed components directly into your app
-- Create onboarding, product adoption, in-app messaging, growth experiments, and more
-- Bring your own UI components or use Flows' built-in components
+## Installation
 
-Visit our [website](https://flows.sh) to learn more about Flows
+For full setup instructions, see our [Quickstart guide](https://flows.sh/docs/quickstart).
 
-## Documentation
+```
+npm install @flows/react-components
+```
 
-Visit [https://flows.sh/docs](https://flows.sh/docs) for full documentation.
+⚠️ This package provides a set of ready-made components for building product adoption. To use it, you also need to install the `@flows/react` package.
 
+## Components
+
+- [Modal](https://flows.sh/docs/components/modal)
+- [Tooltip](https://flows.sh/docs/components/tooltip)
+- [Hint](https://flows.sh/docs/components/hint)
+
+Looking for more components? [Contact us](https://flows.sh/contact) or create your own custom components by following our [guide](https://flows.sh/docs/create-custom-components).
+
+## Contributing
+
+We ❤️ contributions big and small. If you have any ideas for improvements, either submit an issue or create a pull request.
+
 ---
 
 Created by [rbnd.studio](https://rbnd.studio/).

dist/chunk-NC7W7N7K.mjs

-"use client"
-var K=Object.defineProperty,z=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var O=(t,e,o)=>e in t?K(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,m=(t,e)=>{for(var o in e||(e={}))k.call(e,o)&&O(t,o,e[o]);if(T)for(var o of T(e))D.call(e,o)&&O(t,o,e[o]);return t},I=(t,e)=>z(t,J(e));var _=(t,e)=>{var o={};for(var n in t)k.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&T)for(var n of T(t))e.indexOf(n)<0&&D.call(t,n)&&(o[n]=t[n]);return o};import j from"classnames";import{jsx as tt}from"react/jsx-runtime";var It=n=>{var s=n,{className:t,variant:e}=s,o=_(s,["className","variant"]);return tt("button",m({type:"button",className:j("flows_button",`flows_button_${e}`,t)},o))};import st from"classnames";import{jsx as L}from"react/jsx-runtime";function y(t){return L("svg",I(m({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:L("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}import et from"classnames";import{jsx as ot}from"react/jsx-runtime";var c=n=>{var s=n,{className:t,variant:e}=s,o=_(s,["className","variant"]);return ot("p",m({className:et("flows_text",`flows_text_${e}`,t)},o))};import nt from"classnames";import{jsx as lt}from"react/jsx-runtime";var w=o=>{var n=o,{className:t}=n,e=_(n,["className"]);return lt("button",m({type:"button",className:nt("flows_iconButton",t)},e))};import{Fragment as rt,jsx as d,jsxs as B}from"react/jsx-runtime";var te=t=>B(rt,{children:[t.overlay?d("div",{className:st("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,d("div",{className:"flows_modal_wrapper",children:B("div",{className:"flows_modal_modal",children:[d(c,{variant:"title",children:t.title}),d(c,{variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?d("div",{className:"flows_modal_footer",children:t.buttons}):null,t.onClose?d(w,{"aria-label":"Close",className:"flows_modal_close",onClick:t.onClose,children:d(y,{})}):null]})})]});import{useCallback as ft,useEffect as P,useMemo as ut,useRef as S,useState as dt}from"react";import{useFloating as pt,shift as gt,offset as _t,arrow as yt,flip as wt,autoUpdate as bt}from"@floating-ui/react-dom";import U from"classnames";var at="#22262d",it="#fff",M="%cFlows%c",$=`color:${it};background:${at};padding:2px 4px;border-radius:4px`,R={error:(t,...e)=>{console.error(`${M} ${t}`,$,"",...e)},warn:(t,...e)=>{console.warn(`${M} ${t}`,$,"",...e)}};import{useState as ct,useEffect as mt}from"react";function A(t){let[e,o]=ct(t?document.querySelector(t):null);return mt(()=>{if(!t){o(null);return}let n=()=>{let r=document.querySelector(t);o(i=>i!==r?r:i)};n();let s=new MutationObserver(r=>{r.some(a=>a.addedNodes.length>0||a.removedNodes.length>0)&&n()});return s.observe(document.documentElement,{childList:!0,subtree:!0}),()=>{s.disconnect()}},[t]),e}import{jsx as f,jsxs as H}from"react/jsx-runtime";var vt=4,G=6,Ct=vt+G,Nt=8,ht=8,Et=(t,e,o)=>bt(t,e,o,{animationFrame:!0}),pe=t=>{var g,C;let e=S(null),o=S(null),n=S(null),s=A(t.targetElement),{refs:r,middlewareData:i,placement:a,x:N,y:F}=pt({placement:t.placement,elements:{reference:s},whileElementsMounted:Et,middleware:[wt({fallbackPlacements:["top","bottom","left","right"]}),gt({crossAxis:!0,padding:Nt}),yt({element:o,padding:ht}),_t(Ct)]}),[p,u]=dt(!1);P(()=>{s||u(!1)},[s]),P(()=>{if(p)return;let l=r.floating.current;if(!l)return;window.getComputedStyle(l).animationName!=="none"||u(!0)},[p,r.floating]);let h=ft(()=>{u(!0)},[]),E=ut(()=>a.includes("top")?"bottom":a.includes("bottom")?"top":a.includes("left")?"right":"left",[a]);if(P(()=>{t.targetElement||R.error("Cannot render Tooltip without target element")},[t.targetElement]),!s)return null;r.floating.current&&(r.floating.current.style.left=`${N}px`,r.floating.current.style.top=`${F}px`);let v=(g=i.arrow)==null?void 0:g.x,x=(C=i.arrow)==null?void 0:C.y;if([o,e].forEach(l=>{l.current&&(l.current.style.left=v!=null?`${v}px`:"",l.current.style.top=x!=null?`${x}px`:"",l.current.style.right="",l.current.style.bottom="",l.current.style[E]=`${-G}px`)}),n.current){let l=s.getBoundingClientRect();n.current.style.top=`${l.top}px`,n.current.style.left=`${l.left}px`,n.current.style.width=`${l.width}px`,n.current.style.height=`${l.height}px`}return H("div",{className:"flows_tooltip_root",children:[t.overlay?f("div",{className:"flows_tooltip_overlay",ref:n}):null,H("div",{className:"flows_tooltip_tooltip",ref:r.setFloating,"data-open":p?"true":"false",onAnimationEnd:h,children:[f(c,{className:"flows_tooltip_title",variant:"title",children:t.title}),f(c,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?f("div",{className:"flows_tooltip_footer",children:t.buttons}):null,t.onClose?f(w,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:f(y,{})}):null,f("div",{className:U("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:o}),f("div",{className:U("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:e})]})]})};import{flip as xt,offset as Tt,shift as Rt,useFloating as Y,autoUpdate as At}from"@floating-ui/react-dom";import{useCallback as q,useEffect as X,useState as Q}from"react";import{Fragment as Ot,jsx as b,jsxs as W}from"react/jsx-runtime";var Ft=300,Pt=8,St=4,V=(t,e,o)=>At(t,e,o,{animationFrame:!0}),Ee=t=>{var h,E;let[e,o]=Q(!1),n=q(()=>{o(!0)},[]),s=A(t.targetElement),r=Y({placement:t.placement,elements:{reference:s},whileElementsMounted:V,transform:!1}),i=r.refs.floating,a=Y({placement:"bottom",elements:{reference:r.refs.floating.current},whileElementsMounted:V,transform:!1,middleware:[xt({fallbackPlacements:["top","bottom","left","right"]}),Rt({crossAxis:!0,padding:Pt}),Tt(St)]}),N=a.refs.floating,[F,p]=Q(!1),u=q(()=>{p(!0),setTimeout(()=>{o(!1),p(!1)},Ft)},[]);return X(()=>{let v=x=>{let g=x.target,C=N.current,l=i.current;if(!C||!g.isConnected)return;!C.contains(g)&&!(l!=null&&l.contains(g))&&u()};return window.addEventListener("click",v),()=>{window.removeEventListener("click",v)}},[u,i,N]),X(()=>{t.targetElement||R.error("Cannot render Hint without target element")},[t.targetElement]),s?W(Ot,{children:[b("button",{ref:r.refs.setFloating,style:{left:r.x+((h=t.offsetX)!=null?h:0),top:r.y+((E=t.offsetY)!=null?E:0)},"aria-label":"Open hint",type:"button",className:"flows_hint_hotspot",onClick:e?u:n}),e?W("div",{className:"flows_tooltip_tooltip flows_hint_tooltip","data-open":F?"false":"true",ref:a.refs.setFloating,style:{left:a.x,top:a.y},children:[b(c,{className:"flows_tooltip_title",variant:"title",children:t.title}),b(c,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?b("div",{className:"flows_tooltip_footer",children:t.buttons}):null,t.onClose?b(w,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:b(y,{})}):null]}):null]}):null};export{It as a,te as b,pe as c,Ee as d};

dist/tooltip-BH43qtSr.d.mts

-/**
- * Properties provided by Flows based on block and block template setup.
- */
-interface FlowsProperties {
-    /**
-     * Unique identifier of the block, useful for stable key during rendering. Keep in mind each workflow version will have a different id for each block.
-     */
-    id: string;
-    /**
-     * User defined key for identifying the block.
-     */
-    key?: string;
-    /**
-     * Id of the workflow this block belongs to.
-     */
-    workflowId: string;
-}
-type ComponentProps<T extends Record<string, any> = any> = {
-    /**
-     * Properties provided by Flows based on block and block template setup.
-     */
-    __flows: FlowsProperties;
-} & T;
-type TourComponentProps<T extends Record<string, any> = any> = {
-    /**
-     * Properties provided by Flows based on block and block template setup.
-     */
-    __flows: FlowsProperties;
-    continue: () => void;
-    previous?: () => void;
-    cancel: () => void;
-} & T;
-
-type Placement = "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
-
-export type { ComponentProps as C, Placement as P, TourComponentProps as T };

dist/tooltip-BH43qtSr.d.ts

-/**
- * Properties provided by Flows based on block and block template setup.
- */
-interface FlowsProperties {
-    /**
-     * Unique identifier of the block, useful for stable key during rendering. Keep in mind each workflow version will have a different id for each block.
-     */
-    id: string;
-    /**
-     * User defined key for identifying the block.
-     */
-    key?: string;
-    /**
-     * Id of the workflow this block belongs to.
-     */
-    workflowId: string;
-}
-type ComponentProps<T extends Record<string, any> = any> = {
-    /**
-     * Properties provided by Flows based on block and block template setup.
-     */
-    __flows: FlowsProperties;
-} & T;
-type TourComponentProps<T extends Record<string, any> = any> = {
-    /**
-     * Properties provided by Flows based on block and block template setup.
-     */
-    __flows: FlowsProperties;
-    continue: () => void;
-    previous?: () => void;
-    cancel: () => void;
-} & T;
-
-type Placement = "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
-
-export type { ComponentProps as C, Placement as P, TourComponentProps as T };

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58841

28.07%

Lines of code

327

49.32%

Number of lines in readme file

44

109.52%

Worsened metrics

Number of low quality alerts

7

16.67%

Dependency changes

• Updated

  @floating-ui/react-dom@^2.1.6