@charcoal-ui/styled 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/index.modern.js

@@ -1,21 +1,785 @@
-import e from"warning";import{columnSystem as t}from"@charcoal-ui/foundation";import{customPropertyToken as o,applyEffect as n,notDisabledSelector as r,disabledSelector as i,px as a,halfLeading as c,dur as l,applyEffectToGradient as u,gradient as s}from"@charcoal-ui/utils";import d,{useEffect as f,useState as g,useMemo as m}from"react";import{createGlobalStyle as h,css as p}from"styled-components";function b(){return b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},b.apply(this,arguments)}function v(e){throw new Error(0===arguments.length?"unreachable":`unreachable (${JSON.stringify(e)})`)}const y=e=>null!=e;function $(...e){return Object.assign({},...e)}function w(e){return Object.keys(e)}const S=(e,t,o)=>Object.defineProperties(e,Object.fromEntries(t.map(e=>[e,{get:()=>o(e),enumerable:!0,configurable:!0}]))),k=(e,t)=>S(e,Object.keys(t),e=>t[e]),E=(e,t)=>function o(n){const r=e.filter(e=>!n.includes(e));return S(t(n),r,e=>0===r.length?v():o([...n,e]))}([]),x=e=>`var(${e})`;let O,j,L,T,A,H=e=>e;const P=h(O||(O=H`
+import warning from 'warning';
+import { columnSystem } from '@charcoal-ui/foundation';
+import { customPropertyToken, applyEffect, notDisabledSelector, disabledSelector, px, halfLeading, dur, applyEffectToGradient, gradient } from '@charcoal-ui/utils';
+import React, { useEffect, useState, useMemo } from 'react';
+import { createGlobalStyle, css } from 'styled-components';
+
+function _extends() {
+  _extends = Object.assign || 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);
+}
+function objectKeys(obj) {
+  return Object.keys(obj);
+}
+
+/**
+ * 配列で指定したプロパティを動的に生やす
+ *
+ * @param source 拡張するオブジェクト
+ * @param member オブジェクトに生やすプロパティ一覧
+ * @param chain プロパティに格納される値を生成する関数
+ *
+ * @example
+ *
+ * const o = factory({}, ['red', 'blue'],
+ *   color => hex(color)
+ * )
+ *
+ * console.log(o.red) //=> #ff0000
+ */
+
+const factory = (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 = argumentedFactory({}, ['red', 'blue'],
+ *   (color, alpha: number) => hex(color, alpha)
+ * )
+ *
+ * console.log(o.red(0.5)) //=> #ff000077
+ */
+
+const argumentedFactory = (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 = constFactory({}, {
+ *   red: '#f00',
+ *   blue: '#00f',
+ * })
+ *
+ * console.log(o.red) //=> #f00
+ */
+
+const constFactory = (source, def) => factory(source, Object.keys(def), key => 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
+ */
+
+const modifiedFactory = (modifiers, source) => function recursiveModifiedFactory(applied) {
+  const notApplied = modifiers.filter(v => !applied.includes(v));
+  return factory(source(applied), notApplied, modifier => notApplied.length === 0 ? unreachable() : recursiveModifiedFactory([...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
+ */
+
+const modifiedArgumentedFactory = (modifiers, source, ..._inferPhantom) => function recursiveModifiedFactory(applied) {
+  const notApplied = modifiers.filter(v => !applied.map(([w]) => w).includes(v));
+  return argumentedFactory(source(applied), notApplied, (modifier, ...args) => notApplied.length === 0 ? unreachable() : recursiveModifiedFactory([...applied, [modifier, ...args]]));
+}([]);
+const variable = value => `var(${value})`;
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3,
+    _t4,
+    _t5;
+const GlobalStyle = createGlobalStyle(_t || (_t = _`
   ${0}
-`),({themeMap:e,background:t})=>Object.entries(e).map(([e,o])=>e.startsWith("@media")?p(j||(j=H`
+`), ({
+  themeMap,
+  background
+}) => Object.entries(themeMap).map(([key, theme]) => key.startsWith('@media') ? css(_t2 || (_t2 = _`
             ${0} {
               :root {
                 ${0}
                 ${0}
               }
             }
-          `),e,void 0!==t&&p(L||(L=H`
+          `), key, background !== undefined && css(_t3 || (_t3 = _`
                   background-color: ${0};
-                `),o.color[t]),I(o)):p(T||(T=H`
+                `), theme.color[background]), customProperties(theme)) : css(_t4 || (_t4 = _`
             /* stylelint-disable-next-line no-duplicate-selectors */
             ${0} {
               ${0}
               ${0}
             }
-          `),e,void 0!==t&&p(A||(A=H`
+          `), key, background !== undefined && css(_t5 || (_t5 = _`
                 background-color: ${0};
-              `),o.color[t]),I(o)))),I=e=>Object.entries(e.color).flatMap(([t,r])=>[z(o(t),r),...Object.entries(e.effect).map(([e,i])=>z(o(t,[e]),n(r,[i])))]).join(";"),z=(e,t)=>`${e}: ${t}`;function C({theme:e,background:t}){/*#__PURE__*/return d.createElement(P,{themeMap:e,background:t})}const K=new RegExp(/^(\w|-)+$/);function M(e){if(!K.test(e))throw new Error(`Unexpected key :${e}, expect: /^(\\w|-)+$/`)}const R=(e="theme")=>t=>{M(e),void 0!==t?document.documentElement.dataset[e]=t:delete document.documentElement.dataset[e]};function J(e,t){return`:root[data-${null!=t?t:"theme"}='${e}']`}function N(e){return`@media (prefers-color-scheme: ${e})`}function V({key:e="charcoal-theme",setter:t=R()}={}){const[o,,n]=_(e);f(()=>{void 0!==o&&t(n?void 0:o)},[t,n,o])}function W(e="charcoal-theme"){return localStorage.getItem(e)}const _=(e="charcoal-theme")=>{M(e);const t=F("(prefers-color-scheme: dark)"),o=void 0!==t?t?"dark":"light":void 0,[n,r,i]=B(e);return[i&&void 0!==o?null!=n?n:o:void 0,r,void 0===n]};function B(e,t){const[o,n]=g(!1),[r,i]=g(),a=m(()=>null==t?void 0:t(),[t]);f(()=>(l(),window.addEventListener("storage",c),()=>{window.removeEventListener("storage",c)}));const c=t=>{t.storageArea===localStorage&&t.key===e&&l()},l=()=>{var t;const o=localStorage.getItem(e);i(null!=(t=null!==o?function(e){try{return JSON.parse(e)}catch(t){return e}}(o):null)?t:a),n(!0)};return[null!=r?r:a,t=>{if(void 0===t)localStorage.removeItem(e);else{const o=function(e){return"string"==typeof e?e:JSON.stringify(e)}(t);localStorage.setItem(e,o)}const o=new StorageEvent("storage",{bubbles:!0,cancelable:!1,key:e,url:location.href,storageArea:localStorage});dispatchEvent(o)},o]}function F(e){const[t,o]=g();return f(()=>{const t=window.matchMedia(e),n=()=>{o(t.matches)};return t.addEventListener("change",n),o(t.matches),()=>{t.removeEventListener("change",n)}},[e]),t}function U(e){return M(e.localStorageKey),M(e.rootAttribute),/*#__PURE__*/d.createElement("script",{dangerouslySetInnerHTML:{__html:`'use strict';\n(function () {\n    var localStorageKey = '${e.localStorageKey}'\n    var rootAttribute = '${e.rootAttribute}'\n    var currentTheme = localStorage.getItem(localStorageKey);\n    if (currentTheme) {\n        document.documentElement.dataset[rootAttribute] = currentTheme;\n    }\n})();\n`}})}U.defaultProps={localStorageKey:"charcoal-theme",rootAttribute:"theme"};const Y=["margin","padding"],q=["top","right","bottom","left","vertical","horizontal","all"],D=["width","height"],G=["top","right","bottom","left"],Q=["focus"];function X(e,t=!1){if(t)return{};const o=w(e.color),n=w(e.effect),r=w(e.gradientColor),i=oe(),a=ne(e),c=k({},{bg:$(S({},o,e=>E(n,t=>i("bg",e,t))),S({},r,e=>t=>E(n,o=>a(e,o,t)))),font:S({},o,e=>E(n,t=>i("font",e,t)))}),l=["monospace","bold","preserveHalfLeading"],u=le(e),s=S({},["typography"],e=>e=>E(l,t=>u(e,{preserveHalfLeading:t.includes("preserveHalfLeading"),monospace:t.includes("monospace"),bold:t.includes("bold")}))),d=de(e),f=S({},Y,e=>{return t=q,o=t=>d(e,t),function e(n){const r=t.filter(e=>!n.map(([e])=>e).includes(e));return((t,o,i)=>Object.defineProperties(t,Object.fromEntries(o.map(t=>[t,{value:(...o)=>((t,...o)=>0===r.length?v():e([...n,[t,...o]]))(t,...o),enumerable:!0,configurable:!0}]))))(o(n),r)}([]);var t,o}),g=fe(e),m=me(e),h=ge(),p=S({},D,e=>k({},{px:t=>g(e,t),column:t=>m(e,t),auto:h(e,"auto"),full:h(e,"100%")})),b=he(e),y=E(w(e.elementEffect),e=>b(e)),x=be(e),O=k({},{border:S({},w(e.border),e=>E(G,t=>x(e,t)))}),j=ve(e),L=k({},{borderRadius:e=>j(e)}),T=ie(e);return $(c,s,f,p,y,O,L,k({},{outline:S({},w(e.outline),e=>E(Q,t=>T(e,t)))}))}function Z(e){return"bg"===e?"background-color":"color"}function ee(e){return["hover","press","disabled"].includes(e)}function te(e,t){return"hover"===e?{"&:hover":{[r]:t}}:"press"===e?{"&:active":{[r]:t}}:"disabled"===e?{[i]:t}:v(e)}const oe=e=>(e,t,n=[])=>we(()=>b({[Z(e)]:x(o(t.toString()))},n.filter(ee).reduce((n,r)=>b({},n,te(r,{[Z(e)]:x(o(t.toString(),[r]))})),{})),n.length>0?"font"===e?{colorTransition:!0}:{backgroundColorTransition:!0}:{}),ne=t=>(o,r=[],i)=>{const a=s(i);return we(i=>{const c=!ce(i),s=l(.2);return c&&r.length>0?b({position:"relative",zIndex:0,overflow:"hidden"},r.filter(ee).reduce((e,r)=>{var i;return b({},e,{"&::before":b({zIndex:-1},ae,{transition:`${s} background-color`}),"&::after":b({zIndex:-2},ae,a(t.gradientColor[o]))},te(r,{"&::before":{backgroundColor:n(null,null!=(i=t.effect[r])?i:[])}}))},{})):(e(0===r.length,"'Transition' will not be applied. You can get around this by specifying 'preserveHalfLeading' or both 'padding' and 'typograpy'."),b({},a(t.gradientColor[o]),r.filter(ee).reduce((e,n)=>{var r;return b({},e,te(n,b({},a(u(null!=(r=t.effect[n])?r:[])(t.gradientColor[o])))))},{})))})},re=(e,t)=>({boxShadow:`0 0 0 ${a(e)} ${t}`}),ie=e=>(t,o)=>{const n=e.outline[t].weight,i=e.outline[t].color;return we(()=>o.includes("focus")?(e=>({[r]:{"&:focus, &:active":b({outline:"none"},e),"&:focus:not(:focus-visible), &:active:not(:focus-visible)":{outline:"none"},"&:focus-visible":b({outline:"none"},e)}}))(re(n,i)):{"&&":{[r]:re(n,i)}},{boxShadowTransition:!0})},ae={content:"''",display:"block",position:"absolute",width:"100%",height:"100%",top:0,left:0},ce=({cancelHalfLeadingPx:e,hasVerticalPadding:t=!1})=>void 0!==e&&!t,le=e=>(t,o={})=>{const{preserveHalfLeading:n=!1,monospace:r=!1,bold:i=!1}=o,l=e.typography.size[t],u=-c(l);return we(e=>b({fontSize:a(l.fontSize),lineHeight:a(l.lineHeight)},r&&{fontFamily:"monospace"},i&&{fontWeight:"bold"},ce(e)&&{display:"flow-root","&::before":b({},ue,{marginTop:a(u)}),"&::after":b({},ue,{marginBottom:a(u)})}),n?{}:{cancelHalfLeadingPx:u})},ue={display:"block",width:0,height:0,content:"''"};function se(e,t){return`${e}-${t}`}const de=e=>(t,o)=>{const{top:n,right:r,bottom:i,left:c}=o.reduce((e,[t,o])=>("all"===t?(e.top=o,e.right=o,e.bottom=o,e.left=o):"vertical"===t?(e.top=o,e.bottom=o):"horizontal"===t?(e.right=o,e.left=o):e[t]=o,e),{}),l="padding"===t&&void 0!==n&&void 0!==i&&"auto"!==n&&"auto"!==i;return we(({cancelHalfLeadingPx:o=0})=>b({},void 0!==n&&{[se(t,"top")]:"auto"===n?"auto":a(e.spacing[n]+(l?o:0))},void 0!==i&&{[se(t,"bottom")]:"auto"===i?"auto":a(e.spacing[i]+(l?o:0))},void 0!==r&&{[se(t,"right")]:"auto"===r?"auto":a(e.spacing[r])},void 0!==c&&{[se(t,"left")]:"auto"===c?"auto":a(e.spacing[c])}),l?{hasVerticalPadding:!0}:{})},fe=e=>(t,o)=>we(()=>({[t]:"auto"===o?"auto":a(e.spacing[o])})),ge=e=>(e,t)=>we(()=>({[e]:t})),me=e=>(o,n)=>we(()=>({[o]:a(t(n,e.grid.unit.column,e.grid.unit.gutter))})),he=e=>(t=[])=>we(()=>t.filter(ee).reduce((t,o)=>{var n,r;return b({},t,te(o,{opacity:Array.isArray(e.elementEffect[o])||"opacity"!==(null==(n=e.elementEffect[o])?void 0:n.type)?v():null==(r=e.elementEffect[o])?void 0:r.opacity}))},{}));function pe(e){return`border-${e}`}const be=e=>(t,o)=>{const n=0===o.length,r=`solid 1px ${e.border[t].color}`;return we(()=>b({},n?{border:r}:o.reduce((e,t)=>b({},e,{[pe(t)]:r}),{})))},ve=e=>t=>we(()=>({borderRadius:a(e.borderRadius[t])})),ye=e=>{const t=l(.2);return we(({colorTransition:e=!1,backgroundColorTransition:o=!1,boxShadowTransition:n=!1})=>({transition:[e?"color":null,o?"background-color":null,n?"box-shadow":null].filter(y).map(e=>`${t} ${e}`).join(", ")}))},$e=Symbol("internal");function we(e,t={}){return{[$e]:{operation:e,context:t}}}const Se=e=>y(e)&&!1!==e;function ke(e){return X({},!0),e=>({theme:t})=>{if(null==t)throw new Error("`theme` is invalid. `<ThemeProvider>` is not likely mounted.");const o=e(X(t)),n=[...Array.isArray(o)?o:[o],ye()].filter(Se),r=n.reduce((e,t)=>b({},e,t[$e].context),{});return n.map(e=>e[$e].operation(r))}}export{U as SetThemeScript,C as TokenInjector,ke as createTheme,W as getThemeSync,N as prefersColorScheme,J as themeSelector,R as themeSetter,B as useLocalStorage,F as useMedia,_ as useTheme,V as useThemeSetter};
+              `), theme.color[background]), customProperties(theme))));
+
+const customProperties = theme => Object.entries(theme.color).flatMap(([colorKey, color]) => [variableDefinition(customPropertyToken(colorKey), color), ...Object.entries(theme.effect).map(([effectKey, effect]) => variableDefinition(customPropertyToken(colorKey, [effectKey]), applyEffect(color, [effect])))]).join(';');
+
+const variableDefinition = (prop, value) => `${prop}: ${value}`;
+
+function TokenInjector({
+  theme: themeMap,
+  background
+}) {
+  return /*#__PURE__*/React.createElement(GlobalStyle, {
+    themeMap: themeMap,
+    background: background
+  });
+}
+
+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 SetThemeScript(props) {
+  assertKeyString(props.localStorageKey);
+  assertKeyString(props.rootAttribute);
+  const src = `'use strict';
+(function () {
+    var localStorageKey = '${props.localStorageKey}'
+    var rootAttribute = '${props.rootAttribute}'
+    var currentTheme = localStorage.getItem(localStorageKey);
+    if (currentTheme) {
+        document.documentElement.dataset[rootAttribute] = currentTheme;
+    }
+})();
+`;
+  return /*#__PURE__*/React.createElement("script", {
+    dangerouslySetInnerHTML: {
+      __html: src
+    }
+  });
+}
+const defaultProps = {
+  localStorageKey: LOCAL_STORAGE_KEY,
+  rootAttribute: DEFAULT_ROOT_ATTRIBUTE
+};
+SetThemeScript.defaultProps = defaultProps;
+
+const spacingProperties = ['margin', 'padding'];
+const spacingDirections = ['top', 'right', 'bottom', 'left', 'vertical', 'horizontal', 'all'];
+const fixedProperties = ['width', 'height'];
+const borderDirections = ['top', 'right', 'bottom', 'left'];
+const outlineType = ['focus'];
+/**
+ * `theme(o => [...])` の `o` の部分を構築する
+ *
+ * @param theme テーマオブジェクト
+ * @param isPhantom 型推論のためだけに使う場合にランタイムコストをゼロにするフラグ
+ */
+
+function builder(theme, isPhantom = false) {
+  if (isPhantom) {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return {};
+  }
+
+  const colors = objectKeys(theme.color);
+  const effects = objectKeys(theme.effect); // 色
+
+  const gradientColors = objectKeys(theme.gradientColor);
+  const colorCss = createColorCss();
+  const gradientColorCss = createGradientColorCss(theme);
+  const colorObject = constFactory({}, {
+    bg: objectAssign(factory({}, colors, color => modifiedFactory(effects, modifiers => colorCss('bg', color, modifiers))), factory({}, gradientColors, color => direction => modifiedFactory(effects, modifiers => gradientColorCss(color, modifiers, direction)))),
+    font: factory({}, colors, color => modifiedFactory(effects, modifiers => colorCss('font', color, modifiers)))
+  }); // タイポグラフィ
+
+  const typographyModifiers = [// TODO
+  'monospace', 'bold', 'preserveHalfLeading'];
+  const typographyCss = createTypographyCss(theme);
+  const typographyObject = factory({}, ['typography'], _ => size => modifiedFactory(typographyModifiers, modifiers => typographyCss(size, {
+    preserveHalfLeading: modifiers.includes('preserveHalfLeading'),
+    monospace: modifiers.includes('monospace'),
+    bold: modifiers.includes('bold')
+  }))); // スペーシング
+
+  const spacingCss = createSpacingCss(theme);
+  const spacingObject = factory({}, spacingProperties, spacingProperty => modifiedArgumentedFactory(spacingDirections, modifiers => spacingCss(spacingProperty, modifiers), {} // 推論のためのメタタイプ
+  )); // 大きさ
+
+  const fixedPxCss = createFixedPxCss(theme);
+  const fixedColumnCss = createFixedColumnCss(theme);
+  const fixedRelativeCss = createFixedRelativeCss();
+  const fixedObject = factory({}, fixedProperties, property => constFactory({}, {
+    px: size => fixedPxCss(property, size),
+    column: span => fixedColumnCss(property, span),
+    auto: fixedRelativeCss(property, 'auto'),
+    full: fixedRelativeCss(property, '100%')
+  })); // 要素へのエフェクト (etc: 透過)
+
+  const elementEffectCss = createElementEffectCss(theme);
+  const elementEffectObject = modifiedFactory(objectKeys(theme.elementEffect), modifiers => elementEffectCss(modifiers)); // ボーダー
+
+  const borderCss = createBorderCss(theme);
+  const borderObject = constFactory({}, {
+    border: factory({}, objectKeys(theme.border), variant => modifiedFactory(borderDirections, modifiers => borderCss(variant, modifiers)))
+  }); // 角丸
+
+  const borderRadiusCss = createBorderRadiusCss(theme);
+  const borderRadiusObject = constFactory({}, {
+    borderRadius: radius => borderRadiusCss(radius)
+  }); // アウトライン
+
+  const outlineCss = createOutlineColorCss(theme);
+  const outlineObject = constFactory({}, {
+    outline: factory({}, objectKeys(theme.outline), variant => modifiedFactory(outlineType, modifiers => 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) {
+  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);
+}
+
+const createColorCss = _theme => (target, color, effects = []) => internal(() => _extends({
+  [targetProperty(target)]: variable(customPropertyToken(color.toString()))
+}, effects.filter(isSupportedEffect).reduce((acc, effect) => _extends({}, acc, onEffectPseudo(effect, {
+  [targetProperty(target)]: variable(customPropertyToken(color.toString(), [effect]))
+})), {})), effects.length > 0 ? target === 'font' ? {
+  colorTransition: true
+} : {
+  backgroundColorTransition: true
+} : {}); // TODO: deprecate
+
+
+const TRANSITION_DURATION = 0.2;
+
+const createGradientColorCss = theme => (color, effects = [], direction) => {
+  const toLinearGradient = gradient(direction);
+  return internal(context => {
+    const optimized = !useHalfLeadingCanceller(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 : [])
+          }
+        }));
+      }, {}));
+    } 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((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
+ */
+
+
+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)
+  }
+});
+
+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 internal(() => modifiers.includes('focus') ? onFocus(outlineCss(weight, color)) : {
+    '&&': {
+      [notDisabledSelector]: outlineCss(weight, color)
+    }
+  }, {
+    boxShadowTransition: true
+  });
+};
+
+const overlayElement = {
+  content: "''",
+  display: 'block',
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  top: 0,
+  left: 0
+}; // half-leadingをキャンセルするとき && 垂直方向のpaddingが無い時
+// -> before/afterを入れる
+
+const useHalfLeadingCanceller = ({
+  cancelHalfLeadingPx,
+  hasVerticalPadding: _hasVerticalPadding = false
+}) => cancelHalfLeadingPx !== undefined && !_hasVerticalPadding;
+
+const createTypographyCss = theme => (size, options = {}) => {
+  const {
+    preserveHalfLeading = false,
+    monospace = false,
+    bold = false
+  } = options;
+  const descriptor = theme.typography.size[size];
+  const margin = -halfLeading(descriptor);
+  return internal(context => _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
+  } : {});
+};
+
+const leadingCancel = {
+  display: 'block',
+  width: 0,
+  height: 0,
+  content: `''`
+};
+
+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';
+  return internal(({
+    cancelHalfLeadingPx: _cancelHalfLeadingPx = 0
+  }) => _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])
+  }), hasVerticalPadding ? {
+    hasVerticalPadding: true
+  } : {});
+};
+
+const createFixedPxCss = theme => (property, size) => internal(() => ({
+  [property]: size === 'auto' ? 'auto' : px(theme.spacing[size])
+}));
+
+const createFixedRelativeCss = _theme => (property, amount) => internal(() => ({
+  [property]: amount
+}));
+
+const createFixedColumnCss = theme => (property, span) => internal(() => ({
+  [property]: px(columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter))
+}));
+
+const createElementEffectCss = theme => (effects = []) => internal(() => 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 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 internal(() => _extends({}, all ? {
+    border: value
+  } : directions.reduce((acc, direction) => _extends({}, acc, {
+    [borderProperty(direction)]: value
+  }), {})));
+};
+
+const createBorderRadiusCss = theme => size => internal(() => ({
+  borderRadius: px(theme.borderRadius[size])
+}));
+
+const commonSpec = _theme => {
+  const duration = dur(TRANSITION_DURATION);
+
+  const transition = property => ({
+    transition: property.map(v => `${duration} ${v}`).join(', ')
+  });
+
+  return internal(({
+    colorTransition: _colorTransition = false,
+    backgroundColorTransition: _backgroundColorTransition = false,
+    boxShadowTransition: _boxShadowTransition = false
+  }) => transition([_colorTransition ? 'color' : null, _backgroundColorTransition ? 'background-color' : null, _boxShadowTransition ? 'box-shadow' : null].filter(isPresent)));
+};
+
+const internalSym = Symbol('internal');
+
+function internal(operation, context = {}) {
+  return {
+    [internalSym]: {
+      operation,
+      context
+    }
+  };
+}
+
+const nonBlank = value => 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 ( // ユーザー定義
+  spec) => ({
+    theme
+  }) => {
+    if (theme == null) {
+      // テーマが入っていない場合は復旧不可能なのでエラーにする
+      throw new Error('`theme` is invalid. `<ThemeProvider>` is not likely mounted.');
+    } // styled-componentsのランタイムから受け取ったthemeオブジェクトをbuilderに食わせて`o`をつくる
+    // さらに、ユーザー定義にbuilderが構築した`o`を食わせる
+    // (`o`を一時変数に入れてしまうと型Tの具象化が行われるので関数合成を優先する)
+
+
+    const rawSpecDescriptor = spec(builder(theme)); // ユーザー定義の配列を整形
+
+    const specDescriptor = [...(Array.isArray(rawSpecDescriptor) ? rawSpecDescriptor : [rawSpecDescriptor]), commonSpec()].filter(nonBlank); // 1パス目
+    // 全ユーザー定義を舐めて相互に影響し合う定義をチェックし、その結果(コンテキスト)を取得
+
+    const context = specDescriptor.reduce((acc, v) => _extends({}, acc, v[internalSym].context), {}); // 2パス目
+    // コンテキストを見ながら最適化されたCSSを構築
+
+    return specDescriptor.map(v => v[internalSym].operation(context));
+  };
+}
+
+export { SetThemeScript, TokenInjector, createTheme, getThemeSync, prefersColorScheme, themeSelector, themeSetter, useLocalStorage, useMedia, useTheme, useThemeSetter };
 //# sourceMappingURL=index.modern.js.map