{"version":3,"file":"index11.cjs","sources":["../src/components/breadcrumb/index.tsx"],"sourcesContent":["import { FunctionComponent, useState } from \"react\";\nimport desktopStyles from \"./BreadcrumbDesktopItem.module.css\";\nimport mobileStyles from \"./BreadcrumbMobileItem.module.css\";\nimport { LabelPairedChevronRightSmRegularIcon } from \"@deriv/quill-icons\";\nimport { useFocusHandling } from \"../../hooks/useFocusHandling\";\n\nexport type BreadcrumbType = {\n  className?: string;\n  label?: string;\n  showFocusRing?: boolean;\n\n  /** Variant props */\n  variant?: \"desktop\" | \"mobile\";\n  size?: \"sm\" | \"md\";\n  state?: \"default\" | \"selected\";\n\n  /** Event handlers */\n  onClick?: () => void;\n};\n\nexport const Breadcrumb: FunctionComponent<BreadcrumbType> = ({\n  className = \"\",\n  variant = \"desktop\",\n  size = \"sm\",\n  state = \"default\",\n  label = \"Label\",\n  showFocusRing = false,\n  onClick,\n}) => {\n  const styles = variant === \"desktop\" ? desktopStyles : mobileStyles;\n  const [focus, setFocus] = useState(showFocusRing);\n\n  const containerClassName =\n    variant === \"desktop\" ? styles.containerText : styles.containerLabel;\n\n  const isClickable = state !== \"selected\" && onClick;\n  const breadcrumbId = `quill-breadcrumb-${variant}-${size}-${state}`;\n\n  const { handleFocus, handleBlur } = useFocusHandling({\n    isDisabled: !isClickable,\n    setHighlight: setFocus,\n  });\n\n  return (\n    <div\n      className={[styles.root, className].join(\" \")}\n      data-size={size}\n      data-state={state}\n      data-id={breadcrumbId}\n    >\n      <div className={containerClassName}>\n        <div\n          className={[\n            styles.label,\n            isClickable ? \"quill-ui-next-pointer\" : \"\",\n          ].join(\" \")}\n          onClick={isClickable ? onClick : undefined}\n          role={isClickable ? \"button\" : undefined}\n          tabIndex={isClickable ? 0 : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        >\n          {label}\n        </div>\n        {focus && <div className={styles.bgFocus} />}\n      </div>\n      <div className={`${styles.iconDivider} breadcrumb-icon`}>\n        <LabelPairedChevronRightSmRegularIcon />\n      </div>\n    </div>\n  );\n};\n\nexport default Breadcrumb;\n"],"names":["desktopStyles","mobileStyles","useState","useFocusHandling","jsxs","jsx","LabelPairedChevronRightSmRegularIcon"],"mappings":";;;;;;;;AAoBO,MAAM,aAAgD,CAAC;AAAA,EAC5D,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB;AACF,MAAM;AACE,QAAA,SAAS,YAAY,YAAYA,6BAAgB,UAAAC,4BAAA;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAAAA,SAAS,aAAa;AAEhD,QAAM,qBACJ,YAAY,YAAY,OAAO,gBAAgB,OAAO;AAElD,QAAA,cAAc,UAAU,cAAc;AAC5C,QAAM,eAAe,oBAAoB,OAAO,IAAI,IAAI,IAAI,KAAK;AAEjE,QAAM,EAAE,aAAa,WAAW,IAAIC,kCAAiB;AAAA,IACnD,YAAY,CAAC;AAAA,IACb,cAAc;AAAA,EAAA,CACf;AAGC,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,OAAO,MAAM,SAAS,EAAE,KAAK,GAAG;AAAA,MAC5C,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,WAAS;AAAA,MAET,UAAA;AAAA,QAACA,2BAAAA,KAAA,OAAA,EAAI,WAAW,oBACd,UAAA;AAAA,UAAAC,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT,OAAO;AAAA,gBACP,cAAc,0BAA0B;AAAA,cAAA,EACxC,KAAK,GAAG;AAAA,cACV,SAAS,cAAc,UAAU;AAAA,cACjC,MAAM,cAAc,WAAW;AAAA,cAC/B,UAAU,cAAc,IAAI;AAAA,cAC5B,SAAS;AAAA,cACT,QAAQ;AAAA,cAEP,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACC,SAASA,2BAAA,IAAC,OAAI,EAAA,WAAW,OAAO,QAAS,CAAA;AAAA,QAAA,GAC5C;AAAA,QACAA,2BAAAA,IAAC,SAAI,WAAW,GAAG,OAAO,WAAW,oBACnC,UAACA,2BAAAA,IAAAC,WAAA,sCAAA,CAAqC,CAAA,EACxC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;;"}