@charcoal-ui/styled 2.4.0 → 2.6.0

package/dist/index.cjs.js

@@ -0,0 +1,918 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  SetThemeScript: () => SetThemeScript,
+  TokenInjector: () => TokenInjector,
+  createTheme: () => createTheme,
+  defineThemeVariables: () => defineThemeVariables,
+  getThemeSync: () => getThemeSync,
+  makeSetThemeScriptCode: () => makeSetThemeScriptCode,
+  prefersColorScheme: () => prefersColorScheme,
+  themeSelector: () => themeSelector,
+  themeSetter: () => themeSetter,
+  useLocalStorage: () => useLocalStorage,
+  useMedia: () => useMedia,
+  useTheme: () => useTheme,
+  useThemeSetter: () => useThemeSetter
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/util.ts
+var import_utils = require("@charcoal-ui/utils");
+function unreachable(value) {
+  throw new Error(
+    arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`
+  );
+}
+var isPresent = (value) => value != null;
+function objectAssign(...sources) {
+  return Object.assign({}, ...sources);
+}
+function keyof(obj) {
+  return Object.keys(obj);
+}
+function wrapArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+var noThemeProvider = new Error(
+  "`theme` is invalid. `<ThemeProvider>` is not likely mounted."
+);
+function defineThemeVariables(colorParams, effectParams) {
+  return function toCssObject(props) {
+    if (!isPresent(props.theme)) {
+      throw noThemeProvider;
+    }
+    const colors2 = (0, import_utils.filterObject)(colorParams, isPresent);
+    const effects = Object.entries({
+      ...props.theme.effect,
+      ...effectParams
+    });
+    return (0, import_utils.flatMapObject)(colors2, (colorKey, color) => [
+      [(0, import_utils.customPropertyToken)(colorKey), color],
+      ...effects.map(([effectKey, effect]) => [
+        (0, import_utils.customPropertyToken)(colorKey, [effectKey]),
+        (0, import_utils.applyEffect)(color, [effect])
+      ])
+    ]);
+  };
+}
+function isSupportedEffect(effect) {
+  return ["hover", "press", "disabled"].includes(effect);
+}
+var variable = (value) => `var(${value})`;
+function onEffectPseudo(effect, css2) {
+  return effect === "hover" ? { "&:hover": { [import_utils.notDisabledSelector]: css2 } } : effect === "press" ? { "&:active": { [import_utils.notDisabledSelector]: css2 } } : effect === "disabled" ? { [import_utils.disabledSelector]: css2 } : unreachable(effect);
+}
+
+// src/internals/index.ts
+var internalSym = Symbol("internal");
+function createInternal({
+  toCSS,
+  context = {}
+}) {
+  return {
+    [internalSym]: {
+      toCSS,
+      context
+    }
+  };
+}
+function __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal) {
+  return internal[internalSym];
+}
+var shouldCancelHalfLeading = ({
+  cancelHalfLeadingPx,
+  hasVerticalPadding = false
+}) => cancelHalfLeadingPx !== void 0 && !hasVerticalPadding;
+function getContext(internals) {
+  return internals.reduce(
+    (context, internal) => ({
+      ...context,
+      ...__DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal).context
+    }),
+    {}
+  );
+}
+function toCSSObjects(internals) {
+  const context = getContext(internals);
+  return internals.map(
+    (v) => __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(v).toCSS(context)
+  );
+}
+
+// src/factories/lib.ts
+var defineProperties = (source, member, chain) => Object.defineProperties(
+  source,
+  Object.fromEntries(
+    member.map((key) => [
+      key,
+      { get: () => chain(key), enumerable: true, configurable: true }
+    ])
+  )
+);
+var defineMethods = (source, member, chain) => Object.defineProperties(
+  source,
+  Object.fromEntries(
+    member.map((key) => [
+      key,
+      {
+        value: (...args) => chain(key, ...args),
+        enumerable: true,
+        configurable: true
+      }
+    ])
+  )
+);
+var defineConstantProperties = (source, def) => defineProperties(source, Object.keys(def), (key) => def[key]);
+var definePropertyChains = (modifiers, source) => function definePropertiesRecursively(applied) {
+  const notApplied = modifiers.filter((v) => !applied.includes(v));
+  return defineProperties(
+    source(applied),
+    notApplied,
+    (modifier) => notApplied.length === 0 ? unreachable() : definePropertiesRecursively([...applied, modifier])
+  );
+}([]);
+var defineMethodChains = (modifiers, source, ..._inferPhantom) => function defineMethodsRecursively(applied) {
+  const notApplied = modifiers.filter(
+    (v) => !applied.map(([w]) => w).includes(v)
+  );
+  return defineMethods(
+    source(applied),
+    notApplied,
+    (modifier, ...args) => notApplied.length === 0 ? unreachable() : defineMethodsRecursively([...applied, [modifier, ...args]])
+  );
+}([]);
+
+// src/builders/border.ts
+var borderDirections = ["top", "right", "bottom", "left"];
+function borderProperty(direction) {
+  return `border-${direction}`;
+}
+function borderShorthand(color) {
+  return `solid 1px ${color}`;
+}
+var createBorderCss = (theme) => (variant, directions) => {
+  const all = directions.length === 0;
+  const value = borderShorthand(theme.border[variant].color);
+  return createInternal({
+    toCSS() {
+      return {
+        ...all ? { border: value } : directions.reduce(
+          (acc, direction) => ({
+            ...acc,
+            [borderProperty(direction)]: value
+          }),
+          {}
+        )
+      };
+    }
+  });
+};
+function border(theme) {
+  const borderTypes = keyof(theme.border);
+  const borderCss = createBorderCss(theme);
+  const borderObject = defineConstantProperties(
+    {},
+    {
+      border: defineProperties(
+        {},
+        borderTypes,
+        (variant) => definePropertyChains(
+          borderDirections,
+          (modifiers) => borderCss(variant, modifiers)
+        )
+      )
+    }
+  );
+  return borderObject;
+}
+
+// src/builders/borderRadius.ts
+var import_utils2 = require("@charcoal-ui/utils");
+var createBorderRadiusCss = (theme) => (size2) => {
+  return createInternal({
+    toCSS() {
+      return {
+        borderRadius: (0, import_utils2.px)(theme.borderRadius[size2])
+      };
+    }
+  });
+};
+function borderRadius(theme) {
+  const borderRadiusCss = createBorderRadiusCss(theme);
+  const borderRadiusObject = defineConstantProperties(
+    {},
+    {
+      borderRadius: (radius) => borderRadiusCss(radius)
+    }
+  );
+  return borderRadiusObject;
+}
+
+// src/builders/colors.ts
+var import_utils4 = require("@charcoal-ui/utils");
+var import_warning = __toESM(require("warning"));
+
+// src/builders/transition.ts
+var import_utils3 = require("@charcoal-ui/utils");
+var TRANSITION_DURATION = 0.2;
+function transition(_theme) {
+  const duration = (0, import_utils3.dur)(TRANSITION_DURATION);
+  const transition2 = (property) => ({
+    transition: property.map((v) => `${duration} ${v}`).join(", ")
+  });
+  function toCSS({
+    colorTransition = false,
+    backgroundColorTransition = false,
+    boxShadowTransition = false
+  }) {
+    return transition2(
+      [
+        colorTransition ? "color" : null,
+        backgroundColorTransition ? "background-color" : null,
+        boxShadowTransition ? "box-shadow" : null
+      ].filter(isPresent)
+    );
+  }
+  return createInternal({ toCSS });
+}
+
+// src/builders/colors.ts
+function targetProperty(target) {
+  return target === "bg" ? "background-color" : "color";
+}
+var createColorCss = (_theme) => (target, color, effects = []) => {
+  function toCSS() {
+    return {
+      [targetProperty(target)]: variable(
+        (0, import_utils4.customPropertyToken)(color.toString())
+      ),
+      ...effects.filter(isSupportedEffect).reduce(
+        (acc, effect) => ({
+          ...acc,
+          ...onEffectPseudo(effect, {
+            [targetProperty(target)]: variable(
+              (0, import_utils4.customPropertyToken)(color.toString(), [effect])
+            )
+          })
+        }),
+        {}
+      )
+    };
+  }
+  return createInternal({
+    toCSS,
+    context: effects.length > 0 ? target === "font" ? {
+      colorTransition: true
+    } : {
+      backgroundColorTransition: true
+    } : {}
+  });
+};
+var createGradientColorCss = (theme) => (color, effects = [], direction) => {
+  const toLinearGradient = (0, import_utils4.gradient)(direction);
+  function toCSS(context) {
+    const optimized = !shouldCancelHalfLeading(context);
+    const duration = (0, import_utils4.dur)(TRANSITION_DURATION);
+    if (optimized && effects.length > 0) {
+      return {
+        position: "relative",
+        zIndex: 0,
+        overflow: "hidden",
+        ...effects.filter(isSupportedEffect).reduce(
+          (acc, effect) => ({
+            ...acc,
+            "&::before": {
+              zIndex: -1,
+              ...overlayElement,
+              transition: `${duration} background-color`
+            },
+            "&::after": {
+              zIndex: -2,
+              ...overlayElement,
+              ...toLinearGradient(theme.gradientColor[color])
+            },
+            ...onEffectPseudo(effect, {
+              "&::before": {
+                backgroundColor: (0, import_utils4.applyEffect)(
+                  null,
+                  theme.effect[effect] ?? []
+                )
+              }
+            })
+          }),
+          {}
+        )
+      };
+    }
+    (0, import_warning.default)(
+      effects.length === 0,
+      `'Transition' will not be applied. You can get around this by specifying 'preserveHalfLeading' or both 'padding' and 'typograpy'.`
+    );
+    return {
+      ...toLinearGradient(theme.gradientColor[color]),
+      ...effects.filter(isSupportedEffect).reduce(
+        (acc, effect) => ({
+          ...acc,
+          ...onEffectPseudo(effect, {
+            ...toLinearGradient(
+              (0, import_utils4.applyEffectToGradient)(theme.effect[effect] ?? [])(
+                theme.gradientColor[color]
+              )
+            )
+          })
+        }),
+        {}
+      )
+    };
+  }
+  return createInternal({ toCSS });
+};
+var overlayElement = {
+  content: "''",
+  display: "block",
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  top: 0,
+  left: 0
+};
+function colors(theme) {
+  const colors2 = keyof(theme.color);
+  const effects = keyof(theme.effect);
+  const gradientColors = keyof(theme.gradientColor);
+  const colorCss = createColorCss(theme);
+  const gradientColorCss = createGradientColorCss(theme);
+  const colorObject = defineConstantProperties(
+    {},
+    {
+      bg: objectAssign(
+        defineProperties(
+          {},
+          colors2,
+          (color) => definePropertyChains(
+            effects,
+            (modifiers) => colorCss("bg", color, modifiers)
+          )
+        ),
+        defineProperties(
+          {},
+          gradientColors,
+          (color) => (direction) => definePropertyChains(
+            effects,
+            (modifiers) => gradientColorCss(color, modifiers, direction)
+          )
+        )
+      ),
+      font: defineProperties(
+        {},
+        colors2,
+        (color) => definePropertyChains(
+          effects,
+          (modifiers) => colorCss("font", color, modifiers)
+        )
+      )
+    }
+  );
+  return colorObject;
+}
+
+// src/builders/elementEffect.ts
+var createElementEffectCss = (theme) => (effects = []) => createInternal({
+  toCSS() {
+    return effects.filter(isSupportedEffect).reduce(
+      (acc, effect) => ({
+        ...acc,
+        ...onEffectPseudo(effect, {
+          opacity: !Array.isArray(
+            theme.elementEffect[effect]
+          ) && theme.elementEffect[effect]?.type === "opacity" ? theme.elementEffect[effect]?.opacity : unreachable()
+        })
+      }),
+      {}
+    );
+  }
+});
+function elementEffect(theme) {
+  const effectTypes = keyof(
+    theme.elementEffect
+  );
+  const elementEffectCss = createElementEffectCss(theme);
+  const elementEffectObject = definePropertyChains(
+    effectTypes,
+    (modifiers) => elementEffectCss(modifiers)
+  );
+  return elementEffectObject;
+}
+
+// src/builders/outline.ts
+var import_utils5 = require("@charcoal-ui/utils");
+var outlineType = ["focus"];
+var outlineCss = (weight, color) => ({
+  boxShadow: `0 0 0 ${(0, import_utils5.px)(weight)} ${color}`
+});
+var createOutlineColorCss = (theme) => (variant, modifiers) => {
+  const weight = theme.outline[variant].weight;
+  const color = theme.outline[variant].color;
+  return createInternal({
+    toCSS() {
+      return modifiers.includes("focus") ? onFocus(outlineCss(weight, color)) : { "&&": { [import_utils5.notDisabledSelector]: outlineCss(weight, color) } };
+    },
+    context: {
+      boxShadowTransition: true
+    }
+  });
+};
+var onFocus = (css2) => ({
+  [import_utils5.notDisabledSelector]: {
+    "&:focus, &:active": {
+      outline: "none",
+      ...css2
+    },
+    "&:focus:not(:focus-visible), &:active:not(:focus-visible)": {
+      outline: "none"
+    },
+    "&:focus-visible": {
+      outline: "none",
+      ...css2
+    }
+  }
+});
+function outline(theme) {
+  const outlineCss2 = createOutlineColorCss(theme);
+  const outlineObject = defineConstantProperties(
+    {},
+    {
+      outline: defineProperties(
+        {},
+        keyof(theme.outline),
+        (variant) => definePropertyChains(
+          outlineType,
+          (modifiers) => outlineCss2(variant, modifiers)
+        )
+      )
+    }
+  );
+  return outlineObject;
+}
+
+// src/builders/size.ts
+var import_foundation = require("@charcoal-ui/foundation");
+var import_utils6 = require("@charcoal-ui/utils");
+var fixedProperties = ["width", "height"];
+var createFixedPxCss = (theme) => (property, size2) => createInternal({
+  toCSS() {
+    return {
+      [property]: size2 === "auto" ? "auto" : (0, import_utils6.px)(theme.spacing[size2])
+    };
+  }
+});
+var createFixedRelativeCss = (_theme) => (property, amount) => createInternal({
+  toCSS() {
+    return {
+      [property]: amount
+    };
+  }
+});
+var createFixedColumnCss = (theme) => (property, span) => createInternal({
+  toCSS() {
+    return {
+      [property]: (0, import_utils6.px)(
+        (0, import_foundation.columnSystem)(span, theme.grid.unit.column, theme.grid.unit.gutter)
+      )
+    };
+  }
+});
+function size(theme) {
+  const fixedPxCss = createFixedPxCss(theme);
+  const fixedColumnCss = createFixedColumnCss(theme);
+  const fixedRelativeCss = createFixedRelativeCss(theme);
+  const fixedObject = defineProperties(
+    {},
+    fixedProperties,
+    (property) => defineConstantProperties(
+      {},
+      {
+        px: (size2) => fixedPxCss(property, size2),
+        column: (span) => fixedColumnCss(property, span),
+        auto: fixedRelativeCss(property, "auto"),
+        full: fixedRelativeCss(property, "100%")
+      }
+    )
+  );
+  return fixedObject;
+}
+
+// src/builders/spacing.ts
+var import_utils7 = require("@charcoal-ui/utils");
+var spacingProperties = ["margin", "padding"];
+var spacingDirections = [
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "vertical",
+  "horizontal",
+  "all"
+];
+function spacingProperty(property, direction) {
+  return `${property}-${direction}`;
+}
+var createSpacingCss = (theme) => (property, modifiers) => {
+  const { top, right, bottom, left } = modifiers.reduce(
+    (acc, [direction, size2]) => {
+      if (direction === "all") {
+        acc.top = size2;
+        acc.right = size2;
+        acc.bottom = size2;
+        acc.left = size2;
+      } else if (direction === "vertical") {
+        acc.top = size2;
+        acc.bottom = size2;
+      } else if (direction === "horizontal") {
+        acc.right = size2;
+        acc.left = size2;
+      } else {
+        acc[direction] = size2;
+      }
+      return acc;
+    },
+    {}
+  );
+  const hasVerticalPadding = property === "padding" && top !== void 0 && bottom !== void 0 && top !== "auto" && bottom !== "auto";
+  function toCSS({ cancelHalfLeadingPx = 0 }) {
+    return {
+      ...top !== void 0 && {
+        [spacingProperty(property, "top")]: top === "auto" ? "auto" : (0, import_utils7.px)(
+          theme.spacing[top] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)
+        )
+      },
+      ...bottom !== void 0 && {
+        [spacingProperty(property, "bottom")]: bottom === "auto" ? "auto" : (0, import_utils7.px)(
+          theme.spacing[bottom] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)
+        )
+      },
+      ...right !== void 0 && {
+        [spacingProperty(property, "right")]: right === "auto" ? "auto" : (0, import_utils7.px)(theme.spacing[right])
+      },
+      ...left !== void 0 && {
+        [spacingProperty(property, "left")]: left === "auto" ? "auto" : (0, import_utils7.px)(theme.spacing[left])
+      }
+    };
+  }
+  return createInternal({
+    toCSS,
+    context: hasVerticalPadding ? { hasVerticalPadding: true } : {}
+  });
+};
+function spacing(theme) {
+  const spacingCss = createSpacingCss(theme);
+  const spacingObject = defineProperties(
+    {},
+    spacingProperties,
+    (spacingProperty2) => defineMethodChains(
+      spacingDirections,
+      (modifiers) => spacingCss(spacingProperty2, modifiers),
+      {}
+    )
+  );
+  return spacingObject;
+}
+
+// src/builders/typography.ts
+var import_utils8 = require("@charcoal-ui/utils");
+var createTypographyCss = (theme) => (size2, options = {}) => {
+  const {
+    preserveHalfLeading = false,
+    monospace = false,
+    bold = false
+  } = options;
+  const descriptor = theme.typography.size[size2];
+  const margin = -(0, import_utils8.halfLeading)(descriptor);
+  function toCSS(context) {
+    return {
+      fontSize: (0, import_utils8.px)(descriptor.fontSize),
+      lineHeight: (0, import_utils8.px)(descriptor.lineHeight),
+      ...monospace && {
+        fontFamily: "monospace"
+      },
+      ...bold && {
+        fontWeight: "bold"
+      },
+      ...shouldCancelHalfLeading(context) && {
+        display: "flow-root",
+        "&::before": {
+          ...leadingCancel,
+          marginTop: (0, import_utils8.px)(margin)
+        },
+        "&::after": {
+          ...leadingCancel,
+          marginBottom: (0, import_utils8.px)(margin)
+        }
+      }
+    };
+  }
+  return createInternal({
+    toCSS,
+    context: !preserveHalfLeading ? {
+      cancelHalfLeadingPx: margin
+    } : {}
+  });
+};
+var leadingCancel = {
+  display: "block",
+  width: 0,
+  height: 0,
+  content: `''`
+};
+var typographyModifiers = [
+  "monospace",
+  "bold",
+  "preserveHalfLeading"
+];
+function typography(theme) {
+  const typographyCss = createTypographyCss(theme);
+  const typographyObject = defineProperties(
+    {},
+    ["typography"],
+    (_) => (size2) => definePropertyChains(
+      typographyModifiers,
+      (modifiers) => typographyCss(size2, {
+        preserveHalfLeading: modifiers.includes("preserveHalfLeading"),
+        monospace: modifiers.includes("monospace"),
+        bold: modifiers.includes("bold")
+      })
+    )
+  );
+  return typographyObject;
+}
+
+// src/builders/o.ts
+function createO(theme) {
+  return objectAssign(
+    colors(theme),
+    typography(theme),
+    spacing(theme),
+    size(theme),
+    elementEffect(theme),
+    border(theme),
+    borderRadius(theme),
+    outline(theme)
+  );
+}
+
+// src/TokenInjector.tsx
+var import_react = __toESM(require("react"));
+var import_styled_components = require("styled-components");
+var GlobalStyle = import_styled_components.createGlobalStyle`
+  ${({
+  themeMap,
+  background
+}) => Object.entries(themeMap).map(
+  ([key, theme]) => key.startsWith("@media") ? import_styled_components.css`
+            ${key} {
+              :root {
+                ${background !== void 0 && import_styled_components.css`
+                  background-color: ${theme.color[background]};
+                `}
+                ${defineColorVariableCSS(theme)}
+              }
+            }
+          ` : import_styled_components.css`
+            /* stylelint-disable-next-line no-duplicate-selectors */
+            ${key} {
+              ${background !== void 0 && import_styled_components.css`
+                background-color: ${theme.color[background]};
+              `}
+              ${defineColorVariableCSS(theme)}
+            }
+          `
+)}
+`;
+function TokenInjector({
+  theme: themeMap,
+  background
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(GlobalStyle, { themeMap, background });
+}
+var defineColorVariableCSS = (theme) => Object.entries(defineThemeVariables(theme.color)({ theme })).map(([varName, value]) => variableDefinition(varName, value.toString())).join(";");
+var variableDefinition = (prop, value) => `${prop}: ${value}`;
+
+// src/helper.ts
+var import_react2 = require("react");
+var LOCAL_STORAGE_KEY = "charcoal-theme";
+var DEFAULT_ROOT_ATTRIBUTE = "theme";
+var keyStringRegExp = new RegExp(/^(\w|-)+$/);
+function assertKeyString(key) {
+  if (!keyStringRegExp.test(key)) {
+    throw new Error(`Unexpected key :${key}, expect: /^(\\w|-)+$/`);
+  }
+}
+var themeSetter = (attr = DEFAULT_ROOT_ATTRIBUTE) => (theme) => {
+  assertKeyString(attr);
+  if (theme !== void 0) {
+    document.documentElement.dataset[attr] = theme;
+  } else {
+    delete document.documentElement.dataset[attr];
+  }
+};
+function themeSelector(theme, attr) {
+  return `:root[data-${attr ?? DEFAULT_ROOT_ATTRIBUTE}='${theme}']`;
+}
+function prefersColorScheme(theme) {
+  return `@media (prefers-color-scheme: ${theme})`;
+}
+function useThemeSetter({
+  key = LOCAL_STORAGE_KEY,
+  setter = themeSetter()
+} = {}) {
+  const [theme, , system] = useTheme(key);
+  (0, import_react2.useEffect)(() => {
+    if (theme === void 0) {
+      return;
+    }
+    setter(system ? void 0 : theme);
+  }, [setter, system, theme]);
+}
+function getThemeSync(key = LOCAL_STORAGE_KEY) {
+  const theme = localStorage.getItem(key);
+  return theme;
+}
+var useTheme = (key = LOCAL_STORAGE_KEY) => {
+  assertKeyString(key);
+  const isDark = useMedia("(prefers-color-scheme: dark)");
+  const media = isDark !== void 0 ? isDark ? "dark" : "light" : void 0;
+  const [local, setTheme, ready] = useLocalStorage(key);
+  const theme = !ready || media === void 0 ? void 0 : local ?? media;
+  const system = local === void 0;
+  return [theme, setTheme, system];
+};
+function useLocalStorage(key, defaultValue) {
+  const [ready, setReady] = (0, import_react2.useState)(false);
+  const [state, setState] = (0, import_react2.useState)();
+  const defaultValueMemo = (0, import_react2.useMemo)(() => defaultValue?.(), [defaultValue]);
+  (0, import_react2.useEffect)(() => {
+    fetch();
+    window.addEventListener("storage", handleStorage);
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+    };
+  });
+  const handleStorage = (e) => {
+    if (e.storageArea !== localStorage) {
+      return;
+    }
+    if (e.key !== key) {
+      return;
+    }
+    fetch();
+  };
+  const fetch = () => {
+    const raw = localStorage.getItem(key);
+    setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo);
+    setReady(true);
+  };
+  const set = (value) => {
+    if (value === void 0) {
+      localStorage.removeItem(key);
+    } else {
+      const raw = serialize(value);
+      localStorage.setItem(key, raw);
+    }
+    const event = new StorageEvent("storage", {
+      bubbles: true,
+      cancelable: false,
+      key,
+      url: location.href,
+      storageArea: localStorage
+    });
+    dispatchEvent(event);
+  };
+  return [state ?? defaultValueMemo, set, ready];
+}
+function deserialize(raw) {
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+function serialize(value) {
+  if (typeof value === "string") {
+    return value;
+  } else {
+    return JSON.stringify(value);
+  }
+}
+function useMedia(query) {
+  const [match, setState] = (0, import_react2.useState)();
+  (0, import_react2.useEffect)(() => {
+    const matcher = window.matchMedia(query);
+    const onChange = () => {
+      setState(matcher.matches);
+    };
+    matcher.addEventListener("change", onChange);
+    setState(matcher.matches);
+    return () => {
+      matcher.removeEventListener("change", onChange);
+    };
+  }, [query]);
+  return match;
+}
+
+// src/SetThemeScript.tsx
+var import_react3 = __toESM(require("react"));
+function makeSetThemeScriptCode({
+  localStorageKey = defaultProps.localStorageKey,
+  rootAttribute = defaultProps.rootAttribute
+} = defaultProps) {
+  assertKeyString(localStorageKey);
+  assertKeyString(rootAttribute);
+  return `'use strict';
+(function () {
+    var localStorageKey = '${localStorageKey}'
+    var rootAttribute = '${rootAttribute}'
+    var currentTheme = localStorage.getItem(localStorageKey);
+    if (currentTheme) {
+        document.documentElement.dataset[rootAttribute] = currentTheme;
+    }
+})();
+`;
+}
+function SetThemeScript(props) {
+  const src = makeSetThemeScriptCode(props);
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: src
+      }
+    }
+  );
+}
+var defaultProps = {
+  localStorageKey: LOCAL_STORAGE_KEY,
+  rootAttribute: DEFAULT_ROOT_ATTRIBUTE
+};
+SetThemeScript.defaultProps = defaultProps;
+
+// src/index.ts
+var nonBlank = (value) => isPresent(value) && value !== false;
+function createTheme(_styled) {
+  return function theme(specFn) {
+    return function interpolate({ theme: theme2 }) {
+      if (!isPresent(theme2)) {
+        throw noThemeProvider;
+      }
+      const internals = [
+        ...wrapArray(
+          specFn(createO(theme2))
+        ),
+        transition(theme2)
+      ].filter(nonBlank);
+      return toCSSObjects(internals);
+    };
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SetThemeScript,
+  TokenInjector,
+  createTheme,
+  defineThemeVariables,
+  getThemeSync,
+  makeSetThemeScriptCode,
+  prefersColorScheme,
+  themeSelector,
+  themeSetter,
+  useLocalStorage,
+  useMedia,
+  useTheme,
+  useThemeSetter
+});
+//# sourceMappingURL=index.cjs.js.map