import{j as a}from"./jsx-runtime-CnH95YSl.js";import{w as x,u as p}from"./index-BJMTVygn.js";import{a as T}from"./axeRun-B-LchFqf.js";import{O as b}from"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import{u as I,h as w}from"./OdysseyThemeProvider-Bh0Bu-2o.js";import{r as v}from"./index-NdkWRN8K.js";import{u as O}from"./MuiPropsContext-DhRylJZk.js";import{T as C}from"./Tooltip-Cq2rQGbD.js";import{M}from"./InformationCircle-a2jMUKfL.js";import{M as j}from"./Group-mTVRC79V.js";import"./axe-4JP0vCEZ.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-qIn9QVYS.js";import"./Grow-C8kUeGCY.js";import"./utils-kUZVaD1e.js";import"./inheritsLoose-CJ6Ie9dp.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./TransitionGroupContext-DAL84N7p.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./getReactElementRef-DsIevm5t.js";import"./resolveComponentProps-DXQ8X87i.js";import"./isHostComponent-DVu5iVWx.js";import"./useControlled-NQulfz4l.js";import"./Popper-BARIxJrI.js";import"./popper-BVOCD5jc.js";import"./ownerDocument-DW-IO8s5.js";import"./Portal-C6D59xAE.js";const E=w.span(({odysseyDesignTokens:t})=>({display:"inline-flex",transitionProperty:"border-color, box-shadow, outline",transitionDuration:t.TransitionDurationMain,border:"1px solid transparent","&:focus, &:focus-visible":{borderColor:t.FocusOutlineColorPrimary,boxShadow:`0 0 0 1px ${t.FocusOutlineColorPrimary}`,outline:`${t.FocusOutlineWidthMain} ${t.FocusOutlineStyle} transparent`,outlineOffset:t.FocusOutlineOffsetTight},svg:{display:"flex"}})),W=({IconComponent:t=a.jsx(M,{}),placement:o="right",testId:n,tooltipText:s,translate:e})=>{const y=O(),g=I();return a.jsx(C,{"data-se":n,describeChild:!0,placement:o,tabIndex:0,title:s,translate:e,children:a.jsx(E,{odysseyDesignTokens:g,...y,children:t})})},f=v.memo(W);f.displayName="IconWithTooltip";const nt={component:f,decorators:[b],tags:["autodocs"],argTypes:{IconComponent:{description:"The icon to render",table:{type:{summary:"ReactNode"},defaultValue:{summary:"<InformationCircleIcon />"}},type:{required:!0,name:"string"}},tooltipText:{control:"text",description:"The text to display in the tooltip",table:{type:{summary:"string"}},type:{required:!0,name:"string"}},placement:{options:["top","right","bottom","left"],control:{type:"radio"},description:"The placement of the tooltip",table:{type:{summary:"top | right | bottom | left"},defaultValue:{summary:"right"}}}},args:{testId:"tooltip"}},F=({canvasElement:t,step:o})=>async n=>{await o("show the tooltip on hover",async()=>{const e=x(t).getByTitle("Use the `i` icon to give details that might not be critical but are 'good to know'");await p.hover(e),await T(n),await p.unhover(e)})},r={args:{tooltipText:"Use the `i` icon to give details that might not be critical but are 'good to know'"},play:async({canvasElement:t,step:o})=>{await F({canvasElement:t,step:o})("IconWithTooltip")}},i={args:{IconComponent:a.jsx(j,{}),tooltipText:"This is a group of people"}};var m,c,l;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{
  args: {
    tooltipText: "Use the \`i\` icon to give details that might not be critical but are 'good to know'"
  },
  play: async ({
    canvasElement,
    step
  }) => {
    await showTooltip({
      canvasElement,
      step
    })("IconWithTooltip");
  }
}`,...(l=(c=r.parameters)==null?void 0:c.docs)==null?void 0:l.source}}};var u,d,h;i.parameters={...i.parameters,docs:{...(u=i.parameters)==null?void 0:u.docs,source:{originalSource:`{
  args: {
    IconComponent: <GroupIcon />,
    tooltipText: "This is a group of people"
  }
}`,...(h=(d=i.parameters)==null?void 0:d.docs)==null?void 0:h.source}}};const st=["Default","AnyIcon"];export{i as AnyIcon,r as Default,st as __namedExportsOrder,nt as default};
