@charcoal-ui/styled 2.5.0 → 2.7.0

package/dist/index.module.js

@@ -1,1157 +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 _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)));
-}
-/**
- * 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];
-}
-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])];
-      }));
-    });
-  };
-}
-function isSupportedEffect(effect) {
-  return ['hover', 'press', 'disabled'].includes(effect);
-}
-var variable = function variable(value) {
-  return "var(" + value + ")";
-};
-function onEffectPseudo(effect, css) {
-  var _hover, _active, _ref4;
-
-  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' ? (_ref4 = {}, _ref4[disabledSelector] = css, _ref4) : unreachable(effect);
-}
-
-/**
- * 絶対にこれを export してはいけない
- *
- * さもないと `o.bg[internalSym]` みたいな叩き方が可能になってしまう（補完にも意図せず出てしまう）
- */
-var internalSym = Symbol('internal');
-/**
- * CSSObject に変換可能なオブジェクトを作成する
- *
- * 実際に CSSObject に変換するには外部から `__DO_NOT_USE_GET_INTERNAL__` を使わなければならない
- *
- * これ以降メソッドチェーンが続いてもいいし、続かなくても良い
- */
-
-function createInternal(_ref) {
-  var _ref2;
-
-  var toCSS = _ref.toCSS,
-      _ref$context = _ref.context,
-      context = _ref$context === void 0 ? {} : _ref$context;
-  return _ref2 = {}, _ref2[internalSym] = {
-    toCSS: toCSS,
-    context: context
-  }, _ref2;
-}
-
-function __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal) {
-  return internal[internalSym];
-} // half-leadingをキャンセルするとき && 垂直方向のpaddingが無い時
-// -> before/afterを入れる
-
-
-var shouldCancelHalfLeading = function shouldCancelHalfLeading(_ref3) {
-  var cancelHalfLeadingPx = _ref3.cancelHalfLeadingPx,
-      _ref3$hasVerticalPadd = _ref3.hasVerticalPadding,
-      hasVerticalPadding = _ref3$hasVerticalPadd === void 0 ? false : _ref3$hasVerticalPadd;
-  return cancelHalfLeadingPx !== undefined && !hasVerticalPadding;
-};
-/**
- * 個別の Internal（ o.〇〇 の返り値 ）が提出した context の中身を1つの context にまとめる
- */
-
-function getContext(internals) {
-  return internals.reduce(function (context, internal) {
-    return _extends({}, context, __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal).context);
-  }, {});
-}
-/**
- * 全ユーザー定義からコンテキスト生成し、styled-components 向けに CSSObject を構築
- */
-
-function toCSSObjects(internals) {
-  // 1パス目
-  // 全ユーザー定義を舐めて相互に影響し合う定義をチェックし、その結果(コンテキスト)を取得
-  var context = getContext(internals); // 2パス目
-  // コンテキストを見ながら最適化されたCSSを構築
-
-  return internals.map(function (v) {
-    return __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
- */
-
-var defineProperties = function defineProperties(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 = defineMethods({}, ['red', 'blue'],
- *   (color, alpha: number) => hex(color, alpha)
- * )
- *
- * console.log(o.red(0.5)) //=> #ff000077
- */
-
-var defineMethods = function defineMethods(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 = defineConstantProperties({}, {
- *   red: '#f00',
- *   blue: '#00f',
- * })
- *
- * console.log(o.red) //=> #f00
- */
-
-var defineConstantProperties = function defineConstantProperties(source, def) {
-  return defineProperties(source, Object.keys(def), function (key) {
-    return 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
- */
-
-var definePropertyChains = function definePropertyChains(modifiers, source) {
-  return function definePropertiesRecursively(applied) {
-    var notApplied = modifiers.filter(function (v) {
-      return !applied.includes(v);
-    });
-    return defineProperties(source(applied), notApplied, function (modifier) {
-      return notApplied.length === 0 ? unreachable() : definePropertiesRecursively([].concat(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
- */
-
-var defineMethodChains = function defineMethodChains(modifiers, source) {
-  return function defineMethodsRecursively(applied) {
-    var notApplied = modifiers.filter(function (v) {
-      return !applied.map(function (_ref) {
-        var w = _ref[0];
-        return w;
-      }).includes(v);
-    });
-    return defineMethods(source(applied), notApplied, function (modifier) {
-      return notApplied.length === 0 ? unreachable() : defineMethodsRecursively([].concat(applied, [[modifier].concat([].slice.call(arguments, 1))]));
-    });
-  }([]);
-};
-
-var borderDirections = ['top', 'right', 'bottom', 'left'];
-
-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 createInternal({
-      toCSS: function toCSS() {
-        return _extends({}, all ? {
-          border: value
-        } : directions.reduce(function (acc, direction) {
-          var _extends2;
-
-          return _extends({}, acc, (_extends2 = {}, _extends2[borderProperty(direction)] = value, _extends2));
-        }, {}));
-      }
-    });
-  };
-};
-function border(theme) {
-  var borderTypes = keyof(theme.border);
-  var borderCss = createBorderCss(theme);
-  var borderObject = defineConstantProperties({}, {
-    border: defineProperties({}, borderTypes, function (variant) {
-      return definePropertyChains(borderDirections, function (modifiers) {
-        return borderCss(variant, modifiers);
-      });
-    })
-  });
-  return borderObject;
-}
-
-var createBorderRadiusCss = function createBorderRadiusCss(theme) {
-  return function (size) {
-    return createInternal({
-      toCSS: function toCSS() {
-        return {
-          borderRadius: px(theme.borderRadius[size])
-        };
-      }
-    });
-  };
-};
-function borderRadius(theme) {
-  // 角丸
-  var borderRadiusCss = createBorderRadiusCss(theme);
-  var borderRadiusObject = defineConstantProperties({}, {
-    borderRadius: function borderRadius(radius) {
-      return borderRadiusCss(radius);
-    }
-  });
-  return borderRadiusObject;
-}
-
-var TRANSITION_DURATION = 0.2;
-/**
- * context の状態を元に transition を追加する。必ず一番最後に呼ぶ
- */
-
-function transition(_theme) {
-  var duration = dur(TRANSITION_DURATION);
-
-  var transition = function transition(property) {
-    return {
-      transition: property.map(function (v) {
-        return duration + " " + v;
-      }).join(', ')
-    };
-  };
-
-  function toCSS(_ref) {
-    var _ref$colorTransition = _ref.colorTransition,
-        colorTransition = _ref$colorTransition === void 0 ? false : _ref$colorTransition,
-        _ref$backgroundColorT = _ref.backgroundColorTransition,
-        backgroundColorTransition = _ref$backgroundColorT === void 0 ? false : _ref$backgroundColorT,
-        _ref$boxShadowTransit = _ref.boxShadowTransition,
-        boxShadowTransition = _ref$boxShadowTransit === void 0 ? false : _ref$boxShadowTransit;
-    return transition([colorTransition ? 'color' : null, backgroundColorTransition ? 'background-color' : null, boxShadowTransition ? 'box-shadow' : null].filter(isPresent));
-  }
-
-  return createInternal({
-    toCSS: toCSS
-  });
-}
-
-function targetProperty(target) {
-  return target === 'bg' ? 'background-color' : 'color';
-}
-
-var createColorCss = function createColorCss(_theme) {
-  return function (target, color, effects) {
-    if (effects === void 0) {
-      effects = [];
-    }
-
-    function toCSS() {
-      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)));
-      }, {}));
-    }
-
-    return createInternal({
-      toCSS: toCSS,
-      context: effects.length > 0 ? target === 'font' ? {
-        colorTransition: true
-      } : {
-        backgroundColorTransition: true
-      } : {}
-    });
-  };
-};
-var createGradientColorCss = function createGradientColorCss(theme) {
-  return function (color, effects, direction) {
-    if (effects === void 0) {
-      effects = [];
-    }
-
-    var toLinearGradient = gradient(direction);
-
-    function toCSS(context) {
-      var optimized = !shouldCancelHalfLeading(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 : [])
-            }
-          }));
-        }, {}));
-      }
-
-      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])))));
-      }, {}));
-    }
-
-    return createInternal({
-      toCSS: toCSS
-    });
-  };
-};
-var overlayElement = {
-  content: "''",
-  display: 'block',
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  top: 0,
-  left: 0
-};
-function colors(theme) {
-  var colors = keyof(theme.color);
-  var effects = keyof(theme.effect); // 色
-
-  var gradientColors = keyof(theme.gradientColor);
-  var colorCss = createColorCss();
-  var gradientColorCss = createGradientColorCss(theme);
-  var colorObject = defineConstantProperties({}, {
-    bg: objectAssign(defineProperties({}, colors, function (color) {
-      return definePropertyChains(effects, function (modifiers) {
-        return colorCss('bg', color, modifiers);
-      });
-    }), defineProperties({}, gradientColors, function (color) {
-      return function (direction) {
-        return definePropertyChains(effects, function (modifiers) {
-          return gradientColorCss(color, modifiers, direction);
-        });
-      };
-    })),
-    font: defineProperties({}, colors, function (color) {
-      return definePropertyChains(effects, function (modifiers) {
-        return colorCss('font', color, modifiers);
-      });
-    })
-  });
-  return colorObject;
-}
-
-var createElementEffectCss = function createElementEffectCss(theme) {
-  return function (effects) {
-    if (effects === void 0) {
-      effects = [];
-    }
-
-    return createInternal({
-      toCSS: function toCSS() {
-        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 elementEffect(theme) {
-  var effectTypes = keyof(theme.elementEffect); // 要素へのエフェクト (etc: 透過)
-
-  var elementEffectCss = createElementEffectCss(theme);
-  var elementEffectObject = definePropertyChains(effectTypes, function (modifiers) {
-    return elementEffectCss(modifiers);
-  });
-  return elementEffectObject;
-}
-
-var outlineType = ['focus'];
-
-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 createInternal({
-      toCSS: function toCSS() {
-        var _;
-
-        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
- */
-
-var onFocus = function onFocus(css) {
-  var _ref;
-
-  return _ref = {}, _ref[notDisabledSelector] = {
-    '&:focus, &:active': _extends({
-      outline: 'none'
-    }, css),
-    '&:focus:not(:focus-visible), &:active:not(:focus-visible)': {
-      outline: 'none'
-    },
-    '&:focus-visible': _extends({
-      outline: 'none'
-    }, css)
-  }, _ref;
-};
-
-function outline(theme) {
-  var outlineCss = createOutlineColorCss(theme);
-  var outlineObject = defineConstantProperties({}, {
-    outline: defineProperties({}, keyof(theme.outline), function (variant) {
-      return definePropertyChains(outlineType, function (modifiers) {
-        return outlineCss(variant, modifiers);
-      });
-    })
-  });
-  return outlineObject;
-}
-
-var fixedProperties = ['width', 'height'];
-var createFixedPxCss = function createFixedPxCss(theme) {
-  return function (property, size) {
-    return createInternal({
-      toCSS: function toCSS() {
-        var _ref;
-
-        return _ref = {}, _ref[property] = size === 'auto' ? 'auto' : px(theme.spacing[size]), _ref;
-      }
-    });
-  };
-};
-var createFixedRelativeCss = function createFixedRelativeCss(_theme) {
-  return function (property, amount) {
-    return createInternal({
-      toCSS: function toCSS() {
-        var _ref2;
-
-        return _ref2 = {}, _ref2[property] = amount, _ref2;
-      }
-    });
-  };
-};
-var createFixedColumnCss = function createFixedColumnCss(theme) {
-  return function (property, span) {
-    return createInternal({
-      toCSS: function toCSS() {
-        var _ref3;
-
-        return _ref3 = {}, _ref3[property] = px(columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter)), _ref3;
-      }
-    });
-  };
-};
-function size(theme) {
-  var fixedPxCss = createFixedPxCss(theme);
-  var fixedColumnCss = createFixedColumnCss(theme);
-  var fixedRelativeCss = createFixedRelativeCss();
-  var fixedObject = defineProperties({}, fixedProperties, function (property) {
-    return defineConstantProperties({}, {
-      px: function px(size) {
-        return fixedPxCss(property, size);
-      },
-      column: function column(span) {
-        return fixedColumnCss(property, span);
-      },
-      auto: fixedRelativeCss(property, 'auto'),
-      full: fixedRelativeCss(property, '100%')
-    });
-  });
-  return fixedObject;
-}
-
-var spacingProperties = ['margin', 'padding'];
-var spacingDirections = ['top', 'right', 'bottom', 'left', 'vertical', 'horizontal', 'all'];
-
-function spacingProperty(property, direction) {
-  return property + "-" + direction;
-}
-
-var createSpacingCss = function createSpacingCss(theme) {
-  return function (property, modifiers) {
-    var _modifiers$reduce = modifiers.reduce(function (acc, _ref) {
-      var direction = _ref[0],
-          size = _ref[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';
-
-    function toCSS(_ref2) {
-      var _ref3, _ref4, _ref5, _ref6;
-
-      var _ref2$cancelHalfLeadi = _ref2.cancelHalfLeadingPx,
-          cancelHalfLeadingPx = _ref2$cancelHalfLeadi === void 0 ? 0 : _ref2$cancelHalfLeadi;
-      return _extends({}, top !== undefined && (_ref3 = {}, _ref3[spacingProperty(property, 'top')] = top === 'auto' ? 'auto' : px(theme.spacing[top] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)), _ref3), bottom !== undefined && (_ref4 = {}, _ref4[spacingProperty(property, 'bottom')] = bottom === 'auto' ? 'auto' : px(theme.spacing[bottom] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)), _ref4), right !== undefined && (_ref5 = {}, _ref5[spacingProperty(property, 'right')] = right === 'auto' ? 'auto' : px(theme.spacing[right]), _ref5), left !== undefined && (_ref6 = {}, _ref6[spacingProperty(property, 'left')] = left === 'auto' ? 'auto' : px(theme.spacing[left]), _ref6));
-    }
-
-    return createInternal({
-      toCSS: toCSS,
-      context: hasVerticalPadding ? {
-        hasVerticalPadding: true
-      } : {}
-    });
-  };
-};
-function spacing(theme) {
-  var spacingCss = createSpacingCss(theme);
-  var spacingObject = defineProperties({}, spacingProperties, function (spacingProperty) {
-    return defineMethodChains(spacingDirections, function (modifiers) {
-      return spacingCss(spacingProperty, modifiers);
-    });
-  });
-  return spacingObject;
-}
-
-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);
-
-    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: toCSS,
-      context: !preserveHalfLeading ? {
-        cancelHalfLeadingPx: margin
-      } : {}
-    });
-  };
-};
-var leadingCancel = {
-  display: 'block',
-  width: 0,
-  height: 0,
-  content: "''"
-}; // タイポグラフィ
-
-var typographyModifiers = [// TODO
-'monospace', 'bold', 'preserveHalfLeading'];
-function typography(theme) {
-  var typographyCss = createTypographyCss(theme);
-  var typographyObject = defineProperties({}, ['typography'], function (_) {
-    return function (size) {
-      return definePropertyChains(typographyModifiers, function (modifiers) {
-        return 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) {
-  if (DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE === void 0) {
-    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));
-}
-
-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 nonBlank = function nonBlank(value) {
-  return 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(_ref) {
-      var theme = _ref.theme;
-
-      if (!isPresent(theme)) {
-        // テーマが入っていない場合は復旧不可能なのでエラーにする
-        throw noThemeProvider;
-      }
-
-      var internals = [].concat(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.module.js.map