import{_ as _extends}from"./_rollupPluginBabelHelpers-B5fk9IVe.js";import React__default from"react";import PropTypes from"prop-types";import{a as StyleProvider}from"./StyleProvider.component-BlEzhTpk.js";import{I as Icon}from"./Icon.component-BVkaZqpA.js";const toggleStyles=`
  jn-inline-flex 
  jn-justify-center 
  jn-items-center
  jn-rounded
  jn-py-[0.4375rem]
  jn-px-[0.625rem]
  hover:jn-text-theme-accent
  focus:jn-outline-none 
  focus-visible:jn-ring-2
  focus-visible:jn-ring-theme-focus
  focus-visible:jn-ring-offset-1
  focus-visible:jn-ring-offset-theme-focus
  disabled:jn-opacity-50
  disabled:jn-cursor-not-allowed
  active:jn-bg-theme-background-lvl-4
`,ThemeToggle=a=>{let{className:f="",disabled:g=!1,id:b,name:c,onToggleTheme:d,...e}=a;const h=StyleProvider.useStyles();h||console.warn("Juno ThemeToggle requires a StyleProvider context in order to work. Use ThemeToggle in a Juno AppShell or include StyleProvider manually.");const{currentTheme:i,setThemeClass:j}=h||{};return React__default.createElement(Icon,_extends({className:`juno-theme-toggle ${toggleStyles} ${f}`,disabled:g,icon:"theme-light"===i?"nightsStay":"wbSunny",id:b,name:c,onClick:()=>{const a="theme-dark"===i?"theme-light":"theme-dark";j&&j(a),d&&d(a)}},e))};ThemeToggle.propTypes={className:PropTypes.string,disabled:PropTypes.bool,id:PropTypes.string,name:PropTypes.string,onToggleTheme:PropTypes.func};export{ThemeToggle as T};