'use client';
import{jsx as e,Fragment as o}from"react/jsx-runtime";import{makeStyleResponsiveByScreen as t,getGlobalColorResponsiveStyle as r,cls as s}from"@gem-sdk/core";import{getData as m}from"./common/helpers.js";import{getDotClass as l}from"./common/classes.js";import{getDotStyle as i}from"./common/styles.js";import{useDotsSetting as a}from"../../hooks/useDotsSetting.js";import{If as c}from"@gem-sdk/system";let Dots=p=>{let{onHandleClick:d,dotSize:n,dotActiveColor:g,dotColor:f}=p,{isLoop:u,checkIsActive:h}=a(p),{checkHidden:j,getDotItems:b}=m(p),k=b(u),{dotClass:y}=l(p),{dotStyle:D}=i(p,"react"),v=()=>e(o,{children:k?.map(o=>{let m=h(o);return e("button",{"aria-label":"Dot",onClick:()=>{d&&d(o,u)},style:{...t("w",n,"px"),...m?r("bg",g):r("bg",f)},className:s("gp-aspect-square gp-w-3 gp-rounded-full gp-shadow-md",{"gem-slider-dot-active":m,"gem-slider-dot-inactive":!m})},o)})});return e(o,{children:c(!j(k),e("div",{className:y,style:D,children:v()}))})};export{Dots as default};
