@useloops/design-system/dist/theme/theme.hooks.js

The official React based Loops design system

"use strict";var e=require("@mui/material"),t=require("react"),s=require("../node_modules/tiny-invariant/dist/esm/tiny-invariant.js"),r=require("../systems/BrandCore/primitiveVariables.js"),i=require("../utils/screen.hook.js"),n=require("./theme.js"),u=require("./theme.context.js");exports.useTheme=()=>{const e=t.useContext(u.ThemeContext);return s(e,"useTheme must be used within a ThemeProvider"),e},exports.useThemeBuilder=(s="light",u="lg",a="ltr")=>{const{width:o}=i.useScreenSize(),[m,l]=t.useState(s),[d,c]=t.useState(u),[h,g]=t.useState(a),[T,b]=t.useState(!1),[f,y]=t.useState("");t.useEffect(()=>{h&&document.documentElement.setAttribute("dir",h)},[h]);t.useEffect(()=>{t.startTransition(()=>{c(o&&o<r.breakpoints.lg?"sm":"lg")})},[o]),t.useEffect(()=>{t.startTransition(()=>{g(a)})},[a]),t.useEffect(()=>{t.startTransition(()=>{l(s)})},[s]);const S=t.useMemo(()=>n.customTheme(m,d,h),[m,h,d]),p=e.useMediaQuery(S.breakpoints.only("sm"),{noSsr:!0}),k=e.useMediaQuery(S.breakpoints.only("md"),{noSsr:!0}),x=e.useMediaQuery(S.breakpoints.between("lg","xl"),{noSsr:!0}),q=e.useMediaQuery(S.breakpoints.up("xl"),{noSsr:!0});return t.useEffect(()=>{t.startTransition(()=>{p&&y("sm"),k&&y("md"),x&&y("lg"),q&&y("xl")})},[p,k,x,q]),{breakpoint:f,custom:S.custom,gridOverlayVisible:T,mode:m,theme:S,toggleGridOverlay:()=>{t.startTransition(()=>{b(e=>!e)})},toggleMode:e=>{t.startTransition(()=>{if(e)return l(e);l(e=>"light"===e?"dark":"light")})}}};