storybook-addon-pseudo-states 10.1.0-alpha.8 → 10.1.0-beta.0

package/dist/_browser-chunks/chunk-7YGVKEB6.js

@@ -0,0 +1,240 @@
+import {
+  EXCLUDED_PSEUDO_ELEMENT_PATTERNS,
+  EXCLUDED_PSEUDO_ESCAPE_SEQUENCE,
+  PARAM_KEY,
+  PSEUDO_STATES,
+  __export
+} from "./chunk-FLRMKMJW.js";
+
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  decorators: () => decorators,
+  initialGlobals: () => initialGlobals
+});
+
+// src/preview/withPseudoState.ts
+import {
+  DOCS_RENDERED,
+  FORCE_REMOUNT,
+  FORCE_RE_RENDER,
+  GLOBALS_UPDATED,
+  STORY_CHANGED,
+  STORY_RENDERED,
+  UPDATE_GLOBALS
+} from "storybook/internal/core-events";
+import { addons, useEffect, useMemo, useRef } from "storybook/preview-api";
+
+// src/preview/splitSelectors.ts
+var isAtRule = (selector) => selector.indexOf("@") === 0, splitSelectors = (selectors) => {
+  if (isAtRule(selectors))
+    return [selectors];
+  let result = [], parentheses = 0, brackets = 0, selector = "";
+  for (let i = 0, len = selectors.length; i < len; i++) {
+    let char = selectors[i];
+    if (char === "(")
+      parentheses += 1;
+    else if (char === ")")
+      parentheses -= 1;
+    else if (char === "[")
+      brackets += 1;
+    else if (char === "]")
+      brackets -= 1;
+    else if (char === "," && !parentheses && !brackets) {
+      result.push(selector.trim()), selector = "";
+      continue;
+    }
+    selector += char;
+  }
+  return result.push(selector.trim()), result;
+};
+
+// src/preview/rewriteStyleSheet.ts
+var pseudoStates = Object.values(PSEUDO_STATES), pseudoStatesPattern = `${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:(${pseudoStates.join("|")})`, matchOne = new RegExp(pseudoStatesPattern), matchAll = new RegExp(pseudoStatesPattern, "g"), warnings = /* @__PURE__ */ new Set(), warnOnce = (message) => {
+  warnings.has(message) || (console.warn(message), warnings.add(message));
+}, replacePseudoStates = (selector, allClass) => {
+  let negativeLookbehind = `(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;
+  return pseudoStates.reduce(
+    (acc, state) => acc.replace(
+      new RegExp(`${negativeLookbehind}${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:${state}`, "g"),
+      `.pseudo-${state}${allClass ? "-all" : ""}`
+    ),
+    selector
+  );
+}, replacePseudoStatesWithAncestorSelector = (selector, forShadowDOM, additionalHostSelectors) => {
+  let extracted = extractPseudoStates(selector);
+  if (extracted.states.length === 0 && !additionalHostSelectors)
+    return selector;
+  let selectors = `${additionalHostSelectors ?? ""}${extracted.states.map((s) => `.pseudo-${s}-all`).join("")}`, { withoutPseudoStates } = extracted;
+  return withoutPseudoStates = withoutPseudoStates.replace(":host-context(*)", "").trimStart(), withoutPseudoStates.startsWith(":host-context(") ? withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/, `)${selectors}`) : forShadowDOM ? `:host(${selectors}) ${withoutPseudoStates}` : `${selectors} ${withoutPseudoStates}`;
+}, extractPseudoStates = (selector) => {
+  let states = /* @__PURE__ */ new Set(), withoutPseudoStates = selector.replace(matchAll, (_, state) => (states.add(state), "")).replaceAll(/(?<!is)\(\)/g, "(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g, "") || "*";
+  return {
+    states: Array.from(states),
+    withoutPseudoStates
+  };
+}, rewriteNotSelectors = (selector, forShadowDOM) => [...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc, match) => {
+  let originalNot = match[0], selectorList = match[1], rewrittenNot = rewriteNotSelector(selectorList, forShadowDOM);
+  return acc.replace(originalNot, rewrittenNot);
+}, selector), rewriteNotSelector = (negatedSelectorList, forShadowDOM) => {
+  let rewrittenSelectors = [];
+  for (let negatedSelector of negatedSelectorList.split(/,\s*/))
+    rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector, forShadowDOM));
+  return `:not(${rewrittenSelectors.join(", ")})`;
+}, rewriteRule = ({ cssText, selectorText }, forShadowDOM) => cssText.replace(
+  selectorText,
+  splitSelectors(selectorText).flatMap((selector) => {
+    if (selector.includes(".pseudo-"))
+      return [];
+    let replacementSelectors = [selector];
+    if (!matchOne.test(selector))
+      return replacementSelectors;
+    let classSelector = replacePseudoStates(selector);
+    classSelector !== selector && replacementSelectors.push(classSelector);
+    let ancestorSelector = "";
+    if (selector.startsWith(":host(")) {
+      let matches = selector.match(/^:host\((\S+)\)\s+(.+)$/);
+      if (matches && matchOne.test(matches[2])) {
+        let hostInnerSelector = matches[1], descendantSelector = matches[2];
+        hostInnerSelector = replacePseudoStates(hostInnerSelector, !0), descendantSelector = rewriteNotSelectors(descendantSelector, !0), ancestorSelector = replacePseudoStatesWithAncestorSelector(
+          descendantSelector,
+          !0,
+          hostInnerSelector
+        );
+      } else
+        ancestorSelector = replacePseudoStates(selector, !0);
+    } else {
+      let withNotsReplaced = rewriteNotSelectors(selector, forShadowDOM);
+      ancestorSelector = replacePseudoStatesWithAncestorSelector(
+        withNotsReplaced,
+        forShadowDOM
+      );
+    }
+    return replacementSelectors.push(ancestorSelector), replacementSelectors;
+  }).join(", ")
+), rewriteStyleSheet = (sheet, forShadowDOM = !1) => {
+  try {
+    let count = rewriteRuleContainer(sheet, 1e3, forShadowDOM);
+    return count >= 1e3 && warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."), count > 0;
+  } catch (e) {
+    return String(e).includes("cssRules") ? warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`) : console.error(e, sheet.href), !1;
+  }
+}, rewriteRuleContainer = (ruleContainer, rewriteLimit, forShadowDOM) => {
+  let count = 0, index = -1;
+  for (let cssRule of ruleContainer.cssRules) {
+    index++;
+    let numRewritten = 0;
+    if (cssRule.__processed)
+      numRewritten = cssRule.__pseudoStatesRewrittenCount;
+    else {
+      if ("cssRules" in cssRule && cssRule.cssRules.length)
+        numRewritten = rewriteRuleContainer(
+          cssRule,
+          rewriteLimit - count,
+          forShadowDOM
+        );
+      else {
+        if (!("selectorText" in cssRule))
+          continue;
+        let styleRule = cssRule;
+        if (matchOne.test(styleRule.selectorText)) {
+          let newRule = rewriteRule(styleRule, forShadowDOM);
+          ruleContainer.deleteRule(index), ruleContainer.insertRule(newRule, index), numRewritten = 1;
+        }
+      }
+      cssRule.__processed = !0, cssRule.__pseudoStatesRewrittenCount = numRewritten;
+    }
+    if (count += numRewritten, count >= rewriteLimit)
+      break;
+  }
+  return count;
+};
+
+// src/preview/withPseudoState.ts
+var channel = addons.getChannel(), shadowHosts = /* @__PURE__ */ new Set(), applyClasses = (element, classnames) => {
+  Object.values(PSEUDO_STATES).forEach((state) => {
+    element.classList.remove(`pseudo-${state}`), element.classList.remove(`pseudo-${state}-all`);
+  }), classnames.forEach((classname) => element.classList.add(classname));
+};
+function querySelectorPiercingShadowDOM(root, selector) {
+  let results = [];
+  return root.querySelectorAll("*").forEach((el) => {
+    el.shadowRoot && results.push(...querySelectorPiercingShadowDOM(el.shadowRoot, selector));
+  }), results.push(...root.querySelectorAll(selector).values()), results;
+}
+var applyParameter = (rootElement, parameter = {}) => {
+  let map = /* @__PURE__ */ new Map([[rootElement, /* @__PURE__ */ new Set()]]), add = (target, state) => map.set(target, /* @__PURE__ */ new Set([...map.get(target) || [], state]));
+  Object.entries(parameter || {}).forEach(([state, value]) => {
+    typeof value == "boolean" ? value && add(rootElement, `${state}-all`) : typeof value == "string" ? querySelectorPiercingShadowDOM(rootElement, value).forEach((el) => add(el, state)) : Array.isArray(value) && value.forEach(
+      (sel) => querySelectorPiercingShadowDOM(rootElement, sel).forEach((el) => add(el, state))
+    );
+  }), map.forEach((states, target) => {
+    let classnames = /* @__PURE__ */ new Set();
+    states.forEach((key) => {
+      let keyWithoutAll = key.replace("-all", "");
+      PSEUDO_STATES[key] ? classnames.add(`pseudo-${PSEUDO_STATES[key]}`) : PSEUDO_STATES[keyWithoutAll] && classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);
+    }), applyClasses(target, classnames);
+  });
+}, updateShadowHost = (shadowHost) => {
+  let classnames = /* @__PURE__ */ new Set();
+  shadowHost.className.split(" ").filter((classname) => classname.match(/^pseudo-(.(?!-all))+$/)).forEach((classname) => classnames.add(classname));
+  for (let node = shadowHost.parentNode; node; ) {
+    if (node instanceof ShadowRoot) {
+      node = node.host;
+      continue;
+    }
+    if (node instanceof Element) {
+      let element = node;
+      element.className && element.className.split(" ").filter((classname) => classname.match(/^pseudo-.+-all$/) !== null).forEach((classname) => classnames.add(classname));
+    }
+    node = node.parentNode;
+  }
+  applyClasses(shadowHost, classnames);
+}, pseudoConfig = (parameter) => {
+  let { rootSelector, ...pseudoStateConfig } = parameter || {};
+  return pseudoStateConfig;
+}, equals = (a = {}, b = {}) => a !== null && b !== null && Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(
+  (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])
+), withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
+  let { pseudo: parameter } = parameters, { pseudo: globals } = globalsArgs, { rootSelector } = parameter || {}, rootElement = useMemo(() => rootSelector ? document.querySelector(rootSelector) : viewMode === "docs" ? document.getElementById(`story--${id}`) : document.getElementById("storybook-root") || // Storybook 7.0+
+  document.getElementById("root"), [rootSelector, viewMode, id]), globalsRef = useRef(globals);
+  return useEffect(() => {
+    let config = pseudoConfig(parameter);
+    viewMode === "story" && !equals(config, globalsRef.current) && channel.emit(UPDATE_GLOBALS, {
+      globals: { pseudo: config }
+    });
+  }, [parameter, viewMode]), useEffect(() => {
+    if (!rootElement)
+      return;
+    let timeout = setTimeout(() => {
+      applyParameter(rootElement, globals || pseudoConfig(parameter)), shadowHosts.forEach(updateShadowHost);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [rootElement, globals, parameter]), StoryFn();
+}, rewriteStyleSheets = (shadowRoot) => {
+  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
+  shadowRoot?.adoptedStyleSheets?.length && (styleSheets = shadowRoot.adoptedStyleSheets), styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, !!shadowRoot)), shadowRoot && shadowHosts && shadowHosts.add(shadowRoot.host);
+};
+channel.on(STORY_CHANGED, () => shadowHosts.clear());
+channel.on(STORY_RENDERED, () => rewriteStyleSheets());
+channel.on(GLOBALS_UPDATED, () => rewriteStyleSheets());
+channel.on(FORCE_RE_RENDER, () => rewriteStyleSheets());
+channel.on(FORCE_REMOUNT, () => rewriteStyleSheets());
+channel.on(DOCS_RENDERED, () => rewriteStyleSheets());
+Element.prototype.attachShadow && (Element.prototype._attachShadow = Element.prototype.attachShadow, Element.prototype.attachShadow = function(init) {
+  let shadowRoot = this._attachShadow({ ...init, mode: "open" });
+  return requestAnimationFrame(() => {
+    rewriteStyleSheets(shadowRoot), shadowHosts.has(shadowRoot.host) && updateShadowHost(shadowRoot.host);
+  }), shadowRoot;
+});
+
+// src/preview.ts
+var decorators = [withPseudoState], initialGlobals = {
+  [PARAM_KEY]: !1
+};
+
+export {
+  decorators,
+  initialGlobals,
+  preview_exports
+};

