import{template as e}from"@gem-sdk/core";import{getDynamicSourceLocales as s,createSettingId as t}from"../../../helpers.js";import{createStyle as o,createClass as r,If as i}from"@gem-sdk/system";import{composeContainerStyles as m,composeFormCheckboxStyles as l,composeFormCheckboxInputStyles as a,getComposedTextStyle as c}from"./common/styles.js";import{composeContainerClasses as d,composeFormCheckboxInputClasses as p,composeFormCheckboxLabelClasses as n}from"./common/classes.js";import{FormCheckbox as $}from"../../settings/form-checkbox/configs/translate.js";let f=({builderProps:f,setting:u,advanced:y,pageContext:g,styles:k})=>{let{name:b,description:h,selected:x,required:j}=u??{},v=s({val:h,uid:f?.uid,settingId:t({id:$?.description?.id}),pageContext:g??{}}),C=o(m(u)),q=o(l(u,k,f)),F=o(a()),I=o(c(u)),w=r(d(u,y,f)),z=r(p()),A=r(n());return e`
    <div
      data-id="${f?.uid}"
      style="${C}"
    >
      <label
        style="${q}"
        class="${w}"
      >
        <input
          class="${z}"
          name="${b}"
          type="checkbox"
          ${i(x,"checked")}
          ${i(j,"required")}
          style="${F}"
        >
        </input>
        <span class="${A}" style="${I}">
          ${v}
        </span>
      </label>
    </div>
  `};export{f as default};
