@charcoal-ui/styled 2.4.0 → 2.6.0

package/dist/index.module.js

@@ -1,1034 +0,0 @@
-import warning from 'warning';
-import { filterObject, flatMapObject, customPropertyToken, applyEffect, dur, gradient, applyEffectToGradient, notDisabledSelector, halfLeading, px, disabledSelector } from '@charcoal-ui/utils';
-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 _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
-}
-
-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
- */
-
-var isPresent = function isPresent(value) {
-  return value != null;
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-function objectAssign() {
-  return Object.assign.apply(Object, [{}].concat([].slice.call(arguments)));
-}
-function objectKeys(obj) {
-  return Object.keys(obj);
-}
-var 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;
-    }
-
-    var colors = filterObject(colorParams, isPresent); // flatMapObject の中で毎回 Object.entries を呼ぶのは無駄なので外で呼ぶ
-
-    var effects = Object.entries(_extends({}, props.theme.effect, effectParams));
-    return flatMapObject(colors, function (colorKey, color) {
-      return [[customPropertyToken(colorKey), color]].concat(effects.map(function (_ref3) {
-        var effectKey = _ref3[0],
-            effect = _ref3[1];
-        return [customPropertyToken(colorKey, [effectKey]), applyEffect(color, [effect])];
-      }));
-    });
-  };
-}
-
-/**
- * 配列で指定したプロパティを動的に生やす
- *
- * @param source 拡張するオブジェクト
- * @param member オブジェクトに生やすプロパティ一覧
- * @param chain プロパティに格納される値を生成する関数
- *
- * @example
- *
- * const o = factory({}, ['red', 'blue'],
- *   color => hex(color)
- * )
- *
- * console.log(o.red) //=> #ff0000
- */
-
-var factory = function factory(source, member, chain) {
-  return Object.defineProperties(source, Object.fromEntries(member.map(function (key) {
-    return [key, {
-      get: function get() {
-        return chain(key);
-      },
-      enumerable: true,
-      configurable: true
-    }];
-  })));
-};
-/**
- * 配列で指定した名前のメソッドを動的に生やす
- *
- * @param source 拡張するオブジェクト
- * @param member オブジェクトに生やすメソッド名一覧
- * @param chain メソッドの戻り値になる値を生成する関数
- *
- * @example
- *
- * const o = argumentedFactory({}, ['red', 'blue'],
- *   (color, alpha: number) => hex(color, alpha)
- * )
- *
- * console.log(o.red(0.5)) //=> #ff000077
- */
-
-var argumentedFactory = function argumentedFactory(source, member, chain) {
-  return Object.defineProperties(source, Object.fromEntries(member.map(function (key) {
-    return [key, {
-      value: function value() {
-        return chain.apply(void 0, [key].concat([].slice.call(arguments)));
-      },
-      enumerable: true,
-      configurable: true
-    }];
-  })));
-};
-/**
- * オブジェクトで指定したプロパティ名と値を動的に生やす
- *
- * @param source 拡張するオブジェクト
- * @param def オブジェクトに生やす定義(プロパティ名と値)
- *
- * @example
- *
- * const o = constFactory({}, {
- *   red: '#f00',
- *   blue: '#00f',
- * })
- *
- * console.log(o.red) //=> #f00
- */
-
-var constFactory = function constFactory(source, def) {
-  return factory(source, Object.keys(def), function (key) {
-    return def[key];
-  });
-};
-/**
- * 配列で指定したモディファイア(プロパティ)をチェーン可能な再帰オブジェクトを動的に生やす
- *
- * @param modifiers オブジェクトに生やすモディファイヤ一覧
- * @param source 指定されたモディファイヤの一覧から値を生成する関数
- *
- * @example
- *
- * const o = modifiedArgumentedFactory(['red', 'blue'],
- *   modifiers => modifiers.map(color => hex(color)).join(',')
- * )
- *
- * console.log(o.red.blue) => #f00,#00f
- */
-
-var modifiedFactory = function modifiedFactory(modifiers, source) {
-  return function recursiveModifiedFactory(applied) {
-    var notApplied = modifiers.filter(function (v) {
-      return !applied.includes(v);
-    });
-    return factory(source(applied), notApplied, function (modifier) {
-      return notApplied.length === 0 ? unreachable() : recursiveModifiedFactory([].concat(applied, [modifier]));
-    });
-  }([]);
-};
-/**
- * 配列で指定したモディファイア(メソッド)をチェーン可能な再帰オブジェクトを動的に生やす
- *
- * @param modifiers オブジェクトに生やすモディファイヤ一覧
- * @param source 指定されたモディファイヤの一覧から値を生成する関数
- * @param _inferPhantom 関数形式のモディファイヤの引数型を推論するためのメタタイプ(引数の個数に合わせてタプルで指定する)
- *
- * @example
- *
- * const o = modifiedArgumentedFactory(['red', 'blue'],
- *   modifiers => modifiers.map(([color, alpha]) => hex(color, alpha)).join(',')
- * , {} as [number])
- *
- * console.log(o.red(0.5).blue(1)) => #ff000077,#0000ffff
- */
-
-var modifiedArgumentedFactory = function modifiedArgumentedFactory(modifiers, source) {
-  return function recursiveModifiedFactory(applied) {
-    var notApplied = modifiers.filter(function (v) {
-      return !applied.map(function (_ref) {
-        var w = _ref[0];
-        return w;
-      }).includes(v);
-    });
-    return argumentedFactory(source(applied), notApplied, function (modifier) {
-      return notApplied.length === 0 ? unreachable() : recursiveModifiedFactory([].concat(applied, [[modifier].concat([].slice.call(arguments, 1))]));
-    });
-  }([]);
-};
-var variable = function variable(value) {
-  return "var(" + value + ")";
-};
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var themeMap = _ref.themeMap,
-      background = _ref.background;
-  return Object.entries(themeMap).map(function (_ref2) {
-    var key = _ref2[0],
-        theme = _ref2[1];
-    return key.startsWith('@media') ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n            ", " {\n              :root {\n                ", "\n                ", "\n              }\n            }\n          "])), key, background !== undefined && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n                  background-color: ", ";\n                "])), theme.color[background]), defineColorVariableCSS(theme)) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n            /* stylelint-disable-next-line no-duplicate-selectors */\n            ", " {\n              ", "\n              ", "\n            }\n          "])), key, background !== undefined && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n                background-color: ", ";\n              "])), theme.color[background]), defineColorVariableCSS(theme));
-  });
-});
-function TokenInjector(_ref3) {
-  var themeMap = _ref3.theme,
-      background = _ref3.background;
-  return /*#__PURE__*/React.createElement(GlobalStyle, {
-    themeMap: themeMap,
-    background: background
-  });
-}
-
-var defineColorVariableCSS = function defineColorVariableCSS(theme) {
-  return Object.entries(defineThemeVariables(theme.color)({
-    theme: theme
-  })).map(function (_ref4) {
-    var varName = _ref4[0],
-        value = _ref4[1];
-    return variableDefinition(varName, value.toString());
-  }).join(';');
-};
-
-var variableDefinition = function variableDefinition(prop, value) {
-  return prop + ": " + value;
-};
-
-var LOCAL_STORAGE_KEY = 'charcoal-theme';
-var DEFAULT_ROOT_ATTRIBUTE = 'theme';
-var 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">` のような設定を行うデフォルトのセッター
- */
-
-var themeSetter = function themeSetter(attr) {
-  if (attr === void 0) {
-    attr = DEFAULT_ROOT_ATTRIBUTE;
-  }
-
-  return function (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(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$key = _ref.key,
-      key = _ref$key === void 0 ? LOCAL_STORAGE_KEY : _ref$key,
-      _ref$setter = _ref.setter,
-      setter = _ref$setter === void 0 ? themeSetter() : _ref$setter;
-
-  var _useTheme = useTheme(key),
-      theme = _useTheme[0],
-      system = _useTheme[2];
-
-  useEffect(function () {
-    if (theme === undefined) {
-      return;
-    } // prefers-color-scheme から値を取っている場合にはcssのみで処理したいのでアンセットする
-
-
-    setter(system ? undefined : theme);
-  }, [setter, system, theme]);
-}
-/**
- * 同期的にLocalStorageからテーマを取得するヘルパ
- */
-
-function getThemeSync(key) {
-  if (key === void 0) {
-    key = LOCAL_STORAGE_KEY;
-  }
-
-  var theme = localStorage.getItem(key);
-  return theme;
-}
-/**
- * LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks
- *
- * `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります
- */
-
-var useTheme = function useTheme(key) {
-  if (key === void 0) {
-    key = LOCAL_STORAGE_KEY;
-  }
-
-  assertKeyString(key);
-  var isDark = useMedia('(prefers-color-scheme: dark)');
-  var media = isDark !== undefined ? isDark ? 'dark' : 'light' : undefined;
-
-  var _useLocalStorage = useLocalStorage(key),
-      local = _useLocalStorage[0],
-      setTheme = _useLocalStorage[1],
-      ready = _useLocalStorage[2];
-
-  var theme = !ready || media === undefined ? undefined : local != null ? local : media;
-  var system = local === undefined;
-  return [theme, setTheme, system];
-};
-function useLocalStorage(key, defaultValue) {
-  var _useState = useState(false),
-      ready = _useState[0],
-      setReady = _useState[1];
-
-  var _useState2 = useState(),
-      state = _useState2[0],
-      setState = _useState2[1];
-
-  var defaultValueMemo = useMemo(function () {
-    return defaultValue == null ? void 0 : defaultValue();
-  }, [defaultValue]);
-  useEffect(function () {
-    fetch();
-    window.addEventListener('storage', handleStorage);
-    return function () {
-      window.removeEventListener('storage', handleStorage);
-    };
-  });
-
-  var handleStorage = function handleStorage(e) {
-    if (e.storageArea !== localStorage) {
-      return;
-    }
-
-    if (e.key !== key) {
-      return;
-    }
-
-    fetch();
-  };
-
-  var fetch = function fetch() {
-    var _ref2;
-
-    var raw = localStorage.getItem(key);
-    setState((_ref2 = raw !== null ? deserialize(raw) : null) != null ? _ref2 : defaultValueMemo);
-    setReady(true);
-  };
-
-  var set = function set(value) {
-    if (value === undefined) {
-      // undefinedがセットされる場合にはkeyごと削除
-      localStorage.removeItem(key);
-    } else {
-      var raw = serialize(value);
-      localStorage.setItem(key, raw);
-    } // 同一ウィンドウではstorageイベントが発火しないので、手動で発火させる
-
-
-    var event = new StorageEvent('storage', {
-      bubbles: true,
-      cancelable: false,
-      key: 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) {
-  var _useState3 = useState(),
-      match = _useState3[0],
-      setState = _useState3[1];
-
-  useEffect(function () {
-    var matcher = window.matchMedia(query);
-
-    var onChange = function onChange() {
-      setState(matcher.matches);
-    };
-
-    matcher.addEventListener('change', onChange);
-    setState(matcher.matches);
-    return function () {
-      matcher.removeEventListener('change', onChange);
-    };
-  }, [query]);
-  return match;
-}
-
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns ソースコードの文字列
- */
-
-function makeSetThemeScriptCode(_temp) {
-  var _ref = _temp === void 0 ? defaultProps : _temp,
-      _ref$localStorageKey = _ref.localStorageKey,
-      localStorageKey = _ref$localStorageKey === void 0 ? defaultProps.localStorageKey : _ref$localStorageKey,
-      _ref$rootAttribute = _ref.rootAttribute,
-      rootAttribute = _ref$rootAttribute === void 0 ? defaultProps.rootAttribute : _ref$rootAttribute;
-
-  assertKeyString(localStorageKey);
-  assertKeyString(rootAttribute);
-  return "'use strict';\n(function () {\n    var localStorageKey = '" + localStorageKey + "'\n    var rootAttribute = '" + rootAttribute + "'\n    var currentTheme = localStorage.getItem(localStorageKey);\n    if (currentTheme) {\n        document.documentElement.dataset[rootAttribute] = currentTheme;\n    }\n})();\n";
-}
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns
- */
-
-function SetThemeScript(props) {
-  var src = makeSetThemeScriptCode(props);
-  return /*#__PURE__*/React.createElement("script", {
-    dangerouslySetInnerHTML: {
-      __html: src
-    }
-  });
-}
-var defaultProps = {
-  localStorageKey: LOCAL_STORAGE_KEY,
-  rootAttribute: DEFAULT_ROOT_ATTRIBUTE
-};
-SetThemeScript.defaultProps = defaultProps;
-
-var spacingProperties = ['margin', 'padding'];
-var spacingDirections = ['top', 'right', 'bottom', 'left', 'vertical', 'horizontal', 'all'];
-var fixedProperties = ['width', 'height'];
-var borderDirections = ['top', 'right', 'bottom', 'left'];
-var outlineType = ['focus'];
-/**
- * `theme(o => [...])` の `o` の部分を構築する
- *
- * @param theme テーマオブジェクト
- * @param isPhantom 型推論のためだけに使う場合にランタイムコストをゼロにするフラグ
- */
-
-function builder(theme, isPhantom) {
-  if (isPhantom === void 0) {
-    isPhantom = false;
-  }
-
-  if (isPhantom) {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return {};
-  }
-
-  var colors = objectKeys(theme.color);
-  var effects = objectKeys(theme.effect); // 色
-
-  var gradientColors = objectKeys(theme.gradientColor);
-  var colorCss = createColorCss();
-  var gradientColorCss = createGradientColorCss(theme);
-  var colorObject = constFactory({}, {
-    bg: objectAssign(factory({}, colors, function (color) {
-      return modifiedFactory(effects, function (modifiers) {
-        return colorCss('bg', color, modifiers);
-      });
-    }), factory({}, gradientColors, function (color) {
-      return function (direction) {
-        return modifiedFactory(effects, function (modifiers) {
-          return gradientColorCss(color, modifiers, direction);
-        });
-      };
-    })),
-    font: factory({}, colors, function (color) {
-      return modifiedFactory(effects, function (modifiers) {
-        return colorCss('font', color, modifiers);
-      });
-    })
-  }); // タイポグラフィ
-
-  var typographyModifiers = [// TODO
-  'monospace', 'bold', 'preserveHalfLeading'];
-  var typographyCss = createTypographyCss(theme);
-  var typographyObject = factory({}, ['typography'], function (_) {
-    return function (size) {
-      return modifiedFactory(typographyModifiers, function (modifiers) {
-        return typographyCss(size, {
-          preserveHalfLeading: modifiers.includes('preserveHalfLeading'),
-          monospace: modifiers.includes('monospace'),
-          bold: modifiers.includes('bold')
-        });
-      });
-    };
-  }); // スペーシング
-
-  var spacingCss = createSpacingCss(theme);
-  var spacingObject = factory({}, spacingProperties, function (spacingProperty) {
-    return modifiedArgumentedFactory(spacingDirections, function (modifiers) {
-      return spacingCss(spacingProperty, modifiers);
-    });
-  }); // 大きさ
-
-  var fixedPxCss = createFixedPxCss(theme);
-  var fixedColumnCss = createFixedColumnCss(theme);
-  var fixedRelativeCss = createFixedRelativeCss();
-  var fixedObject = factory({}, fixedProperties, function (property) {
-    return constFactory({}, {
-      px: function px(size) {
-        return fixedPxCss(property, size);
-      },
-      column: function column(span) {
-        return fixedColumnCss(property, span);
-      },
-      auto: fixedRelativeCss(property, 'auto'),
-      full: fixedRelativeCss(property, '100%')
-    });
-  }); // 要素へのエフェクト (etc: 透過)
-
-  var elementEffectCss = createElementEffectCss(theme);
-  var elementEffectObject = modifiedFactory(objectKeys(theme.elementEffect), function (modifiers) {
-    return elementEffectCss(modifiers);
-  }); // ボーダー
-
-  var borderCss = createBorderCss(theme);
-  var borderObject = constFactory({}, {
-    border: factory({}, objectKeys(theme.border), function (variant) {
-      return modifiedFactory(borderDirections, function (modifiers) {
-        return borderCss(variant, modifiers);
-      });
-    })
-  }); // 角丸
-
-  var borderRadiusCss = createBorderRadiusCss(theme);
-  var borderRadiusObject = constFactory({}, {
-    borderRadius: function borderRadius(radius) {
-      return borderRadiusCss(radius);
-    }
-  }); // アウトライン
-
-  var outlineCss = createOutlineColorCss(theme);
-  var outlineObject = constFactory({}, {
-    outline: factory({}, objectKeys(theme.outline), function (variant) {
-      return modifiedFactory(outlineType, function (modifiers) {
-        return outlineCss(variant, modifiers);
-      });
-    })
-  });
-  return objectAssign(colorObject, typographyObject, spacingObject, fixedObject, elementEffectObject, borderObject, borderRadiusObject, outlineObject);
-}
-
-function targetProperty(target) {
-  return target === 'bg' ? 'background-color' : 'color';
-}
-
-function isSupportedEffect(effect) {
-  return ['hover', 'press', 'disabled'].includes(effect);
-}
-
-function onEffectPseudo(effect, css) {
-  var _hover, _active, _ref;
-
-  return effect === 'hover' ? {
-    '&:hover': (_hover = {}, _hover[notDisabledSelector] = css, _hover)
-  } : effect === 'press' ? {
-    '&:active': (_active = {}, _active[notDisabledSelector] = css, _active)
-  } : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  effect === 'disabled' ? (_ref = {}, _ref[disabledSelector] = css, _ref) : unreachable(effect);
-}
-
-var createColorCss = function createColorCss(_theme) {
-  return function (target, color, effects) {
-    if (effects === void 0) {
-      effects = [];
-    }
-
-    return internal(function () {
-      var _extends2;
-
-      return _extends((_extends2 = {}, _extends2[targetProperty(target)] = variable(customPropertyToken(color.toString())), _extends2), effects.filter(isSupportedEffect).reduce(function (acc, effect) {
-        var _onEffectPseudo;
-
-        return _extends({}, acc, onEffectPseudo(effect, (_onEffectPseudo = {}, _onEffectPseudo[targetProperty(target)] = variable(customPropertyToken(color.toString(), [effect])), _onEffectPseudo)));
-      }, {}));
-    }, effects.length > 0 ? target === 'font' ? {
-      colorTransition: true
-    } : {
-      backgroundColorTransition: true
-    } : {});
-  };
-}; // TODO: deprecate
-
-
-var TRANSITION_DURATION = 0.2;
-
-var createGradientColorCss = function createGradientColorCss(theme) {
-  return function (color, effects, direction) {
-    if (effects === void 0) {
-      effects = [];
-    }
-
-    var toLinearGradient = gradient(direction);
-    return internal(function (context) {
-      var optimized = !useHalfLeadingCanceller(context);
-      var duration = dur(TRANSITION_DURATION);
-
-      if (optimized && effects.length > 0) {
-        return _extends({
-          position: 'relative',
-          zIndex: 0,
-          overflow: 'hidden'
-        }, effects.filter(isSupportedEffect).reduce(function (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 : [])
-            }
-          }));
-        }, {}));
-      } else {
-        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(function (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])))));
-        }, {}));
-      }
-    });
-  };
-};
-/**
- * @see https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator
- */
-
-
-var onFocus = function onFocus(css) {
-  var _ref2;
-
-  return _ref2 = {}, _ref2[notDisabledSelector] = {
-    '&:focus, &:active': _extends({
-      outline: 'none'
-    }, css),
-    '&:focus:not(:focus-visible), &:active:not(:focus-visible)': {
-      outline: 'none'
-    },
-    '&:focus-visible': _extends({
-      outline: 'none'
-    }, css)
-  }, _ref2;
-};
-
-var outlineCss = function outlineCss(weight, color) {
-  return {
-    boxShadow: "0 0 0 " + px(weight) + " " + color
-  };
-};
-
-var createOutlineColorCss = function createOutlineColorCss(theme) {
-  return function (variant, modifiers) {
-    var weight = theme.outline[variant].weight;
-    var color = theme.outline[variant].color;
-    return internal(function () {
-      var _2;
-
-      return modifiers.includes('focus') ? onFocus(outlineCss(weight, color)) : {
-        '&&': (_2 = {}, _2[notDisabledSelector] = outlineCss(weight, color), _2)
-      };
-    }, {
-      boxShadowTransition: true
-    });
-  };
-};
-
-var overlayElement = {
-  content: "''",
-  display: 'block',
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  top: 0,
-  left: 0
-}; // half-leadingをキャンセルするとき && 垂直方向のpaddingが無い時
-// -> before/afterを入れる
-
-var useHalfLeadingCanceller = function useHalfLeadingCanceller(_ref3) {
-  var cancelHalfLeadingPx = _ref3.cancelHalfLeadingPx,
-      _ref3$hasVerticalPadd = _ref3.hasVerticalPadding,
-      hasVerticalPadding = _ref3$hasVerticalPadd === void 0 ? false : _ref3$hasVerticalPadd;
-  return cancelHalfLeadingPx !== undefined && !hasVerticalPadding;
-};
-
-var createTypographyCss = function createTypographyCss(theme) {
-  return function (size, options) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    var _options = options,
-        _options$preserveHalf = _options.preserveHalfLeading,
-        preserveHalfLeading = _options$preserveHalf === void 0 ? false : _options$preserveHalf,
-        _options$monospace = _options.monospace,
-        monospace = _options$monospace === void 0 ? false : _options$monospace,
-        _options$bold = _options.bold,
-        bold = _options$bold === void 0 ? false : _options$bold;
-    var descriptor = theme.typography.size[size];
-    var margin = -halfLeading(descriptor);
-    return internal(function (context) {
-      return _extends({
-        fontSize: px(descriptor.fontSize),
-        lineHeight: px(descriptor.lineHeight)
-      }, monospace && {
-        fontFamily: 'monospace'
-      }, bold && {
-        fontWeight: 'bold'
-      }, useHalfLeadingCanceller(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)
-        })
-      });
-    }, !preserveHalfLeading ? {
-      cancelHalfLeadingPx: margin
-    } : {});
-  };
-};
-
-var leadingCancel = {
-  display: 'block',
-  width: 0,
-  height: 0,
-  content: "''"
-};
-
-function spacingProperty(property, direction) {
-  return property + "-" + direction;
-}
-
-var createSpacingCss = function createSpacingCss(theme) {
-  return function (property, modifiers) {
-    var _modifiers$reduce = modifiers.reduce(function (acc, _ref4) {
-      var direction = _ref4[0],
-          size = _ref4[1];
-
-      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;
-    }, {}),
-        top = _modifiers$reduce.top,
-        right = _modifiers$reduce.right,
-        bottom = _modifiers$reduce.bottom,
-        left = _modifiers$reduce.left;
-
-    var hasVerticalPadding = property === 'padding' && top !== undefined && bottom !== undefined && top !== 'auto' && bottom !== 'auto';
-    return internal(function (_ref5) {
-      var _ref6, _ref7, _ref8, _ref9;
-
-      var _ref5$cancelHalfLeadi = _ref5.cancelHalfLeadingPx,
-          cancelHalfLeadingPx = _ref5$cancelHalfLeadi === void 0 ? 0 : _ref5$cancelHalfLeadi;
-      return _extends({}, top !== undefined && (_ref6 = {}, _ref6[spacingProperty(property, 'top')] = top === 'auto' ? 'auto' : px(theme.spacing[top] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)), _ref6), bottom !== undefined && (_ref7 = {}, _ref7[spacingProperty(property, 'bottom')] = bottom === 'auto' ? 'auto' : px(theme.spacing[bottom] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)), _ref7), right !== undefined && (_ref8 = {}, _ref8[spacingProperty(property, 'right')] = right === 'auto' ? 'auto' : px(theme.spacing[right]), _ref8), left !== undefined && (_ref9 = {}, _ref9[spacingProperty(property, 'left')] = left === 'auto' ? 'auto' : px(theme.spacing[left]), _ref9));
-    }, hasVerticalPadding ? {
-      hasVerticalPadding: true
-    } : {});
-  };
-};
-
-var createFixedPxCss = function createFixedPxCss(theme) {
-  return function (property, size) {
-    return internal(function () {
-      var _ref10;
-
-      return _ref10 = {}, _ref10[property] = size === 'auto' ? 'auto' : px(theme.spacing[size]), _ref10;
-    });
-  };
-};
-
-var createFixedRelativeCss = function createFixedRelativeCss(_theme) {
-  return function (property, amount) {
-    return internal(function () {
-      var _ref11;
-
-      return _ref11 = {}, _ref11[property] = amount, _ref11;
-    });
-  };
-};
-
-var createFixedColumnCss = function createFixedColumnCss(theme) {
-  return function (property, span) {
-    return internal(function () {
-      var _ref12;
-
-      return _ref12 = {}, _ref12[property] = px(columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter)), _ref12;
-    });
-  };
-};
-
-var createElementEffectCss = function createElementEffectCss(theme) {
-  return function (effects) {
-    if (effects === void 0) {
-      effects = [];
-    }
-
-    return internal(function () {
-      return effects.filter(isSupportedEffect).reduce(function (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 borderProperty(direction) {
-  return "border-" + direction;
-}
-
-function borderShorthand(color) {
-  return "solid 1px " + color;
-}
-
-var createBorderCss = function createBorderCss(theme) {
-  return function (variant, directions) {
-    var all = directions.length === 0;
-    var value = borderShorthand(theme.border[variant].color);
-    return internal(function () {
-      return _extends({}, all ? {
-        border: value
-      } : directions.reduce(function (acc, direction) {
-        var _extends3;
-
-        return _extends({}, acc, (_extends3 = {}, _extends3[borderProperty(direction)] = value, _extends3));
-      }, {}));
-    });
-  };
-};
-
-var createBorderRadiusCss = function createBorderRadiusCss(theme) {
-  return function (size) {
-    return internal(function () {
-      return {
-        borderRadius: px(theme.borderRadius[size])
-      };
-    });
-  };
-};
-
-var commonSpec = function commonSpec(_theme) {
-  var duration = dur(TRANSITION_DURATION);
-
-  var transition = function transition(property) {
-    return {
-      transition: property.map(function (v) {
-        return duration + " " + v;
-      }).join(', ')
-    };
-  };
-
-  return internal(function (_ref13) {
-    var _ref13$colorTransitio = _ref13.colorTransition,
-        colorTransition = _ref13$colorTransitio === void 0 ? false : _ref13$colorTransitio,
-        _ref13$backgroundColo = _ref13.backgroundColorTransition,
-        backgroundColorTransition = _ref13$backgroundColo === void 0 ? false : _ref13$backgroundColo,
-        _ref13$boxShadowTrans = _ref13.boxShadowTransition,
-        boxShadowTransition = _ref13$boxShadowTrans === void 0 ? false : _ref13$boxShadowTrans;
-    return transition([colorTransition ? 'color' : null, backgroundColorTransition ? 'background-color' : null, boxShadowTransition ? 'box-shadow' : null].filter(isPresent));
-  });
-};
-
-var internalSym = Symbol('internal');
-
-function internal(operation, context) {
-  var _ref14;
-
-  if (context === void 0) {
-    context = {};
-  }
-
-  return _ref14 = {}, _ref14[internalSym] = {
-    operation: operation,
-    context: context
-  }, _ref14;
-}
-
-var nonBlank = function nonBlank(value) {
-  return isPresent(value) && value !== false;
-};
-/**
- * `theme(o => [...])` の `theme` ユーティリティを構築する
- *
- * @param _styled styled-componnets の `styled` そのもの (型推論のために用いられる)
- *
- * @example
- *
- * import styled from 'styled-components'
- * const theme = createTheme(styled)
- *
- * @example
- *
- * const theme = createTheme<DefaultTheme>()
- */
-
-
-function createTheme(_styled) {
-  // `theme(o => [...])` の `o` の部分の型推論のためだけに使う意味のない変数
-  // Tを型変数のまま渡してcreateThemeが呼ばれるまで型の具象化が行われないようにする
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
-  builder({}, true); // ランタイムの `theme(o => [...])` のインターフェースを構築する
-
-
-  return function ( // ユーザー定義
-  spec) {
-    return function (_ref15) {
-      var theme = _ref15.theme;
-
-      if (!isPresent(theme)) {
-        // テーマが入っていない場合は復旧不可能なのでエラーにする
-        throw noThemeProvider;
-      } // styled-componentsのランタイムから受け取ったthemeオブジェクトをbuilderに食わせて`o`をつくる
-      // さらに、ユーザー定義にbuilderが構築した`o`を食わせる
-      // (`o`を一時変数に入れてしまうと型Tの具象化が行われるので関数合成を優先する)
-
-
-      var rawSpecDescriptor = spec(builder(theme)); // ユーザー定義の配列を整形
-
-      var specDescriptor = [].concat(Array.isArray(rawSpecDescriptor) ? rawSpecDescriptor : [rawSpecDescriptor], [commonSpec()]).filter(nonBlank); // 1パス目
-      // 全ユーザー定義を舐めて相互に影響し合う定義をチェックし、その結果(コンテキスト)を取得
-
-      var context = specDescriptor.reduce(function (acc, v) {
-        return _extends({}, acc, v[internalSym].context);
-      }, {}); // 2パス目
-      // コンテキストを見ながら最適化されたCSSを構築
-
-      return specDescriptor.map(function (v) {
-        return v[internalSym].operation(context);
-      });
-    };
-  };
-}
-
-export { SetThemeScript, TokenInjector, createTheme, defineThemeVariables, getThemeSync, makeSetThemeScriptCode, prefersColorScheme, themeSelector, themeSetter, useLocalStorage, useMedia, useTheme, useThemeSetter };
-//# sourceMappingURL=index.module.js.map