import{jsx as t}from"react/jsx-runtime";import{useMemo as n,useCallback as r}from"react";import{range as e}from"lodash-es";import{StepsDot as o}from"./StepsDot.js";import{STEPS_CSS_BASE_CLASS as c}from"./StepsConstants.js";var i="".concat(c,"-header_gallery"),u=function(c){var u=c.activeStepIndex,a=c.stepsCount,s=c.onChangeActiveStep,p=c.stepDescriptionFunc,m=n((function(){return e(a)}),[a]),f=r((function(t){return"Step number ".concat(t)}),[]),l=p||f,d=n((function(){return m.map((function(t){return function(n){return s(n,t)}}))}),[s,m]),v=n((function(){return m.map((function(n){return t(o,{isActive:u===n,ariaLabel:l(n),onClick:d[n]},"l3-style-step-dot-".concat(n+1))}),[])}),[u,d,l,m]);return t("div",Object.assign({role:"group",className:i},{children:v||null}))};export{u as StepsGalleryHeader};