package/dist/_browser-chunks/{chunk-7CQCSQMX.js → chunk-FLRMKMJW.js}

@@ -1,17 +1,11 @@
 var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+    __defProp(target, name, { get: all[name], enumerable: !0 });
 };
 
 // src/constants.ts
-var ADDON_ID = "storybook/pseudo-states";
-var TOOL_ID = `${ADDON_ID}/tool`;
-var PARAM_KEY = "pseudo";
-var EXCLUDED_PSEUDO_ELEMENT_PATTERNS = ["::-(webkit|moz|ms)-[a-z-]+", "::part\\([^)]+\\)"];
-var EXCLUDED_PSEUDO_ESCAPE_SEQUENCE = "(?<=(?<!\\\\)(?:\\\\\\\\)*)";
-var PSEUDO_STATES = {
+var ADDON_ID = "storybook/pseudo-states", TOOL_ID = `${ADDON_ID}/tool`, PARAM_KEY = "pseudo", EXCLUDED_PSEUDO_ELEMENT_PATTERNS = ["::-(webkit|moz|ms)-[a-z-]+", "::part\\([^)]+\\)"], EXCLUDED_PSEUDO_ESCAPE_SEQUENCE = "(?<=(?<!\\\\)(?:\\\\\\\\)*)", PSEUDO_STATES = {
   hover: "hover",
   active: "active",
   focusVisible: "focus-visible",
@@ -24,7 +18,6 @@ var PSEUDO_STATES = {
 };
 
 export {
-  __name,
   __export,
   ADDON_ID,
   TOOL_ID,

package/dist/index.js

@@ -1,14 +1,13 @@
 import {
   preview_exports
-} from "./_browser-chunks/chunk-5GW7LIKW.js";
+} from "./_browser-chunks/chunk-7YGVKEB6.js";
 import {
-  PARAM_KEY,
-  __name
-} from "./_browser-chunks/chunk-7CQCSQMX.js";
+  PARAM_KEY
+} from "./_browser-chunks/chunk-FLRMKMJW.js";
 
 // src/index.ts
 import { definePreviewAddon } from "storybook/internal/csf";
-var index_default = /* @__PURE__ */ __name(() => definePreviewAddon(preview_exports), "default");
+var index_default = () => definePreviewAddon(preview_exports);
 export {
   PARAM_KEY,
   index_default as default

package/dist/manager.js

@@ -2,77 +2,50 @@ import {
   ADDON_ID,
   PARAM_KEY,
   PSEUDO_STATES,
-  TOOL_ID,
-  __name
-} from "./_browser-chunks/chunk-7CQCSQMX.js";
+  TOOL_ID
+} from "./_browser-chunks/chunk-FLRMKMJW.js";
 
 // src/manager.ts
 import { addons, types } from "storybook/manager-api";
 
 // src/manager/PseudoStateTool.tsx
-import React, { useCallback } from "react";
-import { Form, IconButton, TooltipLinkList, WithTooltip } from "storybook/internal/components";
-import { ButtonIcon, RefreshIcon } from "@storybook/icons";
+import React from "react";
+import { Select } from "storybook/internal/components";
+import { ButtonIcon } from "@storybook/icons";
 import { useGlobals } from "storybook/manager-api";
-import { color, styled } from "storybook/theming";
-var LinkTitle = styled.span(({ active }) => ({
-  color: active ? color.secondary : "inherit"
-}));
-var options = Object.keys(PSEUDO_STATES).sort();
-var PseudoStateTool = /* @__PURE__ */ __name(() => {
-  const [globals, updateGlobals] = useGlobals();
-  const pseudo = globals[PARAM_KEY];
-  const isActive = useCallback(
-    (option) => {
-      if (!pseudo) {
-        return false;
-      }
-      return pseudo[option] === true;
-    },
-    [pseudo]
-  );
-  const hasActive = options.some(isActive);
-  const reset = {
-    id: "reset",
-    title: "Reset pseudo states",
-    icon: React.createElement(RefreshIcon, { style: { opacity: hasActive ? 1 : 0.7 } }),
-    disabled: !hasActive,
-    onClick: /* @__PURE__ */ __name(() => updateGlobals({ [PARAM_KEY]: {} }), "onClick")
-  };
-  const toggleOption = useCallback(
-    (option) => () => {
-      const { [option]: value, ...rest } = pseudo;
-      updateGlobals({ [PARAM_KEY]: value === true ? rest : { ...rest, [option]: true } });
-    },
-    [pseudo, updateGlobals]
-  );
-  const links = options.map((option) => {
-    const active = isActive(option);
-    return {
-      id: option,
-      title: React.createElement(LinkTitle, { active }, ":", PSEUDO_STATES[option]),
-      input: React.createElement(Form.Checkbox, { checked: active, onChange: toggleOption(option) }),
-      active
-    };
-  });
+var pseudoStates = Object.keys(PSEUDO_STATES).sort(), PseudoStateTool = () => {
+  let [globals, updateGlobals] = useGlobals(), defaultOptions = Object.keys(globals[PARAM_KEY] || {}).filter(
+    (key) => pseudoStates.includes(key)
+  ), options = pseudoStates.map((option) => ({
+    title: `:${PSEUDO_STATES[option]}`,
+    value: option
+  }));
   return React.createElement(
-    WithTooltip,
+    Select,
     {
-      placement: "top",
-      trigger: "click",
-      closeOnOutsideClick: true,
-      tooltip: React.createElement(TooltipLinkList, { links: [[reset], links] })
-    },
-    React.createElement(IconButton, { key: "pseudo-states", title: "Select CSS pseudo states", active: hasActive }, React.createElement(ButtonIcon, null))
+      resetLabel: "Reset pseudo states",
+      onReset: () => updateGlobals({ [PARAM_KEY]: {} }),
+      icon: React.createElement(ButtonIcon, null),
+      ariaLabel: "CSS pseudo states",
+      tooltip: "Apply CSS pseudo states",
+      defaultOptions,
+      options,
+      multiSelect: !0,
+      onChange: (selected) => {
+        updateGlobals({
+          [PARAM_KEY]: selected.reduce((acc, curr) => ({ ...acc, [curr]: !0 }), {})
+        });
+      }
+    }
   );
-}, "PseudoStateTool");
+};
 
 // src/manager.ts
 addons.register(ADDON_ID, () => {
   addons.add(TOOL_ID, {
     type: types.TOOL,
     title: "CSS pseudo states",
-    match: /* @__PURE__ */ __name(({ viewMode }) => viewMode === "story", "match"),
+    match: ({ viewMode }) => viewMode === "story",
     render: PseudoStateTool
   });
 });

