Scale

import "@reuse-sh/shadows/styles.css";
import { shadowLevels } from "@reuse-sh/shadows";

// shadowLevels is ["xs", "sm", "md", "lg", "xl", "2xl"]
const level = shadowLevels[3];
popover.classList.add(`reuse-shadow-ring-${level}`);
button.classList.add("reuse-shadow-xs");

import "@reuse-sh/shadows/styles.css";

export function Panel({ level = "md", ring = true, children }) {
  const name = ring ? `reuse-shadow-ring-${level}` : `reuse-shadow-${level}`;
  return <div className={`panel ${name}`}>{children}</div>;
}