@charcoal-ui/styled 2.5.0 → 2.7.0

package/dist/index.modern.js

@@ -1,989 +0,0 @@
-import { filterObject, flatMapObject, customPropertyToken, applyEffect, notDisabledSelector, disabledSelector, px, dur, gradient, applyEffectToGradient, halfLeading } from '@charcoal-ui/utils';
-import warning from 'warning';
-import { columnSystem } from '@charcoal-ui/foundation';
-import React, { useEffect, useState, useMemo } from 'react';
-import { createGlobalStyle, css } from 'styled-components';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function unreachable(value) {
-  throw new Error(arguments.length === 0 ? 'unreachable' : `unreachable (${JSON.stringify(value)})`);
-}
-/**
- * Check whether a value is non-null and non-undefined
- *
- * @param value nullable
- */
-
-const isPresent = value => value != null; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-function objectAssign(...sources) {
-  return Object.assign({}, ...sources);
-}
-/**
- * Object.keys の返り値の型を厳しめにしてくれるやつ。
- *
- * ジェネリクスは基本的に明示して使うことを推奨。
- *
- * このライブラリでは Theme オブジェクトのジェネリクスを引き回すケースが多く、
- * ジェネリクスを省略するといつのまにか keys の返り値が `string | number | symbol` になりがちなので
- *
- * @param obj - キーを取りたいオブジェクト。ジェネリクスを省略したとき `never[]` のような使えない型が返って欲しい
- */
-
-function keyof(obj) {
-  return Object.keys(obj);
-}
-/**
- * 配列じゃなかったら配列にする
- */
-
-function wrapArray(value) {
-  return Array.isArray(value) ? value : [value];
-}
-const noThemeProvider = new Error('`theme` is invalid. `<ThemeProvider>` is not likely mounted.');
-/**
- * 子孫要素で使われるカラーテーマの CSS Variables を上書きする
- *
- * @params colorParams - 上書きしたい色の定義（ `theme.color` の一部だけ書けば良い ）
- * @params effectParams - effect の定義を上書きしたい場合は渡す（必須ではない）
- *
- * @example
- * ```tsx
- * const LocalTheme = styled.div`
- *   ${defineThemeVariables({ text1: '#ff0000' })}
- *   // `text1` is now defined as red
- *   ${theme((o) => [o.font.text1])}
- * `
- * ```
- */
-
-function defineThemeVariables(colorParams, effectParams) {
-  return function toCssObject(props) {
-    if (!isPresent(props.theme)) {
-      throw noThemeProvider;
-    }
-
-    const colors = filterObject(colorParams, isPresent); // flatMapObject の中で毎回 Object.entries を呼ぶのは無駄なので外で呼ぶ
-
-    const effects = Object.entries(_extends({}, props.theme.effect, effectParams));
-    return flatMapObject(colors, (colorKey, color) => [[customPropertyToken(colorKey), color], ...effects.map(([effectKey, effect]) => [customPropertyToken(colorKey, [effectKey]), applyEffect(color, [effect])])]);
-  };
-}
-function isSupportedEffect(effect) {
-  return ['hover', 'press', 'disabled'].includes(effect);
-}
-const variable = value => `var(${value})`;
-function onEffectPseudo(effect, css) {
-  return effect === 'hover' ? {
-    '&:hover': {
-      [notDisabledSelector]: css
-    }
-  } : effect === 'press' ? {
-    '&:active': {
-      [notDisabledSelector]: css
-    }
-  } : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  effect === 'disabled' ? {
-    [disabledSelector]: css
-  } : unreachable(effect);
-}
-
-/**
- * 絶対にこれを export してはいけない
- *
- * さもないと `o.bg[internalSym]` みたいな叩き方が可能になってしまう（補完にも意図せず出てしまう）
- */
-const internalSym = Symbol('internal');
-/**
- * CSSObject に変換可能なオブジェクトを作成する
- *
- * 実際に CSSObject に変換するには外部から `__DO_NOT_USE_GET_INTERNAL__` を使わなければならない
- *
- * これ以降メソッドチェーンが続いてもいいし、続かなくても良い
- */
-
-function createInternal({
-  toCSS,
-  context = {}
-}) {
-  return {
-    [internalSym]: {
-      toCSS,
-      context
-    }
-  };
-}
-
-function __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal) {
-  return internal[internalSym];
-} // half-leadingをキャンセルするとき && 垂直方向のpaddingが無い時
-// -> before/afterを入れる
-
-
-const shouldCancelHalfLeading = ({
-  cancelHalfLeadingPx,
-  hasVerticalPadding: _hasVerticalPadding = false
-}) => cancelHalfLeadingPx !== undefined && !_hasVerticalPadding;
-/**
- * 個別の Internal（ o.〇〇 の返り値 ）が提出した context の中身を1つの context にまとめる
- */
-
-function getContext(internals) {
-  return internals.reduce((context, internal) => _extends({}, context, __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal).context), {});
-}
-/**
- * 全ユーザー定義からコンテキスト生成し、styled-components 向けに CSSObject を構築
- */
-
-function toCSSObjects(internals) {
-  // 1パス目
-  // 全ユーザー定義を舐めて相互に影響し合う定義をチェックし、その結果(コンテキスト)を取得
-  const context = getContext(internals); // 2パス目
-  // コンテキストを見ながら最適化されたCSSを構築
-
-  return internals.map(v => __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(v).toCSS(context));
-}
-
-/**
- * 配列で指定したプロパティを動的に生やす
- *
- * @param source 拡張するオブジェクト
- * @param member オブジェクトに生やすプロパティ一覧
- * @param chain プロパティに格納される値を生成する関数
- *
- * @example
- *
- * const o = factory({}, ['red', 'blue'],
- *   color => hex(color)
- * )
- *
- * console.log(o.red) //=> #ff0000
- */
-
-const defineProperties = (source, member, chain) => Object.defineProperties(source, Object.fromEntries(member.map(key => [key, {
-  get: () => chain(key),
-  enumerable: true,
-  configurable: true
-}])));
-/**
- * 配列で指定した名前のメソッドを動的に生やす
- *
- * @param source 拡張するオブジェクト
- * @param member オブジェクトに生やすメソッド名一覧
- * @param chain メソッドの戻り値になる値を生成する関数
- *
- * @example
- *
- * const o = defineMethods({}, ['red', 'blue'],
- *   (color, alpha: number) => hex(color, alpha)
- * )
- *
- * console.log(o.red(0.5)) //=> #ff000077
- */
-
-const defineMethods = (source, member, chain) => Object.defineProperties(source, Object.fromEntries(member.map(key => [key, {
-  value: (...args) => chain(key, ...args),
-  enumerable: true,
-  configurable: true
-}])));
-/**
- * オブジェクトで指定したプロパティ名と値を動的に生やす
- *
- * @param source 拡張するオブジェクト
- * @param def オブジェクトに生やす定義(プロパティ名と値)
- *
- * @example
- *
- * const o = defineConstantProperties({}, {
- *   red: '#f00',
- *   blue: '#00f',
- * })
- *
- * console.log(o.red) //=> #f00
- */
-
-const defineConstantProperties = (source, def) => defineProperties(source, Object.keys(def), key => def[key]);
-/**
- * 配列で指定したモディファイア(プロパティ)をチェーン可能な再帰オブジェクトを動的に生やす
- *
- * @param modifiers オブジェクトに生やすモディファイヤ一覧
- * @param source 指定されたモディファイヤの一覧から値を生成する関数
- *
- * @example
- *
- * const o = definePropertyChains(['red', 'blue'],
- *   modifiers => modifiers.map(color => hex(color)).join(',')
- * )
- *
- * console.log(o.red.blue) => #f00,#00f
- */
-
-const 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]));
-}([]);
-/**
- * 配列で指定したモディファイア(メソッド)をチェーン可能な再帰オブジェクトを動的に生やす
- *
- * @param modifiers オブジェクトに生やすモディファイヤ一覧
- * @param source 指定されたモディファイヤの一覧から値を生成する関数
- * @param _inferPhantom 関数形式のモディファイヤの引数型を推論するためのメタタイプ(引数の個数に合わせてタプルで指定する)
- *
- * @example
- *
- * const o = defineMethodChains(['red', 'blue'],
- *   modifiers => modifiers.map(([color, alpha]) => hex(color, alpha)).join(',')
- * , {} as [number])
- *
- * console.log(o.red(0.5).blue(1)) => #ff000077,#0000ffff
- */
-
-const 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]]));
-}([]);
-
-const borderDirections = ['top', 'right', 'bottom', 'left'];
-
-function borderProperty(direction) {
-  return `border-${direction}`;
-}
-
-function borderShorthand(color) {
-  return `solid 1px ${color}`;
-}
-
-const createBorderCss = theme => (variant, directions) => {
-  const all = directions.length === 0;
-  const value = borderShorthand(theme.border[variant].color);
-  return createInternal({
-    toCSS() {
-      return _extends({}, all ? {
-        border: value
-      } : directions.reduce((acc, direction) => _extends({}, 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;
-}
-
-const createBorderRadiusCss = theme => size => {
-  return createInternal({
-    toCSS() {
-      return {
-        borderRadius: px(theme.borderRadius[size])
-      };
-    }
-
-  });
-};
-function borderRadius(theme) {
-  // 角丸
-  const borderRadiusCss = createBorderRadiusCss(theme);
-  const borderRadiusObject = defineConstantProperties({}, {
-    borderRadius: radius => borderRadiusCss(radius)
-  });
-  return borderRadiusObject;
-}
-
-const TRANSITION_DURATION = 0.2;
-/**
- * context の状態を元に transition を追加する。必ず一番最後に呼ぶ
- */
-
-function transition(_theme) {
-  const duration = dur(TRANSITION_DURATION);
-
-  const transition = property => ({
-    transition: property.map(v => `${duration} ${v}`).join(', ')
-  });
-
-  function toCSS({
-    colorTransition = false,
-    backgroundColorTransition = false,
-    boxShadowTransition = false
-  }) {
-    return transition([colorTransition ? 'color' : null, backgroundColorTransition ? 'background-color' : null, boxShadowTransition ? 'box-shadow' : null].filter(isPresent));
-  }
-
-  return createInternal({
-    toCSS
-  });
-}
-
-function targetProperty(target) {
-  return target === 'bg' ? 'background-color' : 'color';
-}
-
-const createColorCss = _theme => (target, color, effects = []) => {
-  function toCSS() {
-    return _extends({
-      [targetProperty(target)]: variable(customPropertyToken(color.toString()))
-    }, effects.filter(isSupportedEffect).reduce((acc, effect) => _extends({}, acc, onEffectPseudo(effect, {
-      [targetProperty(target)]: variable(customPropertyToken(color.toString(), [effect]))
-    })), {}));
-  }
-
-  return createInternal({
-    toCSS,
-    context: effects.length > 0 ? target === 'font' ? {
-      colorTransition: true
-    } : {
-      backgroundColorTransition: true
-    } : {}
-  });
-};
-const createGradientColorCss = theme => (color, effects = [], direction) => {
-  const toLinearGradient = gradient(direction);
-
-  function toCSS(context) {
-    const optimized = !shouldCancelHalfLeading(context);
-    const duration = dur(TRANSITION_DURATION);
-
-    if (optimized && effects.length > 0) {
-      return _extends({
-        position: 'relative',
-        zIndex: 0,
-        overflow: 'hidden'
-      }, effects.filter(isSupportedEffect).reduce((acc, effect) => {
-        var _theme$effect$effect;
-
-        return _extends({}, acc, {
-          '&::before': _extends({
-            zIndex: -1
-          }, overlayElement, {
-            transition: `${duration} background-color`
-          }),
-          '&::after': _extends({
-            zIndex: -2
-          }, overlayElement, toLinearGradient(theme.gradientColor[color]))
-        }, onEffectPseudo(effect, {
-          '&::before': {
-            backgroundColor: applyEffect(null, (_theme$effect$effect = theme.effect[effect]) != null ? _theme$effect$effect : [])
-          }
-        }));
-      }, {}));
-    }
-
-    warning(effects.length === 0, // eslint-disable-next-line max-len
-    `'Transition' will not be applied. You can get around this by specifying 'preserveHalfLeading' or both 'padding' and 'typograpy'.`);
-    return _extends({}, toLinearGradient(theme.gradientColor[color]), effects.filter(isSupportedEffect).reduce((acc, effect) => {
-      var _theme$effect$effect2;
-
-      return _extends({}, acc, onEffectPseudo(effect, _extends({}, toLinearGradient(applyEffectToGradient((_theme$effect$effect2 = theme.effect[effect]) != null ? _theme$effect$effect2 : [])(theme.gradientColor[color])))));
-    }, {}));
-  }
-
-  return createInternal({
-    toCSS
-  });
-};
-const overlayElement = {
-  content: "''",
-  display: 'block',
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  top: 0,
-  left: 0
-};
-function colors(theme) {
-  const colors = keyof(theme.color);
-  const effects = keyof(theme.effect); // 色
-
-  const gradientColors = keyof(theme.gradientColor);
-  const colorCss = createColorCss();
-  const gradientColorCss = createGradientColorCss(theme);
-  const colorObject = defineConstantProperties({}, {
-    bg: objectAssign(defineProperties({}, colors, color => definePropertyChains(effects, modifiers => colorCss('bg', color, modifiers))), defineProperties({}, gradientColors, color => direction => definePropertyChains(effects, modifiers => gradientColorCss(color, modifiers, direction)))),
-    font: defineProperties({}, colors, color => definePropertyChains(effects, modifiers => colorCss('font', color, modifiers)))
-  });
-  return colorObject;
-}
-
-const createElementEffectCss = theme => (effects = []) => createInternal({
-  toCSS() {
-    return effects.filter(isSupportedEffect).reduce((acc, effect) => {
-      var _theme$elementEffect$, _theme$elementEffect$2;
-
-      return _extends({}, acc, onEffectPseudo(effect, {
-        opacity: !Array.isArray(theme.elementEffect[effect]) && ((_theme$elementEffect$ = theme.elementEffect[effect]) == null ? void 0 : _theme$elementEffect$.type) === 'opacity' ? (_theme$elementEffect$2 = theme.elementEffect[effect]) == null ? void 0 : _theme$elementEffect$2.opacity : unreachable()
-      }));
-    }, {});
-  }
-
-});
-function elementEffect(theme) {
-  const effectTypes = keyof(theme.elementEffect); // 要素へのエフェクト (etc: 透過)
-
-  const elementEffectCss = createElementEffectCss(theme);
-  const elementEffectObject = definePropertyChains(effectTypes, modifiers => elementEffectCss(modifiers));
-  return elementEffectObject;
-}
-
-const outlineType = ['focus'];
-
-const outlineCss = (weight, color) => ({
-  boxShadow: `0 0 0 ${px(weight)} ${color}`
-});
-
-const 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)) : {
-        '&&': {
-          [notDisabledSelector]: outlineCss(weight, color)
-        }
-      };
-    },
-
-    context: {
-      boxShadowTransition: true
-    }
-  });
-};
-/**
- * @see https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator
- */
-
-const onFocus = css => ({
-  [notDisabledSelector]: {
-    '&:focus, &:active': _extends({
-      outline: 'none'
-    }, css),
-    '&:focus:not(:focus-visible), &:active:not(:focus-visible)': {
-      outline: 'none'
-    },
-    '&:focus-visible': _extends({
-      outline: 'none'
-    }, css)
-  }
-});
-
-function outline(theme) {
-  const outlineCss = createOutlineColorCss(theme);
-  const outlineObject = defineConstantProperties({}, {
-    outline: defineProperties({}, keyof(theme.outline), variant => definePropertyChains(outlineType, modifiers => outlineCss(variant, modifiers)))
-  });
-  return outlineObject;
-}
-
-const fixedProperties = ['width', 'height'];
-const createFixedPxCss = theme => (property, size) => createInternal({
-  toCSS() {
-    return {
-      [property]: size === 'auto' ? 'auto' : px(theme.spacing[size])
-    };
-  }
-
-});
-const createFixedRelativeCss = _theme => (property, amount) => createInternal({
-  toCSS() {
-    return {
-      [property]: amount
-    };
-  }
-
-});
-const createFixedColumnCss = theme => (property, span) => createInternal({
-  toCSS() {
-    return {
-      [property]: px(columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter))
-    };
-  }
-
-});
-function size(theme) {
-  const fixedPxCss = createFixedPxCss(theme);
-  const fixedColumnCss = createFixedColumnCss(theme);
-  const fixedRelativeCss = createFixedRelativeCss();
-  const fixedObject = defineProperties({}, fixedProperties, property => defineConstantProperties({}, {
-    px: size => fixedPxCss(property, size),
-    column: span => fixedColumnCss(property, span),
-    auto: fixedRelativeCss(property, 'auto'),
-    full: fixedRelativeCss(property, '100%')
-  }));
-  return fixedObject;
-}
-
-const spacingProperties = ['margin', 'padding'];
-const spacingDirections = ['top', 'right', 'bottom', 'left', 'vertical', 'horizontal', 'all'];
-
-function spacingProperty(property, direction) {
-  return `${property}-${direction}`;
-}
-
-const createSpacingCss = theme => (property, modifiers) => {
-  const {
-    top,
-    right,
-    bottom,
-    left
-  } = modifiers.reduce((acc, [direction, size]) => {
-    if (direction === 'all') {
-      acc.top = size;
-      acc.right = size;
-      acc.bottom = size;
-      acc.left = size;
-    } else if (direction === 'vertical') {
-      acc.top = size;
-      acc.bottom = size;
-    } else if (direction === 'horizontal') {
-      acc.right = size;
-      acc.left = size;
-    } else {
-      acc[direction] = size;
-    }
-
-    return acc;
-  }, {});
-  const hasVerticalPadding = property === 'padding' && top !== undefined && bottom !== undefined && top !== 'auto' && bottom !== 'auto';
-
-  function toCSS({
-    cancelHalfLeadingPx = 0
-  }) {
-    return _extends({}, top !== undefined && {
-      [spacingProperty(property, 'top')]: top === 'auto' ? 'auto' : px(theme.spacing[top] + (hasVerticalPadding ? cancelHalfLeadingPx : 0))
-    }, bottom !== undefined && {
-      [spacingProperty(property, 'bottom')]: bottom === 'auto' ? 'auto' : px(theme.spacing[bottom] + (hasVerticalPadding ? cancelHalfLeadingPx : 0))
-    }, right !== undefined && {
-      [spacingProperty(property, 'right')]: right === 'auto' ? 'auto' : px(theme.spacing[right])
-    }, left !== undefined && {
-      [spacingProperty(property, 'left')]: left === 'auto' ? 'auto' : px(theme.spacing[left])
-    });
-  }
-
-  return createInternal({
-    toCSS,
-    context: hasVerticalPadding ? {
-      hasVerticalPadding: true
-    } : {}
-  });
-};
-function spacing(theme) {
-  const spacingCss = createSpacingCss(theme);
-  const spacingObject = defineProperties({}, spacingProperties, spacingProperty => defineMethodChains(spacingDirections, modifiers => spacingCss(spacingProperty, modifiers), {} // 推論のためのメタタイプ
-  ));
-  return spacingObject;
-}
-
-const createTypographyCss = theme => (size, options = {}) => {
-  const {
-    preserveHalfLeading = false,
-    monospace = false,
-    bold = false
-  } = options;
-  const descriptor = theme.typography.size[size];
-  const margin = -halfLeading(descriptor);
-
-  function toCSS(context) {
-    return _extends({
-      fontSize: px(descriptor.fontSize),
-      lineHeight: px(descriptor.lineHeight)
-    }, monospace && {
-      fontFamily: 'monospace'
-    }, bold && {
-      fontWeight: 'bold'
-    }, shouldCancelHalfLeading(context) && {
-      // prevent margin collapsing
-      display: 'flow-root',
-      // cancel half-leading with negative margin
-      '&::before': _extends({}, leadingCancel, {
-        marginTop: px(margin)
-      }),
-      '&::after': _extends({}, leadingCancel, {
-        marginBottom: px(margin)
-      })
-    });
-  }
-
-  return createInternal({
-    toCSS,
-    context: !preserveHalfLeading ? {
-      cancelHalfLeadingPx: margin
-    } : {}
-  });
-};
-const leadingCancel = {
-  display: 'block',
-  width: 0,
-  height: 0,
-  content: `''`
-}; // タイポグラフィ
-
-const typographyModifiers = [// TODO
-'monospace', 'bold', 'preserveHalfLeading'];
-function typography(theme) {
-  const typographyCss = createTypographyCss(theme);
-  const typographyObject = defineProperties({}, ['typography'], _ => size => definePropertyChains(typographyModifiers, modifiers => typographyCss(size, {
-    preserveHalfLeading: modifiers.includes('preserveHalfLeading'),
-    monospace: modifiers.includes('monospace'),
-    bold: modifiers.includes('bold')
-  })));
-  return typographyObject;
-}
-
-/**
- * `theme(o => [...])` の `o` の部分を構築する
- *
- * @param theme テーマオブジェクト
- * @param DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE 型推論のためだけに使う場合にランタイムコストをゼロにするフラグ
- */
-
-function createO(theme, DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE = false) {
-  if (DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE) {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return {};
-  }
-
-  return objectAssign(colors(theme), typography(theme), spacing(theme), size(theme), elementEffect(theme), border(theme), borderRadius(theme), outline(theme));
-}
-
-let _ = t => t,
-    _t,
-    _t2,
-    _t3,
-    _t4,
-    _t5;
-const GlobalStyle = createGlobalStyle(_t || (_t = _`
-  ${0}
-`), ({
-  themeMap,
-  background
-}) => Object.entries(themeMap).map(([key, theme]) => key.startsWith('@media') ? css(_t2 || (_t2 = _`
-            ${0} {
-              :root {
-                ${0}
-                ${0}
-              }
-            }
-          `), key, background !== undefined && css(_t3 || (_t3 = _`
-                  background-color: ${0};
-                `), theme.color[background]), defineColorVariableCSS(theme)) : css(_t4 || (_t4 = _`
-            /* stylelint-disable-next-line no-duplicate-selectors */
-            ${0} {
-              ${0}
-              ${0}
-            }
-          `), key, background !== undefined && css(_t5 || (_t5 = _`
-                background-color: ${0};
-              `), theme.color[background]), defineColorVariableCSS(theme))));
-function TokenInjector({
-  theme: themeMap,
-  background
-}) {
-  return /*#__PURE__*/React.createElement(GlobalStyle, {
-    themeMap: themeMap,
-    background: background
-  });
-}
-
-const defineColorVariableCSS = theme => Object.entries(defineThemeVariables(theme.color)({
-  theme
-})).map(([varName, value]) => variableDefinition(varName, value.toString())).join(';');
-
-const variableDefinition = (prop, value) => `${prop}: ${value}`;
-
-const LOCAL_STORAGE_KEY = 'charcoal-theme';
-const DEFAULT_ROOT_ATTRIBUTE = 'theme';
-const keyStringRegExp = new RegExp(/^(\w|-)+$/);
-/**
- * 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる
- * @param key 検証するキー
- */
-
-function assertKeyString(key) {
-  if (!keyStringRegExp.test(key)) {
-    throw new Error(`Unexpected key :${key}, expect: /^(\\w|-)+$/`);
-  }
-}
-/**
- * `<html data-theme="dark">` のような設定を行うデフォルトのセッター
- */
-
-const themeSetter = (attr = DEFAULT_ROOT_ATTRIBUTE) => theme => {
-  assertKeyString(attr);
-
-  if (theme !== undefined) {
-    document.documentElement.dataset[attr] = theme;
-  } else {
-    delete document.documentElement.dataset[attr];
-  }
-};
-/**
- * `<html data-theme="dark">` にマッチするセレクタを生成する
- */
-
-function themeSelector(theme, attr) {
-  return `:root[data-${attr != null ? attr : DEFAULT_ROOT_ATTRIBUTE}='${theme}']`;
-}
-/**
- * prefers-color-scheme を利用する media クエリを生成する
- */
-
-function prefersColorScheme(theme) {
-  return `@media (prefers-color-scheme: ${theme})`;
-}
-/**
- * LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks
- */
-
-function useThemeSetter({
-  key = LOCAL_STORAGE_KEY,
-  setter = themeSetter()
-} = {}) {
-  const [theme,, system] = useTheme(key);
-  useEffect(() => {
-    if (theme === undefined) {
-      return;
-    } // prefers-color-scheme から値を取っている場合にはcssのみで処理したいのでアンセットする
-
-
-    setter(system ? undefined : theme);
-  }, [setter, system, theme]);
-}
-/**
- * 同期的にLocalStorageからテーマを取得するヘルパ
- */
-
-function getThemeSync(key = LOCAL_STORAGE_KEY) {
-  const theme = localStorage.getItem(key);
-  return theme;
-}
-/**
- * LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks
- *
- * `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります
- */
-
-const useTheme = (key = LOCAL_STORAGE_KEY) => {
-  assertKeyString(key);
-  const isDark = useMedia('(prefers-color-scheme: dark)');
-  const media = isDark !== undefined ? isDark ? 'dark' : 'light' : undefined;
-  const [local, setTheme, ready] = useLocalStorage(key);
-  const theme = !ready || media === undefined ? undefined : local != null ? local : media;
-  const system = local === undefined;
-  return [theme, setTheme, system];
-};
-function useLocalStorage(key, defaultValue) {
-  const [ready, setReady] = useState(false);
-  const [state, setState] = useState();
-  const defaultValueMemo = useMemo(() => defaultValue == null ? void 0 : defaultValue(), [defaultValue]);
-  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 = () => {
-    var _ref;
-
-    const raw = localStorage.getItem(key);
-    setState((_ref = raw !== null ? deserialize(raw) : null) != null ? _ref : defaultValueMemo);
-    setReady(true);
-  };
-
-  const set = value => {
-    if (value === undefined) {
-      // undefinedがセットされる場合にはkeyごと削除
-      localStorage.removeItem(key);
-    } else {
-      const raw = serialize(value);
-      localStorage.setItem(key, raw);
-    } // 同一ウィンドウではstorageイベントが発火しないので、手動で発火させる
-
-
-    const event = new StorageEvent('storage', {
-      bubbles: true,
-      cancelable: false,
-      key,
-      url: location.href,
-      storageArea: localStorage
-    });
-    dispatchEvent(event);
-  };
-
-  return [state != null ? state : defaultValueMemo, set, ready];
-}
-
-function deserialize(raw) {
-  try {
-    return JSON.parse(raw);
-  } catch (_unused) {
-    // syntax error はすべて文字列として扱う
-    return raw;
-  }
-}
-
-function serialize(value) {
-  if (typeof value === 'string') {
-    return value;
-  } else {
-    return JSON.stringify(value);
-  }
-}
-
-function useMedia(query) {
-  const [match, setState] = useState();
-  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;
-}
-
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns ソースコードの文字列
- */
-
-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;
-    }
-})();
-`;
-}
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns
- */
-
-function SetThemeScript(props) {
-  const src = makeSetThemeScriptCode(props);
-  return /*#__PURE__*/React.createElement("script", {
-    dangerouslySetInnerHTML: {
-      __html: src
-    }
-  });
-}
-const defaultProps = {
-  localStorageKey: LOCAL_STORAGE_KEY,
-  rootAttribute: DEFAULT_ROOT_ATTRIBUTE
-};
-SetThemeScript.defaultProps = defaultProps;
-
-const nonBlank = value => isPresent(value) && value !== false;
-/**
- * `theme(o => [...])` の `theme` ユーティリティを構築する
- *
- * @param _styled - DEPRECATED: styled-componnets の `styled` そのものを渡すとそれを元に型推論ができる。が、型引数を渡す方が型推論が高速になりやすい
- *
- * @example
- *
- * import styled from 'styled-components'
- * const theme = createTheme(styled)
- *
- * @example
- *
- * const theme = createTheme<DefaultTheme>()
- */
-
-
-function createTheme(_styled) {
-  /**
-   * 本当は `type Builder = ReturnType<createO<T>>` みたいな型を作って、それを o の型にしたい。
-   * が、styled がつくられた時点の TypeScript ではこういうジェネリクスの使い方ができなかった
-   * なので代わりに特に意味のない `createO` の呼び出しをやっている
-   */
-  createO( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
-  {},
-  /** DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE = */
-  true); // ランタイムの `theme(o => [...])` のインターフェースを構築する
-
-  return function theme(specFn) {
-    // styled-components のテンプレートに埋め込める関数
-    return function interpolate({
-      theme
-    }) {
-      if (!isPresent(theme)) {
-        // テーマが入っていない場合は復旧不可能なのでエラーにする
-        throw noThemeProvider;
-      }
-
-      const internals = [// ユーザーが定義したルール
-      ...wrapArray(
-      /**
-       * こう書いてはいけない
-       *
-       * ❌
-       * ```ts
-       * const o = createO(theme)
-       * const declaration = spec(o)
-       * ```
-       *
-       * `o` を一時変数に入れてしまうと型 `T` の具象化が行われるので関数内に書く
-       */
-      specFn(
-      /** o = */
-      createO(theme))), // 必ず挿入される共通のルール
-      transition()].filter(nonBlank);
-      return toCSSObjects(internals);
-    };
-  };
-}
-
-export { SetThemeScript, TokenInjector, createTheme, defineThemeVariables, getThemeSync, makeSetThemeScriptCode, prefersColorScheme, themeSelector, themeSetter, useLocalStorage, useMedia, useTheme, useThemeSetter };
-//# sourceMappingURL=index.modern.js.map