package/dist/preview.js

@@ -1,8 +1,8 @@
 import {
   decorators,
   initialGlobals
-} from "./_browser-chunks/chunk-5GW7LIKW.js";
-import "./_browser-chunks/chunk-7CQCSQMX.js";
+} from "./_browser-chunks/chunk-7YGVKEB6.js";
+import "./_browser-chunks/chunk-FLRMKMJW.js";
 export {
   decorators,
   initialGlobals

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "10.1.0-alpha.8",
+  "version": "10.1.0-beta.0",
   "description": "Storybook Pseudo-states addon: Manipulate CSS pseudo states",
   "keywords": [
     "storybook",
@@ -55,13 +55,13 @@
     "prep": "jiti ../../../scripts/build/build-package.ts"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.6.0",
+    "@storybook/icons": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^10.1.0-alpha.8"
+    "storybook": "^10.1.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

package/dist/_browser-chunks/chunk-5GW7LIKW.js

@@ -1,369 +0,0 @@
-import {
-  EXCLUDED_PSEUDO_ELEMENT_PATTERNS,
-  EXCLUDED_PSEUDO_ESCAPE_SEQUENCE,
-  PARAM_KEY,
-  PSEUDO_STATES,
-  __export,
-  __name
-} from "./chunk-7CQCSQMX.js";
-
-// src/preview.ts
-var preview_exports = {};
-__export(preview_exports, {
-  decorators: () => decorators,
-  initialGlobals: () => initialGlobals
-});
-
-// src/preview/withPseudoState.ts
-import {
-  DOCS_RENDERED,
-  FORCE_REMOUNT,
-  FORCE_RE_RENDER,
-  GLOBALS_UPDATED,
-  STORY_CHANGED,
-  STORY_RENDERED,
-  UPDATE_GLOBALS
-} from "storybook/internal/core-events";
-import { addons, useEffect, useMemo, useRef } from "storybook/preview-api";
-
-// src/preview/splitSelectors.ts
-var isAtRule = /* @__PURE__ */ __name((selector) => selector.indexOf("@") === 0, "isAtRule");
-var splitSelectors = /* @__PURE__ */ __name((selectors) => {
-  if (isAtRule(selectors)) {
-    return [selectors];
-  }
-  const result = [];
-  let parentheses = 0;
-  let brackets = 0;
-  let selector = "";
-  for (let i = 0, len = selectors.length; i < len; i++) {
-    const char = selectors[i];
-    if (char === "(") {
-      parentheses += 1;
-    } else if (char === ")") {
-      parentheses -= 1;
-    } else if (char === "[") {
-      brackets += 1;
-    } else if (char === "]") {
-      brackets -= 1;
-    } else if (char === ",") {
-      if (!parentheses && !brackets) {
-        result.push(selector.trim());
-        selector = "";
-        continue;
-      }
-    }
-    selector += char;
-  }
-  result.push(selector.trim());
-  return result;
-}, "splitSelectors");
-
-// src/preview/rewriteStyleSheet.ts
-var pseudoStates = Object.values(PSEUDO_STATES);
-var pseudoStatesPattern = `${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:(${pseudoStates.join("|")})`;
-var matchOne = new RegExp(pseudoStatesPattern);
-var matchAll = new RegExp(pseudoStatesPattern, "g");
-var warnings = /* @__PURE__ */ new Set();
-var warnOnce = /* @__PURE__ */ __name((message) => {
-  if (warnings.has(message)) {
-    return;
-  }
-  console.warn(message);
-  warnings.add(message);
-}, "warnOnce");
-var replacePseudoStates = /* @__PURE__ */ __name((selector, allClass) => {
-  const negativeLookbehind = `(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;
-  return pseudoStates.reduce(
-    (acc, state) => acc.replace(
-      new RegExp(`${negativeLookbehind}${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:${state}`, "g"),
-      `.pseudo-${state}${allClass ? "-all" : ""}`
-    ),
-    selector
-  );
-}, "replacePseudoStates");
-var replacePseudoStatesWithAncestorSelector = /* @__PURE__ */ __name((selector, forShadowDOM, additionalHostSelectors) => {
-  const extracted = extractPseudoStates(selector);
-  if (extracted.states.length === 0 && !additionalHostSelectors) {
-    return selector;
-  }
-  const selectors = `${additionalHostSelectors ?? ""}${extracted.states.map((s) => `.pseudo-${s}-all`).join("")}`;
-  let { withoutPseudoStates } = extracted;
-  withoutPseudoStates = withoutPseudoStates.replace(":host-context(*)", "").trimStart();
-  return withoutPseudoStates.startsWith(":host-context(") ? withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/, `)${selectors}`) : forShadowDOM ? `:host(${selectors}) ${withoutPseudoStates}` : `${selectors} ${withoutPseudoStates}`;
-}, "replacePseudoStatesWithAncestorSelector");
-var extractPseudoStates = /* @__PURE__ */ __name((selector) => {
-  const states = /* @__PURE__ */ new Set();
-  const withoutPseudoStates = selector.replace(matchAll, (_, state) => {
-    states.add(state);
-    return "";
-  }).replaceAll(/(?<!is)\(\)/g, "(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g, "") || "*";
-  return {
-    states: Array.from(states),
-    withoutPseudoStates
-  };
-}, "extractPseudoStates");
-var rewriteNotSelectors = /* @__PURE__ */ __name((selector, forShadowDOM) => {
-  return [...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc, match) => {
-    const originalNot = match[0];
-    const selectorList = match[1];
-    const rewrittenNot = rewriteNotSelector(selectorList, forShadowDOM);
-    return acc.replace(originalNot, rewrittenNot);
-  }, selector);
-}, "rewriteNotSelectors");
-var rewriteNotSelector = /* @__PURE__ */ __name((negatedSelectorList, forShadowDOM) => {
-  const rewrittenSelectors = [];
-  for (const negatedSelector of negatedSelectorList.split(/,\s*/)) {
-    rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector, forShadowDOM));
-  }
-  return `:not(${rewrittenSelectors.join(", ")})`;
-}, "rewriteNotSelector");
-var rewriteRule = /* @__PURE__ */ __name(({ cssText, selectorText }, forShadowDOM) => {
-  return cssText.replace(
-    selectorText,
-    splitSelectors(selectorText).flatMap((selector) => {
-      if (selector.includes(".pseudo-")) {
-        return [];
-      }
-      const replacementSelectors = [selector];
-      if (!matchOne.test(selector)) {
-        return replacementSelectors;
-      }
-      const classSelector = replacePseudoStates(selector);
-      if (classSelector !== selector) {
-        replacementSelectors.push(classSelector);
-      }
-      let ancestorSelector = "";
-      if (selector.startsWith(":host(")) {
-        const matches = selector.match(/^:host\((\S+)\)\s+(.+)$/);
-        if (matches && matchOne.test(matches[2])) {
-          let hostInnerSelector = matches[1];
-          let descendantSelector = matches[2];
-          hostInnerSelector = replacePseudoStates(hostInnerSelector, true);
-          descendantSelector = rewriteNotSelectors(descendantSelector, true);
-          ancestorSelector = replacePseudoStatesWithAncestorSelector(
-            descendantSelector,
-            true,
-            hostInnerSelector
-          );
-        } else {
-          ancestorSelector = replacePseudoStates(selector, true);
-        }
-      } else {
-        const withNotsReplaced = rewriteNotSelectors(selector, forShadowDOM);
-        ancestorSelector = replacePseudoStatesWithAncestorSelector(
-          withNotsReplaced,
-          forShadowDOM
-        );
-      }
-      replacementSelectors.push(ancestorSelector);
-      return replacementSelectors;
-    }).join(", ")
-  );
-}, "rewriteRule");
-var rewriteStyleSheet = /* @__PURE__ */ __name((sheet, forShadowDOM = false) => {
-  try {
-    const maximumRulesToRewrite = 1e3;
-    const count = rewriteRuleContainer(sheet, maximumRulesToRewrite, forShadowDOM);
-    if (count >= maximumRulesToRewrite) {
-      warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.");
-    }
-    return count > 0;
-  } catch (e) {
-    if (String(e).includes("cssRules")) {
-      warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`);
-    } else {
-      console.error(e, sheet.href);
-    }
-    return false;
-  }
-}, "rewriteStyleSheet");
-var rewriteRuleContainer = /* @__PURE__ */ __name((ruleContainer, rewriteLimit, forShadowDOM) => {
-  let count = 0;
-  let index = -1;
-  for (const cssRule of ruleContainer.cssRules) {
-    index++;
-    let numRewritten = 0;
-    if (cssRule.__processed) {
-      numRewritten = cssRule.__pseudoStatesRewrittenCount;
-    } else {
-      if ("cssRules" in cssRule && cssRule.cssRules.length) {
-        numRewritten = rewriteRuleContainer(
-          cssRule,
-          rewriteLimit - count,
-          forShadowDOM
-        );
-      } else {
-        if (!("selectorText" in cssRule)) {
-          continue;
-        }
-        const styleRule = cssRule;
-        if (matchOne.test(styleRule.selectorText)) {
-          const newRule = rewriteRule(styleRule, forShadowDOM);
-          ruleContainer.deleteRule(index);
-          ruleContainer.insertRule(newRule, index);
-          numRewritten = 1;
-        }
-      }
-      cssRule.__processed = true;
-      cssRule.__pseudoStatesRewrittenCount = numRewritten;
-    }
-    count += numRewritten;
-    if (count >= rewriteLimit) {
-      break;
-    }
-  }
-  return count;
-}, "rewriteRuleContainer");
-
-// src/preview/withPseudoState.ts
-var channel = addons.getChannel();
-var shadowHosts = /* @__PURE__ */ new Set();
-var applyClasses = /* @__PURE__ */ __name((element, classnames) => {
-  Object.values(PSEUDO_STATES).forEach((state) => {
-    element.classList.remove(`pseudo-${state}`);
-    element.classList.remove(`pseudo-${state}-all`);
-  });
-  classnames.forEach((classname) => element.classList.add(classname));
-}, "applyClasses");
-function querySelectorPiercingShadowDOM(root, selector) {
-  const results = [];
-  root.querySelectorAll("*").forEach((el) => {
-    if (el.shadowRoot) {
-      results.push(...querySelectorPiercingShadowDOM(el.shadowRoot, selector));
-    }
-  });
-  results.push(...root.querySelectorAll(selector).values());
-  return results;
-}
-__name(querySelectorPiercingShadowDOM, "querySelectorPiercingShadowDOM");
-var applyParameter = /* @__PURE__ */ __name((rootElement, parameter = {}) => {
-  const map = /* @__PURE__ */ new Map([[rootElement, /* @__PURE__ */ new Set()]]);
-  const add = /* @__PURE__ */ __name((target, state) => map.set(target, /* @__PURE__ */ new Set([...map.get(target) || [], state])), "add");
-  Object.entries(parameter || {}).forEach(([state, value]) => {
-    if (typeof value === "boolean") {
-      if (value) {
-        add(rootElement, `${state}-all`);
-      }
-    } else if (typeof value === "string") {
-      querySelectorPiercingShadowDOM(rootElement, value).forEach((el) => add(el, state));
-    } else if (Array.isArray(value)) {
-      value.forEach(
-        (sel) => querySelectorPiercingShadowDOM(rootElement, sel).forEach((el) => add(el, state))
-      );
-    }
-  });
-  map.forEach((states, target) => {
-    const classnames = /* @__PURE__ */ new Set();
-    states.forEach((key) => {
-      const keyWithoutAll = key.replace("-all", "");
-      if (PSEUDO_STATES[key]) {
-        classnames.add(`pseudo-${PSEUDO_STATES[key]}`);
-      } else if (PSEUDO_STATES[keyWithoutAll]) {
-        classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);
-      }
-    });
-    applyClasses(target, classnames);
-  });
-}, "applyParameter");
-var updateShadowHost = /* @__PURE__ */ __name((shadowHost) => {
-  const classnames = /* @__PURE__ */ new Set();
-  shadowHost.className.split(" ").filter((classname) => classname.match(/^pseudo-(.(?!-all))+$/)).forEach((classname) => classnames.add(classname));
-  for (let node = shadowHost.parentNode; node; ) {
-    if (node instanceof ShadowRoot) {
-      node = node.host;
-      continue;
-    }
-    if (node instanceof Element) {
-      const element = node;
-      if (element.className) {
-        element.className.split(" ").filter((classname) => classname.match(/^pseudo-.+-all$/) !== null).forEach((classname) => classnames.add(classname));
-      }
-    }
-    node = node.parentNode;
-  }
-  applyClasses(shadowHost, classnames);
-}, "updateShadowHost");
-var pseudoConfig = /* @__PURE__ */ __name((parameter) => {
-  const { rootSelector, ...pseudoStateConfig } = parameter || {};
-  return pseudoStateConfig;
-}, "pseudoConfig");
-var equals = /* @__PURE__ */ __name((a = {}, b = {}) => a !== null && b !== null && Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(
-  (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])
-), "equals");
-var withPseudoState = /* @__PURE__ */ __name((StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
-  const { pseudo: parameter } = parameters;
-  const { pseudo: globals } = globalsArgs;
-  const { rootSelector } = parameter || {};
-  const rootElement = useMemo(() => {
-    if (rootSelector) {
-      return document.querySelector(rootSelector);
-    }
-    if (viewMode === "docs") {
-      return document.getElementById(`story--${id}`);
-    }
-    return document.getElementById("storybook-root") || // Storybook 7.0+
-    document.getElementById("root");
-  }, [rootSelector, viewMode, id]);
-  const globalsRef = useRef(globals);
-  useEffect(() => {
-    const config = pseudoConfig(parameter);
-    if (viewMode === "story" && !equals(config, globalsRef.current)) {
-      channel.emit(UPDATE_GLOBALS, {
-        globals: { pseudo: config }
-      });
-    }
-  }, [parameter, viewMode]);
-  useEffect(() => {
-    if (!rootElement) {
-      return;
-    }
-    const timeout = setTimeout(() => {
-      applyParameter(rootElement, globals || pseudoConfig(parameter));
-      shadowHosts.forEach(updateShadowHost);
-    }, 0);
-    return () => clearTimeout(timeout);
-  }, [rootElement, globals, parameter]);
-  return StoryFn();
-}, "withPseudoState");
-var rewriteStyleSheets = /* @__PURE__ */ __name((shadowRoot) => {
-  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
-  if (shadowRoot?.adoptedStyleSheets?.length) {
-    styleSheets = shadowRoot.adoptedStyleSheets;
-  }
-  styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, !!shadowRoot));
-  if (shadowRoot && shadowHosts) {
-    shadowHosts.add(shadowRoot.host);
-  }
-}, "rewriteStyleSheets");
-channel.on(STORY_CHANGED, () => shadowHosts.clear());
-channel.on(STORY_RENDERED, () => rewriteStyleSheets());
-channel.on(GLOBALS_UPDATED, () => rewriteStyleSheets());
-channel.on(FORCE_RE_RENDER, () => rewriteStyleSheets());
-channel.on(FORCE_REMOUNT, () => rewriteStyleSheets());
-channel.on(DOCS_RENDERED, () => rewriteStyleSheets());
-if (Element.prototype.attachShadow) {
-  Element.prototype._attachShadow = Element.prototype.attachShadow;
-  Element.prototype.attachShadow = /* @__PURE__ */ __name(function attachShadow(init) {
-    const shadowRoot = this._attachShadow({ ...init, mode: "open" });
-    requestAnimationFrame(() => {
-      rewriteStyleSheets(shadowRoot);
-      if (shadowHosts.has(shadowRoot.host)) {
-        updateShadowHost(shadowRoot.host);
-      }
-    });
-    return shadowRoot;
-  }, "attachShadow");
-}
-
-// src/preview.ts
-var decorators = [withPseudoState];
-var initialGlobals = {
-  [PARAM_KEY]: false
-};
-
-export {
-  decorators,
-  initialGlobals,
-  preview_exports
-};