@charcoal-ui/react-sandbox 2.0.0-alpha.1 → 2.0.0-alpha.10

package/dist/index.modern.js

@@ -1,4 +1,126 @@
-import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,useReducer as i,useRef as l,useCallback as a,useContext as c,isValidElement as s,Children as d,useEffect as u,useImperativeHandle as m}from"react";import p,{css as h,useTheme as f,createGlobalStyle as g,keyframes as x}from"styled-components";import{useComponentAbstraction as b}from"@charcoal-ui/react";export{ComponentAbstraction,useComponentAbstraction}from"@charcoal-ui/react";import{maxWidth as v,disabledSelector as $,applyEffect as w}from"@charcoal-ui/utils";import{createTheme as y}from"@charcoal-ui/styled";import{columnSystem as k,COLUMN_UNIT as E,GUTTER_UNIT as C}from"@charcoal-ui/foundation";import z from"react-dom";import{animated as L,useSpring as R}from"react-spring";import O from"warning";import{transparentize as M}from"polished";function S(){return S=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},S.apply(this,arguments)}function B(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}let T,H,j,A,N,I,P,W,Z,G=e=>e;const F=["onClick","children","active","hover","reactive"],D=e.forwardRef(function({onClick:t,children:n,active:r=!1,hover:o,reactive:i=!1},l){/*#__PURE__*/return e.createElement(X,{active:r,reactive:i,hover:o,onClick:r&&!i?void 0:t,ref:l},n)}),U=e.forwardRef(function({onClick:t,children:n,active:r=!1,hover:o,reactive:i=!1,width:l,height:a},c){/*#__PURE__*/return e.createElement(K,{active:r,reactive:i,hover:o,onClick:r&&!i?void 0:t,ref:c,buttonWidth:l,buttonHeight:a},n)}),_=e.forwardRef(function(t,n){let{onClick:r,children:o,active:i=!1,hover:l,reactive:a=!1}=t,c=B(t,F);const{Link:s}=b();return i&&!a?/*#__PURE__*/e.createElement(q,{active:!0,hover:l,ref:n},o):/*#__PURE__*/e.createElement(s,S({},c,{onClick:r}),/*#__PURE__*/e.createElement(q,{active:i,reactive:a,hover:l,ref:n},o))}),V=h(T||(T=G`
+import React, { useMemo, useState, useLayoutEffect, useDebugValue, useReducer, useRef, useCallback, useContext, isValidElement, Children as Children$1, useEffect, useImperativeHandle } from 'react';
+import styled, { css, useTheme, createGlobalStyle, keyframes } from 'styled-components';
+import { useComponentAbstraction } from '@charcoal-ui/react';
+export { ComponentAbstraction, useComponentAbstraction } from '@charcoal-ui/react';
+import { maxWidth, disabledSelector, applyEffect } from '@charcoal-ui/utils';
+import { createTheme } from '@charcoal-ui/styled';
+import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation';
+import ReactDOM from 'react-dom';
+import { animated, useSpring } from 'react-spring';
+import warning from 'warning';
+import { transparentize } from 'polished';
+
+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 _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+let _$e = t => t,
+    _t$f,
+    _t2$b,
+    _t3$a,
+    _t4$8,
+    _t5$6,
+    _t6$5,
+    _t7$5,
+    _t8$5,
+    _t9$5;
+
+const _excluded$3 = ["onClick", "children", "active", "hover", "reactive"];
+const FilterButton = React.forwardRef(function FilterButton({
+  onClick,
+  children,
+  active = false,
+  hover,
+  reactive = false
+}, ref) {
+  return /*#__PURE__*/React.createElement(ButtonLike, {
+    active: active,
+    reactive: reactive,
+    hover: hover,
+    onClick: active && !reactive ? undefined : onClick,
+    ref: ref
+  }, children);
+});
+const FilterIconButton = React.forwardRef(function FilterIconButton({
+  onClick,
+  children,
+  active = false,
+  hover,
+  reactive = false,
+  width,
+  height
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledButtonLike, {
+    active: active,
+    reactive: reactive,
+    hover: hover,
+    onClick: active && !reactive ? undefined : onClick,
+    ref: ref,
+    buttonWidth: width,
+    buttonHeight: height
+  }, children);
+});
+const FilterLink = React.forwardRef(function FilterLink(_ref, ref) {
+  let {
+    onClick,
+    children,
+    active = false,
+    hover,
+    reactive = false
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  const {
+    Link
+  } = useComponentAbstraction();
+
+  if (active && !reactive) {
+    return /*#__PURE__*/React.createElement(PlainElement, {
+      active: true,
+      hover: hover,
+      ref: ref
+    }, children);
+  } else {
+    return /*#__PURE__*/React.createElement(Link, _extends({}, props, {
+      onClick: onClick
+    }), /*#__PURE__*/React.createElement(PlainElement, {
+      active: active,
+      reactive: reactive,
+      hover: hover,
+      ref: ref
+    }, children));
+  }
+});
+const buttonCss = css(_t$f || (_t$f = _$e`
   display: block;
   outline: none;
   border: none;
@@ -26,30 +148,82 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   @media ${0} {
     padding: 5px 16px;
   }
-`),({theme:e})=>e.color.text3,({theme:e})=>e.color.text2,({hover:e=!1})=>e&&h(H||(H=G`
+`), ({
+  theme
+}) => theme.color.text3, ({
+  theme
+}) => theme.color.text2, ({
+  hover: _hover = false
+}) => _hover && css(_t2$b || (_t2$b = _$e`
       color: ${0};
-    `),({theme:e})=>e.color.text2),({active:e=!1})=>e&&h(j||(j=G`
+    `), ({
+  theme
+}) => theme.color.text2), ({
+  active: _active = false
+}) => _active && css(_t3$a || (_t3$a = _$e`
       background-color: ${0};
       color: ${0};
-    `),({theme:e})=>e.color.surface3,({theme:e})=>e.color.text2),({active:e=!1,reactive:t=!1})=>e&&!t&&h(A||(A=G`
+    `), ({
+  theme
+}) => theme.color.surface3, ({
+  theme
+}) => theme.color.text2), ({
+  active: _active2 = false,
+  reactive: _reactive = false
+}) => _active2 && !_reactive && css(_t4$8 || (_t4$8 = _$e`
       cursor: default;
-    `)),({theme:e})=>v(e.breakpoint.screen1)),J=h(N||(N=G`
+    `)), ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1));
+const padding0Css = css(_t5$6 || (_t5$6 = _$e`
   padding: 0;
 
   @media ${0} {
     padding: 0;
   }
-`),({theme:e})=>v(e.breakpoint.screen1)),X=p.button(I||(I=G`
+`), ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1));
+const ButtonLike = styled.button(_t6$5 || (_t6$5 = _$e`
   ${0}
-`),V),q=p.span(P||(P=G`
+`), buttonCss);
+const PlainElement = styled.span(_t7$5 || (_t7$5 = _$e`
   ${0}
-`),V),K=p(X)(W||(W=G`
+`), buttonCss);
+const StyledButtonLike = styled(ButtonLike)(_t8$5 || (_t8$5 = _$e`
   ${0};
   ${0}
   ${0}
-`),J,e=>void 0!==e.buttonWidth&&`width: ${e.buttonWidth}px;`,e=>void 0!==e.buttonHeight&&`height: ${e.buttonHeight}px;`),Y=p.div(Z||(Z=G`
+`), padding0Css, p => p.buttonWidth !== undefined && `width: ${p.buttonWidth}px;`, p => p.buttonHeight !== undefined && `height: ${p.buttonHeight}px;`);
+const Filter = styled.div(_t9$5 || (_t9$5 = _$e`
   display: flex;
-`)),Q=y(p);let ee;function te({size:t=24,viewBoxSize:n,currentColor:r,path:o,transform:i,fillRule:l,clipRule:a}){/*#__PURE__*/return e.createElement(ne,{viewBox:`0 0 ${n} ${n}`,size:t,currentColor:r},/*#__PURE__*/e.createElement(re,{path:o,transform:i,fillRule:l,clipRule:a}))}const ne=p.svg(ee||(ee=(e=>e)`
+`));
+
+const theme = createTheme(styled);
+
+let _$d = t => t,
+    _t$e;
+function IconBase({
+  size = 24,
+  viewBoxSize,
+  currentColor,
+  path,
+  transform,
+  fillRule,
+  clipRule
+}) {
+  return /*#__PURE__*/React.createElement(Icon$3, {
+    viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+    size: size,
+    currentColor: currentColor
+  }, /*#__PURE__*/React.createElement(IconBasePath, {
+    path: path,
+    transform: transform,
+    fillRule: fillRule,
+    clipRule: clipRule
+  }));
+}
+const Icon$3 = styled.svg(_t$e || (_t$e = _$d`
   stroke: none;
   fill: ${0};
   width: ${0}px;
@@ -57,10 +231,68 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   line-height: 0;
   font-size: 0;
   vertical-align: middle;
-`),({currentColor:e=!1,theme:t})=>e?"currentColor":t.color.text2,e=>e.size,e=>e.size),re=({path:t,transform:n,fillRule:r,clipRule:o})=>"string"==typeof t?/*#__PURE__*/e.createElement("path",{d:t,transform:n,fillRule:r,clipRule:o}):/*#__PURE__*/e.createElement(e.Fragment,null,t);let oe;function ie(){/*#__PURE__*/return e.createElement(te,{viewBoxSize:16,size:16,currentColor:!0,path:/*#__PURE__*/e.createElement(e.Fragment,null,/*#__PURE__*/e.createElement("path",{d:"M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"}),/*#__PURE__*/e.createElement(le,{d:"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036 9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75 5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25 8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8 6.75C7.44772 6.75 7 7.19772 7 7.75Z"}))})}const le=p.path(oe||(oe=(e=>e)`
+`), ({
+  currentColor: _currentColor = false,
+  theme
+}) => _currentColor ? 'currentColor' : theme.color.text2, props => props.size, props => props.size);
+const IconBasePath = ({
+  path,
+  transform,
+  fillRule,
+  clipRule
+}) => {
+  if (typeof path === 'string') {
+    return /*#__PURE__*/React.createElement("path", {
+      d: path,
+      transform: transform,
+      fillRule: fillRule,
+      clipRule: clipRule
+    });
+  } else {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return /*#__PURE__*/React.createElement(React.Fragment, null, path);
+  }
+};
+
+let _$c = t => t,
+    _t$d;
+const size$1 = 16;
+function InfoIcon() {
+  const path = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+    d: "M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
+  }), /*#__PURE__*/React.createElement(Path, {
+    d: "M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036 9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75 5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25 8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8 6.75C7.44772 6.75 7 7.19772 7 7.75Z"
+  }));
+  return /*#__PURE__*/React.createElement(IconBase, {
+    viewBoxSize: size$1,
+    size: size$1,
+    currentColor: true,
+    path: path
+  });
+}
+const Path = styled.path(_t$d || (_t$d = _$c`
   fill: ${0};
   fill-rule: evenodd;
-`),({theme:e})=>e.color.surface1);let ae,ce,se,de,ue=e=>e;function me({children:t,context:n,className:r}){/*#__PURE__*/return e.createElement(pe,{className:r,context:n},/*#__PURE__*/e.createElement(he,null,/*#__PURE__*/e.createElement(ie,null)),/*#__PURE__*/e.createElement(fe,null,t))}const pe=p.div.attrs(function(e){return S({},e,function(e){switch(e){case"page":return{default:{horizontal:40,vertical:24},screen1:{horizontal:16,vertical:16}};case"section":return{default:{horizontal:16,vertical:16},screen1:{horizontal:16,vertical:16}}}}(e.context))})(ae||(ae=ue`
+`), ({
+  theme
+}) => theme.color.surface1);
+
+let _$b = t => t,
+    _t$c,
+    _t2$a,
+    _t3$9,
+    _t4$7;
+function HintText({
+  children,
+  context,
+  className
+}) {
+  return /*#__PURE__*/React.createElement(Container$2, {
+    className: className,
+    context: context
+  }, /*#__PURE__*/React.createElement(IconWrap, null, /*#__PURE__*/React.createElement(InfoIcon, null)), /*#__PURE__*/React.createElement(Text$2, null, children));
+}
+const Container$2 = styled.div.attrs(styledProps)(_t$c || (_t$c = _$b`
   ${0}
 
   @media ${0} {
@@ -70,18 +302,252 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   display: flex;
   align-items: flex-start;
   ${0}
-`),e=>Q(t=>[t.bg.surface3,t.borderRadius(8),t.padding.vertical(e.default.vertical),t.padding.horizontal(e.default.horizontal)]),({theme:e})=>v(e.breakpoint.screen1),e=>Q(t=>[t.padding.vertical(e.screen1.vertical),t.padding.horizontal(e.screen1.horizontal)]),e=>"page"===e.context&&h(ce||(ce=ue`
+`), p => theme(o => [o.bg.surface3, o.borderRadius(8), o.padding.vertical(p.default.vertical), o.padding.horizontal(p.default.horizontal)]), ({
+  theme: t
+}) => maxWidth(t.breakpoint.screen1), p => theme(o => [o.padding.vertical(p.screen1.vertical), o.padding.horizontal(p.screen1.horizontal)]), p => p.context === 'page' && css(_t2$a || (_t2$a = _$b`
       justify-content: center;
-    `))),he=p.div(se||(se=ue`
+    `)));
+const IconWrap = styled.div(_t3$9 || (_t3$9 = _$b`
   display: flex;
   align-items: center;
   color: ${0};
   height: 22px;
   margin: -4px 4px -4px 0;
-`),e=>e.theme.color.text4),fe=p.p(de||(de=ue`
+`), p => p.theme.color.text4);
+const Text$2 = styled.p(_t4$7 || (_t4$7 = _$b`
   ${0}
   margin: 0;
-`),Q(e=>[e.font.text2,e.typography(14)])),ge=72,xe=k(2,E,C)+C,be=k(12,E,C);function ve(){return $e(v(f().breakpoint.screen1))}function $e(e){const i=t(()=>__TEST__?{matches:!1,addListener:()=>{},removeListener:()=>{}}:matchMedia(e),[e]),[l,a]=n(i.matches);i.matches!==l&&a(i.matches);const c=e=>{try{z.flushSync(()=>{a(e.matches)})}catch(t){a(e.matches)}};return r(()=>(i.addListener(c),a(i.matches),()=>{i.removeListener(c)}),[i]),o(`${e}: ${l.toString()}`),l}function we(e){return null!==e?e.getBoundingClientRect():void 0}function ye(e,t=[]){const[l,a]=i((e,t)=>void 0===e||void 0===t?t:e.height===t.height&&e.width===t.width?e:t,void 0),[c,s]=n(null);return r(()=>{if(null===c)return;const e=new ResizeObserver(()=>{const e=we(c);a(e)});return e.observe(c),()=>{e.unobserve(c),a(void 0)}},[c]),r(()=>{e.current!==c&&s(e.current)}),r(()=>{t.length>0&&a(we(e.current))},t),o(l),l}let ke,Ee,Ce,ze,Le,Re,Oe,Me,Se,Be,Te,He,je,Ae,Ne,Ie=e=>e;const Pe=e.createContext({wide:!1,center:!1,withLeft:!1});function We({menu:t,children:n,header:r,center:o=!1,wide:i,isHeaderTopMenu:l=!1}){const a={center:o,wide:!!o||null!=i&&i,withLeft:null!=t&&!l};/*#__PURE__*/return e.createElement(Fe,null,/*#__PURE__*/e.createElement(Pe.Provider,{value:a},a.withLeft&&/*#__PURE__*/e.createElement(De,null,t),/*#__PURE__*/e.createElement(Ue,{center:o},null!=r&&/*#__PURE__*/e.createElement(_e,null,r),l&&/*#__PURE__*/e.createElement(Ze,null,t),/*#__PURE__*/e.createElement(Ve,null,n))),/*#__PURE__*/e.createElement(Ge,null))}const Ze=p.div(ke||(ke=Ie`
+`), theme(o => [o.font.text2, o.typography(14)]));
+
+function styledProps(props) {
+  return _extends({}, props, contextToProps(props.context));
+}
+
+function contextToProps(context) {
+  switch (context) {
+    case 'page':
+      return {
+        default: {
+          horizontal: 40,
+          vertical: 24
+        },
+        screen1: {
+          horizontal: 16,
+          vertical: 16
+        }
+      };
+
+    case 'section':
+      return {
+        default: {
+          horizontal: 16,
+          vertical: 16
+        },
+        screen1: {
+          horizontal: 16,
+          vertical: 16
+        }
+      };
+  }
+}
+
+const MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72;
+const RESPONSIVE_LEFT_WIDTH = columnSystem(2, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT;
+const RESPONSIVE_MAIN_MAX_WIDTH = columnSystem(12, COLUMN_UNIT, GUTTER_UNIT);
+
+/**
+ * 現在の画面幅がモバイル幅かどうかを返す
+ */
+
+function useMediaScreen1() {
+  return useMedia(maxWidth(useTheme().breakpoint.screen1));
+}
+/**
+ * Returns a dynamically-updating media query result.
+ *
+ * When the media query's matching state changes, this hook's result
+ * will update with sync priority.
+ *
+ * @param query A full media query (the string written between `@media` and the `{` in CSS)
+ * @returns true if the query matches, false if it doesn't
+ */
+
+function useMedia(query) {
+  const matcher = useMemo(() => __TEST__ ? {
+    matches: false,
+    addListener: () => {// do nothing
+    },
+    removeListener: () => {// do nothing
+    }
+  } : matchMedia(query), [query]);
+  const [matches, setMatches] = useState(matcher.matches); // can only happen if/when the query changes
+
+  if (matcher.matches !== matches) {
+    setMatches(matcher.matches);
+  }
+
+  const callback = e => {
+    // We're not on a React event listener, so React doesn't know the priority of the setState call
+    // Media query updates _are_ very high priority to avoid FOUC
+    // so we need to emit a sync priority update
+    try {
+      // However, flushSync may throw if the matcher is triggered by a
+      // forced relayout that happens during a React lifecycle handler.
+      // Try to be resilient and retry without flushSync if flushSync throws.
+      ReactDOM.flushSync(() => {
+        setMatches(e.matches);
+      });
+    } catch (_unused) {
+      setMatches(e.matches);
+    }
+  };
+
+  useLayoutEffect(() => {
+    matcher.addListener(callback); // sync update
+
+    setMatches(matcher.matches);
+    return () => {
+      matcher.removeListener(callback);
+    };
+  }, [matcher]);
+  useDebugValue(`${query}: ${matches.toString()}`);
+  return matches;
+}
+
+function measure(ref) {
+  return ref !== null ? ref.getBoundingClientRect() : undefined;
+}
+
+function useElementSize(ref, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+deps = []) {
+  // _don't_ call measure synchronously here even if you somehow can
+  // measurement has to be done outside the render phase, either
+  // as the resize observer callback or as a layout effect
+  const [size, setSize] = useReducer((state, next) => {
+    // width, height, etc are not own properties but getters in the prototype
+    // can't use shallowEqual or other iterative checks
+    if (state === undefined || next === undefined) {
+      return next;
+    }
+
+    if (state.height === next.height && state.width === next.width) {
+      return state;
+    }
+
+    return next;
+  }, undefined);
+  const [watch, setWatch] = useState(null);
+  useLayoutEffect(() => {
+    if (watch === null) {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => {
+      // NOTE: the ResizeObserverCallback receives a rect,
+      // but it's not measured in the same way as getBoundingClientRect,
+      // which causes unstable layout
+      const newSize = measure(watch);
+      setSize(newSize);
+    }); // The ResizeObserver is supposed to call handleResize on observe
+
+    observer.observe(watch);
+    return () => {
+      // this will correctly unobserve if either the observer
+      // or the current changes, and even on unmount
+      // no need for an observer.disconnect() 🎉
+      observer.unobserve(watch);
+      setSize(undefined);
+    };
+  }, [watch]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  useLayoutEffect(() => {
+    if (ref.current !== watch) {
+      setWatch(ref.current);
+    }
+  });
+  useLayoutEffect(() => {
+    if (deps.length > 0) {
+      // Sync measuring
+      setSize(measure(ref.current));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, deps);
+  useDebugValue(size);
+  return size;
+}
+/**
+ * Debounce version of setState with `requestAnimationFrame`
+ *
+ * @param defaultValue Default value for `useState`
+ */
+
+function useDebounceAnimationState(defaultValue) {
+  const [state, setState] = useState(defaultValue);
+  const timer = useRef(); // typescript bug? (any when omitting type annotation)
+  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+
+  const setDebounceState = useCallback((value, force = false) => {
+    if (force) {
+      setState(value);
+      return;
+    }
+
+    if (timer.current !== undefined) {
+      return;
+    }
+
+    timer.current = requestAnimationFrame(() => {
+      setState(value);
+
+      if (timer.current !== undefined) {
+        timer.current = undefined;
+      }
+    });
+  }, []);
+  return [state, setDebounceState];
+}
+
+let _$a = t => t,
+    _t$b,
+    _t2$9,
+    _t3$8,
+    _t4$6,
+    _t5$5,
+    _t6$4,
+    _t7$4,
+    _t8$4,
+    _t9$4,
+    _t10$4,
+    _t11$1,
+    _t12$1,
+    _t13$1,
+    _t14,
+    _t15;
+const LayoutConfigContext = React.createContext({
+  wide: false,
+  center: false,
+  withLeft: false
+});
+function Layout({
+  menu,
+  children,
+  header,
+  center = false,
+  wide,
+  isHeaderTopMenu = false
+}) {
+  const config = {
+    center,
+    wide: center ? true : wide != null ? wide : false,
+    withLeft: menu != null && !isHeaderTopMenu
+  };
+  return /*#__PURE__*/React.createElement(LayoutRoot, null, /*#__PURE__*/React.createElement(LayoutConfigContext.Provider, {
+    value: config
+  }, config.withLeft && /*#__PURE__*/React.createElement(LeftArea, null, menu), /*#__PURE__*/React.createElement(MainArea, {
+    center: center
+  }, header != null && /*#__PURE__*/React.createElement(Header, null, header), isHeaderTopMenu && /*#__PURE__*/React.createElement(HeaderTopMenuContainer, null, menu), /*#__PURE__*/React.createElement(Grid, null, children))), /*#__PURE__*/React.createElement(GlobalStyle, null));
+}
+const HeaderTopMenuContainer = styled.div(_t$b || (_t$b = _$a`
   margin-bottom: 40px;
   overflow-x: auto;
   word-break: keep-all;
@@ -92,7 +558,12 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
     padding-bottom: 16px;
     background-color: ${0};
   }
-`),({theme:e})=>v(e.breakpoint.screen1),({theme:e})=>e.color.surface2),Ge=g(Ee||(Ee=Ie`
+`), ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), ({
+  theme
+}) => theme.color.surface2);
+const GlobalStyle = createGlobalStyle(_t2$9 || (_t2$9 = _$a`
   :root {
     background-color: ${0};
 
@@ -100,14 +571,28 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
       background-color: ${0};
     }
   }
-`),({theme:e})=>e.color.background2,({theme:e})=>v(e.breakpoint.screen1),({theme:e})=>e.color.background1),Fe=p.div(Ce||(Ce=Ie`
+`), ({
+  theme
+}) => theme.color.background2, ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), ({
+  theme
+}) => theme.color.background1);
+const LayoutRoot = styled.div(_t3$8 || (_t3$8 = _$a`
   display: flex;
   background-color: ${0};
 
   @media ${0} {
     background-color: ${0};
   }
-`),({theme:e})=>e.color.background2,({theme:e})=>v(e.breakpoint.screen1),({theme:e})=>e.color.background1),De=p.div(ze||(ze=Ie`
+`), ({
+  theme
+}) => theme.color.background2, ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), ({
+  theme
+}) => theme.color.background1);
+const LeftArea = styled.div(_t4$6 || (_t4$6 = _$a`
   min-width: ${0}px;
   padding: 40px 0 40px ${0}px;
   box-sizing: border-box;
@@ -115,7 +600,10 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   @media ${0} {
     display: none;
   }
-`),xe,C,({theme:e})=>e.breakpoint.screen3),Ue=p.div(Le||(Le=Ie`
+`), RESPONSIVE_LEFT_WIDTH, GUTTER_UNIT, ({
+  theme
+}) => theme.breakpoint.screen3);
+const MainArea = styled.div(_t5$5 || (_t5$5 = _$a`
   flex-grow: 1;
   /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
   min-width: 0;
@@ -128,7 +616,10 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   @media ${0} {
     padding: 0;
   }
-`),e=>e.center?k(6,E,C):be,72,({theme:e})=>v(e.breakpoint.screen1)),_e=p.div(Re||(Re=Ie`
+`), p => p.center ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) : RESPONSIVE_MAIN_MAX_WIDTH, MAIN_COLUMN_HORIZONTAL_MIN_MARGIN, ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1));
+const Header = styled.div(_t6$4 || (_t6$4 = _$a`
   font-weight: bold;
   margin-bottom: 12px;
   font-size: 20px;
@@ -144,7 +635,14 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
     justify-content: center;
     background-color: ${0};
   }
-`),({theme:e})=>e.color.text2,({theme:e})=>v(e.breakpoint.screen1),({theme:e})=>e.color.surface2),Ve=p.div(Oe||(Oe=Ie`
+`), ({
+  theme
+}) => theme.color.text2, ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), ({
+  theme
+}) => theme.color.surface2);
+const Grid = styled.div(_t7$4 || (_t7$4 = _$a`
   display: grid;
   gap: ${0}px;
   grid-template-columns: 1fr;
@@ -156,7 +654,25 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
     background-color: ${0};
     padding-bottom: 60px;
   }
-`),C,({theme:e})=>v(e.breakpoint.screen1),({theme:e})=>e.color.background1),Je=e.forwardRef(function({span:t,children:n},r){const{withLeft:o}=c(Pe);/*#__PURE__*/return e.createElement(Xe,{span:t,withLeft:o,ref:r},n)}),Xe=p.div(Me||(Me=Ie`
+`), GUTTER_UNIT, ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), ({
+  theme
+}) => theme.color.background1);
+const LayoutItem = React.forwardRef(function LayoutItem({
+  span,
+  children
+}, ref) {
+  const {
+    withLeft
+  } = useContext(LayoutConfigContext);
+  return /*#__PURE__*/React.createElement(StyledLayoutItem, {
+    span: span,
+    withLeft: withLeft,
+    ref: ref
+  }, children);
+});
+const StyledLayoutItem = styled.div(_t8$4 || (_t8$4 = _$a`
   grid-column-start: auto;
   grid-column-end: span ${0};
   border-radius: 24px;
@@ -175,11 +691,30 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
     border-radius: 0;
     padding-bottom: 40px;
   }
-`),e=>e.span,({theme:e})=>e.color.text2,({theme:e})=>e.color.background1,e=>e.withLeft?e.theme.breakpoint.screen4:e.theme.breakpoint.screen3,e=>e.span>2&&h(Se||(Se=Ie`
+`), p => p.span, ({
+  theme
+}) => theme.color.text2, ({
+  theme
+}) => theme.color.background1, p => p.withLeft ? p.theme.breakpoint.screen4 : p.theme.breakpoint.screen3, p => p.span > 2 && css(_t9$4 || (_t9$4 = _$a`
         grid-column-end: span 2;
-      `)),({theme:e})=>v(e.breakpoint.screen1),e=>e.span>1&&h(Be||(Be=Ie`
+      `)), ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), p => p.span > 1 && css(_t10$4 || (_t10$4 = _$a`
         grid-column-end: span 1;
-      `)));function qe({children:t}){const{wide:n,center:r}=c(Pe);/*#__PURE__*/return e.createElement(Ke,{wide:n,center:r},t)}const Ke=p.div(Te||(Te=Ie`
+      `)));
+function LayoutItemHeader({
+  children
+}) {
+  const {
+    wide,
+    center
+  } = useContext(LayoutConfigContext);
+  return /*#__PURE__*/React.createElement(StyledLayoutItemHeader, {
+    wide: wide,
+    center: center
+  }, children);
+}
+const StyledLayoutItemHeader = styled.div(_t11$1 || (_t11$1 = _$a`
   padding: 0 ${0}px;
   height: ${0}px;
   display: grid;
@@ -200,12 +735,57 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
     border-radius: unset;
     ${0}
   }
-`),e=>e.wide?40:24,e=>e.wide?64:48,({theme:e})=>e.color.surface2,({theme:e})=>e.color.text2,e=>e.center&&h(He||(He=Ie`
+`), p => p.wide ? 40 : 24, p => p.wide ? 64 : 48, ({
+  theme
+}) => theme.color.surface2, ({
+  theme
+}) => theme.color.text2, p => p.center && css(_t12$1 || (_t12$1 = _$a`
       justify-content: center;
-    `)),({theme:e})=>v(e.breakpoint.screen1),e=>e.wide&&h(je||(je=Ie`
+    `)), ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), p => p.wide && css(_t13$1 || (_t13$1 = _$a`
         height: 48px;
         margin-top: 0;
-      `))),Ye={wide:{x:40,y:40},default:{x:24,y:24},column1:{x:16,y:16},narrow:{x:24,yTop:12,yBottom:20},narrowColumn1:{x:16,yTop:4,yBottom:0}};function Qe({children:t,horizontal:n=!1,narrow:r=!1}){const{wide:o}=c(Pe);/*#__PURE__*/return e.createElement(et,{wide:o,horizontal:n,narrow:r},t)}const et=p.div(Ae||(Ae=Ie`
+      `)));
+const LAYOUT_ITEM_BODY_PADDING = {
+  wide: {
+    x: 40,
+    y: 40
+  },
+  default: {
+    x: 24,
+    y: 24
+  },
+  column1: {
+    x: 16,
+    y: 16
+  },
+  narrow: {
+    x: 24,
+    yTop: 12,
+    yBottom: 20
+  },
+  narrowColumn1: {
+    x: 16,
+    yTop: 4,
+    yBottom: 0
+  }
+};
+function LayoutItemBody({
+  children,
+  horizontal = false,
+  narrow = false
+}) {
+  const {
+    wide
+  } = useContext(LayoutConfigContext);
+  return /*#__PURE__*/React.createElement(StyledLayoutItemBody, {
+    wide: wide,
+    horizontal: horizontal,
+    narrow: narrow
+  }, children);
+}
+const StyledLayoutItemBody = styled.div(_t14 || (_t14 = _$a`
   padding: ${0};
 
   @media ${0} {
@@ -214,7 +794,30 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
 
   width: 100%;
   box-sizing: border-box;
-`),e=>e.narrow?`${Ye.narrow.yTop}px ${e.horizontal?0:Ye.narrow.x}px ${Ye.narrow.yBottom}px`:e.wide?`${e.horizontal?0:Ye.wide.y}px ${Ye.wide.x}px`:`${e.horizontal?0:Ye.default.y}px ${Ye.default.x}px`,({theme:e})=>v(e.breakpoint.screen1),e=>e.narrow?`${Ye.narrowColumn1.yTop}px ${e.horizontal?0:Ye.narrowColumn1.x}px ${Ye.narrowColumn1.yBottom}px`:`${Ye.column1.y}px ${Ye.column1.x}px 0`);function tt(){const{wide:e}=c(Pe);return ve()?Ye.column1:e?Ye.wide:Ye.default}function nt({children:t,cancelTop:n}){const{wide:r}=c(Pe);/*#__PURE__*/return e.createElement(rt,{wide:r,cancelTop:n},t)}const rt=p.div(Ne||(Ne=Ie`
+`), p => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrow.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrow.x}px ${LAYOUT_ITEM_BODY_PADDING.narrow.yBottom}px` : p.wide ? `${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.wide.y}px ${LAYOUT_ITEM_BODY_PADDING.wide.x}px` : `${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.default.y}px ${LAYOUT_ITEM_BODY_PADDING.default.x}px`, ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), p => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrowColumn1.x}px ${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yBottom}px` : `${LAYOUT_ITEM_BODY_PADDING.column1.y}px ${LAYOUT_ITEM_BODY_PADDING.column1.x}px ${0}`);
+function useLayoutItemBodyPadding() {
+  const {
+    wide
+  } = useContext(LayoutConfigContext);
+  return useMediaScreen1() ? LAYOUT_ITEM_BODY_PADDING.column1 : wide ? LAYOUT_ITEM_BODY_PADDING.wide : LAYOUT_ITEM_BODY_PADDING.default;
+}
+function CancelLayoutItemBodyPadding({
+  children,
+  cancelTop
+}) {
+  const {
+    wide
+  } = useContext(LayoutConfigContext);
+  return /*#__PURE__*/React.createElement(StyledCancelLayoutItemBodyPadding, {
+    wide: wide,
+    cancelTop: cancelTop
+  }, children);
+}
+/* eslint-disable max-len */
+
+const StyledCancelLayoutItemBodyPadding = styled.div(_t15 || (_t15 = _$a`
   margin: 0 -${0}px;
   margin-top: -${0}px;
 
@@ -222,23 +825,134 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
     margin: 0 -${0}px;
     margin-top: -${0}px;
   }
-`),e=>e.wide?Ye.wide.x:Ye.default.x,({cancelTop:e=!1,wide:t})=>e?t?Ye.wide.y:Ye.default.y:0,({theme:e})=>v(e.breakpoint.screen1),Ye.column1.x,({cancelTop:e=!1})=>e?Ye.column1.x:0),ot=e=>s(e)&&Boolean(e.props.children),it=e=>null==e||"boolean"==typeof e||"{}"===JSON.stringify(e)?"":e.toString(),lt=e=>Array.isArray(e)||s(e)?d.toArray(e).reduce((e,t)=>{let n="";return n=s(t)&&ot(t)?lt(t.props.children):s(t)&&!ot(t)?"":it(t),e.concat(n)},""):it(e);let at,ct,st,dt=e=>e;const ut=p.div.attrs(({children:e,title:t=lt(e)})=>({title:""!==t?t:void 0}))(at||(at=dt`
+`), p => p.wide ? LAYOUT_ITEM_BODY_PADDING.wide.x : LAYOUT_ITEM_BODY_PADDING.default.x, ({
+  cancelTop: _cancelTop = false,
+  wide
+}) => !_cancelTop ? 0 : wide ? LAYOUT_ITEM_BODY_PADDING.wide.y : LAYOUT_ITEM_BODY_PADDING.default.y, ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), LAYOUT_ITEM_BODY_PADDING.column1.x, ({
+  cancelTop: _cancelTop2 = false
+}) => !_cancelTop2 ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x);
+/* eslint-enable max-len */
+
+// https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts
+
+const hasChildren = element => isValidElement(element) && Boolean(element.props.children);
+
+const childToString = ( // eslint-disable-next-line @typescript-eslint/ban-types
+child) => {
+  if (typeof child === 'undefined' || child === null || typeof child === 'boolean') {
+    return '';
+  }
+
+  if (JSON.stringify(child) === '{}') {
+    return '';
+  }
+
+  return child.toString();
+};
+const onlyText = children => {
+  if (!Array.isArray(children) && !isValidElement(children)) {
+    return childToString(children);
+  }
+
+  return Children$1.toArray(children).reduce((text, child) => {
+    let newText = '';
+
+    if (isValidElement(child) && hasChildren(child)) {
+      newText = onlyText(child.props.children);
+    } else if (isValidElement(child) && !hasChildren(child)) {
+      newText = '';
+    } else {
+      newText = childToString(child);
+    }
+
+    return text.concat(newText);
+  }, '');
+};
+
+let _$9 = t => t,
+    _t$a,
+    _t2$8,
+    _t3$7;
+/**
+ * 複数行のテキストに表示行数制限を設けて`...`で省略する
+ */
+
+const TextEllipsis = styled.div.attrs(({
+  children,
+  title: _title = onlyText(children)
+}) => ({
+  title: _title !== '' ? _title : undefined
+}))(_t$a || (_t$a = _$9`
   overflow: hidden;
   line-height: ${0}px;
   /* For english */
   overflow-wrap: break-word;
 
   ${0}
-`),e=>e.lineHeight,({lineLimit:e=1,lineHeight:t})=>1===e?h(ct||(ct=dt`
+`), props => props.lineHeight, ({
+  lineLimit: _lineLimit = 1,
+  lineHeight
+}) => _lineLimit === 1 ? css(_t2$8 || (_t2$8 = _$9`
           text-overflow: ellipsis;
           white-space: nowrap;
-        `)):h(st||(st=dt`
+        `)) : css(_t3$7 || (_t3$7 = _$9`
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: ${0};
           /* Fallback for -webkit-line-clamp */
           max-height: ${0}px;
-        `),e,t*e)),mt=["link","onClick","disabled","primary","secondary","gtmClass","noHover","children"],pt=["icon","primary"],ht=["icon","primary"];let ft,gt,xt,bt,vt,$t,wt,yt,kt,Et,Ct=e=>e;const zt=e.createContext({padding:24});function Lt({primary:t,secondary:n,onClick:r,disabled:o=!1,noHover:i=!1,gtmClass:l,children:a}){const{padding:s}=c(zt);/*#__PURE__*/return e.createElement(Rt,{hasSubLabel:void 0!==n,onClick:e=>!o&&r&&r(e),sidePadding:s,noHover:i,noClick:void 0===r,"aria-disabled":o,role:void 0!==r?"button":void 0,className:void 0!==l?`gtm-${l}`:void 0},/*#__PURE__*/e.createElement(Ot,null,/*#__PURE__*/e.createElement(Mt,null,/*#__PURE__*/e.createElement(ut,{lineHeight:22,lineLimit:1},t)),void 0!==n&&/*#__PURE__*/e.createElement(St,null,/*#__PURE__*/e.createElement(ut,{lineHeight:22,lineLimit:1},n))),a)}const Rt=p.div(ft||(ft=Ct`
+        `), _lineLimit, lineHeight * _lineLimit));
+
+const _excluded$2 = ["link", "onClick", "disabled", "primary", "secondary", "gtmClass", "noHover", "children"],
+      _excluded2 = ["icon", "primary"],
+      _excluded3 = ["icon", "primary"];
+
+let _$8 = t => t,
+    _t$9,
+    _t2$7,
+    _t3$6,
+    _t4$5,
+    _t5$4,
+    _t6$3,
+    _t7$3,
+    _t8$3,
+    _t9$3,
+    _t10$3;
+const MenuListItemContext = React.createContext({
+  padding: 24
+});
+function MenuListItem({
+  primary,
+  secondary,
+  onClick,
+  disabled = false,
+  noHover = false,
+  gtmClass,
+  children
+}) {
+  const {
+    padding
+  } = useContext(MenuListItemContext);
+  return /*#__PURE__*/React.createElement(Item, {
+    hasSubLabel: secondary !== undefined,
+    onClick: e => !disabled && onClick && onClick(e),
+    sidePadding: padding,
+    noHover: noHover,
+    noClick: onClick === undefined,
+    "aria-disabled": disabled,
+    role: onClick !== undefined ? 'button' : undefined,
+    className: gtmClass !== undefined ? `gtm-${gtmClass}` : undefined
+  }, /*#__PURE__*/React.createElement(Labels, null, /*#__PURE__*/React.createElement(PrimaryText, null, /*#__PURE__*/React.createElement(TextEllipsis, {
+    lineHeight: 22,
+    lineLimit: 1
+  }, primary)), secondary !== undefined && /*#__PURE__*/React.createElement(SecondaryText, null, /*#__PURE__*/React.createElement(TextEllipsis, {
+    lineHeight: 22,
+    lineLimit: 1
+  }, secondary))), children);
+}
+const Item = styled.div(_t$9 || (_t$9 = _$8`
   display: flex;
   height: ${0}px;
   align-items: center;
@@ -262,44 +976,145 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
       background-color: unset;
     }
   }
-`),e=>e.hasSubLabel?56:40,e=>e.sidePadding,e=>e.noClick?"default":"pointer",e=>!e.noHover&&h(gt||(gt=Ct`
+`), p => p.hasSubLabel ? 56 : 40, p => p.sidePadding, p => p.noClick ? 'default' : 'pointer', p => !p.noHover && css(_t2$7 || (_t2$7 = _$8`
         background-color: ${0};
-      `),({theme:e})=>e.color.surface3),Q(e=>e.disabled),$),Ot=p.div(xt||(xt=Ct`
+      `), ({
+  theme
+}) => theme.color.surface3), theme(o => o.disabled), disabledSelector);
+const Labels = styled.div(_t3$6 || (_t3$6 = _$8`
   display: flex;
   flex-direction: column;
-`)),Mt=p.div(bt||(bt=Ct`
+`));
+const PrimaryText = styled.div(_t4$5 || (_t4$5 = _$8`
   color: ${0};
   line-height: 22px;
   font-size: 14px;
   display: grid;
-`),e=>e.theme.color.text2),St=p.div(vt||(vt=Ct`
+`), p => p.theme.color.text2);
+const SecondaryText = styled.div(_t5$4 || (_t5$4 = _$8`
   color: ${0};
   line-height: 18px;
   font-size: 10px;
-`),e=>e.theme.color.text3);function Bt(t){let{link:n,onClick:r,disabled:o=!1,primary:i,secondary:l,gtmClass:a,noHover:c,children:s}=t,d=B(t,mt);const{Link:u}=b(),m={disabled:o,primary:i,secondary:l,gtmClass:a,noHover:c,children:s};return o?/*#__PURE__*/e.createElement("span",{onClick:r},/*#__PURE__*/e.createElement(Lt,m)):/*#__PURE__*/e.createElement(Tt,S({as:u,to:n,onClick:r},d),/*#__PURE__*/e.createElement(Lt,S({onClick:()=>{}},m)))}const Tt=p.a($t||($t=Ct`
+`), p => p.theme.color.text3);
+function MenuListLinkItem(_ref) {
+  let {
+    link,
+    onClick,
+    disabled = false,
+    primary,
+    secondary,
+    gtmClass,
+    noHover,
+    children
+  } = _ref,
+      linkProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  const {
+    Link
+  } = useComponentAbstraction();
+  const props = {
+    disabled,
+    primary,
+    secondary,
+    gtmClass,
+    noHover,
+    children
+  };
+  return disabled ? /*#__PURE__*/React.createElement("span", {
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(MenuListItem, props)) : /*#__PURE__*/React.createElement(A, _extends({
+    as: Link,
+    to: link,
+    onClick: onClick
+  }, linkProps), /*#__PURE__*/React.createElement(MenuListItem, _extends({
+    onClick: () => void 0
+  }, props)));
+}
+const A = styled.a(_t6$3 || (_t6$3 = _$8`
   display: block;
-`));function Ht(t){let{icon:n,primary:r}=t,o=B(t,pt);/*#__PURE__*/return e.createElement(Bt,S({primary:/*#__PURE__*/e.createElement(At,null,/*#__PURE__*/e.createElement(Nt,null,n),r)},o))}function jt(t){let{icon:n,primary:r}=t,o=B(t,ht);/*#__PURE__*/return e.createElement(Lt,S({primary:/*#__PURE__*/e.createElement(At,null,/*#__PURE__*/e.createElement(Nt,null,n),r)},o))}const At=p.div(wt||(wt=Ct`
+`));
+function MenuListLinkItemWithIcon(_ref2) {
+  let {
+    icon,
+    primary: text
+  } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  const primary = /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon$2, null, icon), text);
+  return /*#__PURE__*/React.createElement(MenuListLinkItem, _extends({
+    primary: primary
+  }, props));
+}
+function MenuListItemWithIcon(_ref3) {
+  let {
+    icon,
+    primary: text
+  } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+
+  const primary = /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon$2, null, icon), text);
+  return /*#__PURE__*/React.createElement(MenuListItem, _extends({
+    primary: primary
+  }, props));
+}
+const IconContainer = styled.div(_t7$3 || (_t7$3 = _$8`
   display: grid;
   gap: 8px;
   grid-auto-flow: column;
   align-items: center;
-`)),Nt=p.div(yt||(yt=Ct`
+`));
+const Icon$2 = styled.div(_t8$3 || (_t8$3 = _$8`
   color: ${0};
   display: flex;
-`),({theme:e})=>e.color.text3),It=p.div(kt||(kt=Ct`
+`), ({
+  theme
+}) => theme.color.text3);
+const MenuListSpacer = styled.div(_t9$3 || (_t9$3 = _$8`
   height: 24px;
-`)),Pt=p.div(Et||(Et=Ct`
+`));
+const MenuListLabel = styled.div(_t10$3 || (_t10$3 = _$8`
   padding: 0 16px;
   font-size: 12px;
   line-height: 16px;
   color: ${0};
   margin-top: -2px;
   margin-bottom: 6px;
-`),({theme:e})=>e.color.text3);let Wt,Zt,Gt=e=>e;function Ft({links:t,active:n}){const{Link:r}=b();/*#__PURE__*/return e.createElement(Ut,null,t.map((t,o)=>/*#__PURE__*/e.createElement(r,{to:t.to,key:o},/*#__PURE__*/e.createElement(_t,{"aria-current":t.id===n||void 0},t.text))))}function Dt({links:t}){/*#__PURE__*/return e.createElement(e.Fragment,null,t.map((t,n)=>/*#__PURE__*/e.createElement(Bt,{link:t.to,key:n,primary:t.text})))}const Ut=p.div(Wt||(Wt=Gt`
+`), ({
+  theme
+}) => theme.color.text3);
+
+let _$7 = t => t,
+    _t$8,
+    _t2$6;
+function LeftMenu({
+  links,
+  active
+}) {
+  const {
+    Link
+  } = useComponentAbstraction();
+  return /*#__PURE__*/React.createElement(Container$1, null, links.map((link, index) => /*#__PURE__*/React.createElement(Link, {
+    to: link.to,
+    key: index
+  }, /*#__PURE__*/React.createElement(LinkItem, {
+    "aria-current": link.id === active || undefined
+  }, link.text))));
+}
+function LeftMenuContent({
+  links
+}) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, links.map((link, index) => /*#__PURE__*/React.createElement(MenuListLinkItem, {
+    link: link.to,
+    key: index,
+    primary: link.text
+  })));
+}
+const Container$1 = styled.div(_t$8 || (_t$8 = _$7`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`)),_t=p.div(Zt||(Zt=Gt`
+`));
+const LinkItem = styled.div(_t2$6 || (_t2$6 = _$7`
   display: flex;
   align-items: center;
   color: ${0};
@@ -318,13 +1133,59 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
     color: ${0};
     background-color: ${0};
   }
-`),({theme:e})=>e.color.text3,({theme:e})=>e.color.text2,({theme:e})=>e.color.text2,({theme:e})=>e.color.surface3);let Vt,Jt,Xt,qt,Kt,Yt,Qt,en,tn,nn,rn=e=>e;const on=["gtmClass","flex","rowReverse","children","disabled"];var ln=e.forwardRef(function(t,n){let{gtmClass:r,flex:o=!1,rowReverse:i=!1,children:l,disabled:a}=t,c=B(t,on);/*#__PURE__*/return e.createElement(cn,{className:void 0!==r?`gtm-${r}`:"",flex:o,rowReverse:i,"aria-disabled":a},/*#__PURE__*/e.createElement(sn,null,/*#__PURE__*/e.createElement(mn,S({},c,{disabled:a,ref:n})),/*#__PURE__*/e.createElement(dn,null,/*#__PURE__*/e.createElement(un,null))),null!=l&&/*#__PURE__*/e.createElement(an,{rowReverse:i},l))});const an=p.span(Vt||(Vt=rn`
+`), ({
+  theme
+}) => theme.color.text3, ({
+  theme
+}) => theme.color.text2, ({
+  theme
+}) => theme.color.text2, ({
+  theme
+}) => theme.color.surface3);
+
+let _$6 = t => t,
+    _t$7,
+    _t2$5,
+    _t3$5,
+    _t4$4,
+    _t5$3,
+    _t6$2,
+    _t7$2,
+    _t8$2,
+    _t9$2,
+    _t10$2;
+
+const _excluded$1 = ["gtmClass", "flex", "rowReverse", "children", "disabled"];
+var index$2 = React.forwardRef(function SwitchCheckbox(_ref, ref) {
+  let {
+    gtmClass,
+    flex = false,
+    rowReverse = false,
+    children,
+    disabled
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  return /*#__PURE__*/React.createElement(Label, {
+    className: gtmClass !== undefined ? `gtm-${gtmClass}` : '',
+    flex: flex,
+    rowReverse: rowReverse,
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React.createElement(SwitchOuter, null, /*#__PURE__*/React.createElement(SwitchInput, _extends({}, props, {
+    disabled: disabled,
+    ref: ref
+  })), /*#__PURE__*/React.createElement(SwitchInner, null, /*#__PURE__*/React.createElement(SwitchInnerKnob, null))), children != null && /*#__PURE__*/React.createElement(Children, {
+    rowReverse: rowReverse
+  }, children));
+});
+const Children = styled.span(_t$7 || (_t$7 = _$6`
   ${0}
-`),e=>h(e.rowReverse?Jt||(Jt=rn`
+`), p => p.rowReverse ? css(_t2$5 || (_t2$5 = _$6`
           margin-right: 8px;
-        `):Xt||(Xt=rn`
+        `)) : css(_t3$5 || (_t3$5 = _$6`
           margin-left: 8px;
-        `))),cn=p.label(qt||(qt=rn`
+        `)));
+const Label = styled.label(_t4$4 || (_t4$4 = _$6`
   display: inline-flex;
   align-items: center;
   ${0}
@@ -335,16 +1196,22 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   &[aria-disabled='true'] {
     cursor: auto;
   }
-`),({flex:e})=>e&&h(Kt||(Kt=rn`
+`), ({
+  flex
+}) => flex && css(_t5$3 || (_t5$3 = _$6`
       display: flex;
       justify-content: space-between;
-    `)),({rowReverse:e})=>h(Yt||(Yt=rn`
+    `)), ({
+  rowReverse
+}) => css(_t6$2 || (_t6$2 = _$6`
       flex-direction: ${0};
-    `),e?"row-reverse":"row")),sn=p.span(Qt||(Qt=rn`
+    `), rowReverse ? 'row-reverse' : 'row'));
+const SwitchOuter = styled.span(_t7$2 || (_t7$2 = _$6`
   display: inline-flex;
   position: relative;
   z-index: 0;
-`)),dn=p.div(en||(en=rn`
+`));
+const SwitchInner = styled.div(_t8$2 || (_t8$2 = _$6`
   position: relative;
   box-sizing: border-box;
   width: 28px;
@@ -353,7 +1220,10 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   border: 2px solid transparent;
   background: ${0};
   transition: box-shadow 0.2s, background-color 0.2s;
-`),({theme:e})=>e.color.text4),un=p.div(tn||(tn=rn`
+`), ({
+  theme
+}) => theme.color.text4);
+const SwitchInnerKnob = styled.div(_t9$2 || (_t9$2 = _$6`
   position: absolute;
   display: block;
   top: 0;
@@ -364,7 +1234,12 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   border-radius: 50%;
   transform: translateX(0);
   transition: transform 0.2s;
-`),({theme:e})=>e.color.text5),mn=p.input.attrs({type:"checkbox"})(nn||(nn=rn`
+`), ({
+  theme
+}) => theme.color.text5);
+const SwitchInput = styled.input.attrs({
+  type: 'checkbox'
+})(_t10$2 || (_t10$2 = _$6`
   position: absolute;
   /* NOTE: this is contained by the GraphicCheckboxOuter */
   z-index: 1;
@@ -403,41 +1278,113 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
         ${0};
     }
   }
-`),dn,({theme:e})=>e.color.brand,un,dn,({theme:e})=>e.elementEffect.disabled.opacity,dn,({theme:e})=>w(e.color.brand,e.elementEffect.disabled));let pn,hn,fn,gn,xn,bn,vn,$n,wn,yn,kn,En,Cn,zn=e=>e;var Ln=e.memo(function({children:t,icon:n,show:r=!0,prefix:o=!1,width:i,fit:l=!1,fixed:a=!1}){const c=l?void 0===i?/*#__PURE__*/e.createElement(Mn,{show:r,pre:o},n):/*#__PURE__*/e.createElement(jn,{width:i,show:r,pre:o},/*#__PURE__*/e.createElement(An,null,n)):/*#__PURE__*/e.createElement(Tn,{show:r,pre:o},/*#__PURE__*/e.createElement(Hn,null,n));/*#__PURE__*/return e.createElement(Rn,null,o&&c,/*#__PURE__*/e.createElement(On,{fixed:a},t),!o&&c)});const Rn=p.div(pn||(pn=zn`
+`), SwitchInner, ({
+  theme
+}) => theme.color.brand, SwitchInnerKnob, SwitchInner, ({
+  theme
+}) => theme.elementEffect.disabled.opacity, SwitchInner, ({
+  theme
+}) => applyEffect(theme.color.brand, theme.elementEffect.disabled));
+
+let _$5 = t => t,
+    _t$6,
+    _t2$4,
+    _t3$4,
+    _t4$3,
+    _t5$2,
+    _t6$1,
+    _t7$1,
+    _t8$1,
+    _t9$1,
+    _t10$1,
+    _t11,
+    _t12,
+    _t13;
+var index$1 = React.memo(function WithIcon({
+  children,
+  icon,
+  show = true,
+  prefix: pre = false,
+  width,
+  fit = false,
+  fixed = false
+}) {
+  const node = fit ? width === undefined ? /*#__PURE__*/React.createElement(AutoWidthIconAnchor, {
+    show: show,
+    pre: pre
+  }, icon) : /*#__PURE__*/React.createElement(IconAnchor, {
+    width: width,
+    show: show,
+    pre: pre
+  }, /*#__PURE__*/React.createElement(Icon$1, null, icon)) : /*#__PURE__*/React.createElement(IconAnchorNaive, {
+    show: show,
+    pre: pre
+  }, /*#__PURE__*/React.createElement(IconNaive, null, icon));
+  return /*#__PURE__*/React.createElement(Root, null, pre && node, /*#__PURE__*/React.createElement(Text$1, {
+    fixed: fixed
+  }, children), !pre && node);
+});
+const Root = styled.div(_t$6 || (_t$6 = _$5`
   display: flex;
   align-items: center;
-`)),On=p.div(hn||(hn=zn`
+`));
+const Text$1 = styled.div(_t2$4 || (_t2$4 = _$5`
   ${0}
   white-space: nowrap;
   text-overflow: ellipsis;
-`),e=>!e.fixed&&h(fn||(fn=zn`
+`), p => !p.fixed && css(_t3$4 || (_t3$4 = _$5`
       min-width: 0;
       overflow: hidden;
-    `)));function Mn({children:t,show:n,pre:r}){var o,i;const a=l(null),c=null!=(o=null==(i=ye(a,[null]))?void 0:i.width)?o:0;/*#__PURE__*/return e.createElement(jn,{width:c,show:n,pre:r},/*#__PURE__*/e.createElement(An,{ref:a},t))}const Sn=h(gn||(gn=zn`
+    `)));
+
+function AutoWidthIconAnchor({
+  children,
+  show,
+  pre
+}) {
+  var _useElementSize$width, _useElementSize;
+
+  const ref = useRef(null); // depsを空配列にしないことで初回だけ同期で幅を計算させるテクニック
+
+  const width = (_useElementSize$width = (_useElementSize = useElementSize(ref, [null])) == null ? void 0 : _useElementSize.width) != null ? _useElementSize$width : 0;
+  return /*#__PURE__*/React.createElement(IconAnchor, {
+    width: width,
+    show: show,
+    pre: pre
+  }, /*#__PURE__*/React.createElement(Icon$1, {
+    ref: ref
+  }, children));
+}
+
+const forceCenteringCss = css(_t4$3 || (_t4$3 = _$5`
   > svg {
     display: block;
   }
-`)),Bn=h(xn||(xn=zn`
+`));
+const iconAnchorCss = css(_t5$2 || (_t5$2 = _$5`
   ${0};
   ${0}
-`),e=>"collapse"===e.show?h(bn||(bn=zn`
+`), p => p.show === 'collapse' ? css(_t6$1 || (_t6$1 = _$5`
           display: none;
-        `)):h(vn||(vn=zn`
+        `)) : css(_t7$1 || (_t7$1 = _$5`
           visibility: ${0};
-        `),e.show?"visible":"hidden"),e=>h(e.pre?$n||($n=zn`
+        `), p.show ? 'visible' : 'hidden'), p => p.pre ? css(_t8$1 || (_t8$1 = _$5`
           margin-right: 4px;
-        `):wn||(wn=zn`
+        `)) : css(_t9$1 || (_t9$1 = _$5`
           margin-left: 4px;
-        `))),Tn=p.div(yn||(yn=zn`
+        `)));
+const IconAnchorNaive = styled.div(_t10$1 || (_t10$1 = _$5`
   display: flex;
   align-items: center;
 
   ${0}
-`),Bn),Hn=p.div(kn||(kn=zn`
+`), iconAnchorCss);
+const IconNaive = styled.div(_t11 || (_t11 = _$5`
   display: inline-flex;
 
   ${0}
-`),Sn),jn=p.div(En||(En=zn`
+`), forceCenteringCss);
+const IconAnchor = styled.div(_t12 || (_t12 = _$5`
   display: flex;
   position: relative;
   /* Iconをline-heightに関与させない */
@@ -446,13 +1393,138 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   width: ${0}px;
 
   ${0}
-`),e=>e.width,Bn),An=p.div(Cn||(Cn=zn`
+`), p => p.width, iconAnchorCss);
+const Icon$1 = styled.div(_t13 || (_t13 = _$5`
   display: inline-flex;
   position: absolute;
   transform: translateY(-50%);
 
   ${0}
-`),Sn);var Nn,In;function Pn(e){throw new Error(0===arguments.length?"unreachable":`unreachable (${JSON.stringify(e)})`)}function Wn({direction:t}){const n=function(e){switch(e){case In.Up:return"rotate(270 12 12)";case In.Down:return"rotate(90 12 12)";case In.Left:return"rotate(180 12 12)";case In.Right:return;default:return Pn(e)}}(t);/*#__PURE__*/return e.createElement(te,{viewBoxSize:24,size:24,currentColor:!0,path:"M8.08579 16.5858C7.30474 17.3668 7.30474 18.6332 8.08579 19.4142C8.86684 20.1953 10.1332 20.1953 10.9142 19.4142L18.3284 12L10.9142 4.58579C10.1332 3.80474 8.86684 3.80474 8.08579 4.58579C7.30474 5.36684 7.30474 6.63317 8.08579 7.41421L12.6716 12L8.08579 16.5858Z",transform:n})}!function(e){e.Up="up",e.Down="down",e.Left="left",e.Right="right"}(In||(In={}));let Zn,Gn,Fn,Dn,Un,_n=e=>e;var Vn;function Jn({direction:t,show:n,offset:r=0,padding:o=0,bottomOffset:i=0,gradient:l=!1,onClick:a}){const c=t===Vn.Left?{left:l?r-72:r,paddingLeft:Math.max(o,0),paddingBottom:i}:{right:l?r-72:r,paddingRight:Math.max(o,0),paddingBottom:i};/*#__PURE__*/return e.createElement(qn,{type:"button",onClick:a,hide:!n,style:c,css:Kn},/*#__PURE__*/e.createElement(Xn,null,/*#__PURE__*/e.createElement(Wn,{direction:t===Vn.Right?In.Right:t===Vn.Left?In.Left:Pn()})))}!function(e){e.Right="right",e.Left="left"}(Vn||(Vn={}));const Xn=p.div(Zn||(Zn=_n`
+`), forceCenteringCss);
+
+var passiveEventsResult; // eslint-disable-line no-var
+
+function passiveEvents() {
+  if (passiveEventsResult !== undefined) {
+    return passiveEventsResult;
+  }
+
+  passiveEventsResult = false;
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const options = Object.defineProperty({}, 'passive', {
+      get() {
+        return passiveEventsResult = true;
+      }
+
+    });
+    window.addEventListener('test', test, options);
+    window.removeEventListener('test', test);
+  } catch (_unused) {// test fail
+  }
+
+  return passiveEventsResult;
+
+  function test() {
+    /* empty */
+  }
+}
+const isEdge = () => navigator.userAgent.includes('Edge/');
+
+function unreachable(value) {
+  throw new Error(arguments.length === 0 ? 'unreachable' : `unreachable (${JSON.stringify(value)})`);
+}
+
+var WedgeDirection$1;
+
+(function (WedgeDirection) {
+  WedgeDirection["Up"] = "up";
+  WedgeDirection["Down"] = "down";
+  WedgeDirection["Left"] = "left";
+  WedgeDirection["Right"] = "right";
+})(WedgeDirection$1 || (WedgeDirection$1 = {})); // eslint-disable-next-line max-len
+
+
+const path = `M8.08579 16.5858C7.30474 17.3668 7.30474 18.6332 8.08579 19.4142C8.86684 20.1953 10.1332 20.1953 10.9142 19.4142L18.3284 12L10.9142 4.58579C10.1332 3.80474 8.86684 3.80474 8.08579 4.58579C7.30474 5.36684 7.30474 6.63317 8.08579 7.41421L12.6716 12L8.08579 16.5858Z`;
+const size = 24;
+function NextIcon({
+  direction
+}) {
+  const transform = directionToTransform$1(direction);
+  return /*#__PURE__*/React.createElement(IconBase, {
+    viewBoxSize: size,
+    size: size,
+    currentColor: true,
+    path: path,
+    transform: transform
+  });
+}
+
+function directionToTransform$1(direction) {
+  // "5 4" is the center point of the "0 0 10 8" viewBox
+  switch (direction) {
+    case WedgeDirection$1.Up:
+      return 'rotate(270 12 12)';
+
+    case WedgeDirection$1.Down:
+      return 'rotate(90 12 12)';
+
+    case WedgeDirection$1.Left:
+      return 'rotate(180 12 12)';
+
+    case WedgeDirection$1.Right:
+      return undefined;
+
+    default:
+      return unreachable(direction);
+  }
+}
+
+let _$4 = t => t,
+    _t$5,
+    _t2$3,
+    _t3$3,
+    _t4$2,
+    _t5$1;
+var Direction;
+
+(function (Direction) {
+  Direction["Right"] = "right";
+  Direction["Left"] = "left";
+})(Direction || (Direction = {}));
+
+function CarouselButton({
+  direction,
+  show,
+  offset = 0,
+  padding = 0,
+  bottomOffset: bottom = 0,
+  gradient = false,
+  onClick
+}) {
+  const offsetStyle = direction === Direction.Left ? {
+    left: gradient ? offset - 72 : offset,
+    paddingLeft: Math.max(padding, 0),
+    paddingBottom: bottom
+  } : {
+    right: gradient ? offset - 72 : offset,
+    paddingRight: Math.max(padding, 0),
+    paddingBottom: bottom
+  };
+  return /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    onClick: onClick,
+    hide: !show,
+    style: offsetStyle,
+    css: onlyNonTouchDevice
+  }, /*#__PURE__*/React.createElement(CarouselButtonIcon, null, /*#__PURE__*/React.createElement(NextIcon, {
+    direction: direction === Direction.Right ? WedgeDirection$1.Right : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    direction === Direction.Left ? WedgeDirection$1.Left : unreachable()
+  })));
+}
+const CAROUSEL_BUTTON_SIZE = 40;
+const CarouselButtonIcon = styled.div(_t$5 || (_t$5 = _$4`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -462,7 +1534,12 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   background-color: ${0};
   transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;
   color: ${0};
-`),40,40,({theme:e})=>e.color.surface4,({theme:e})=>e.color.text5),qn=p.button(Gn||(Gn=_n`
+`), CAROUSEL_BUTTON_SIZE, CAROUSEL_BUTTON_SIZE, ({
+  theme
+}) => theme.color.surface4, ({
+  theme
+}) => theme.color.text5);
+const Button = styled.button(_t2$3 || (_t2$3 = _$4`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -490,11 +1567,20 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   }
 
   ${0}
-`),Xn,({theme:e})=>w(e.color.surface4,e.effect.hover),({theme:e})=>w(e.color.text5,e.effect.hover),Xn,({theme:e})=>w(e.color.surface4,e.effect.press),({theme:e})=>w(e.color.text5,e.effect.press),e=>e.hide&&h(Fn||(Fn=_n`
+`), CarouselButtonIcon, ({
+  theme
+}) => applyEffect(theme.color.surface4, theme.effect.hover), ({
+  theme
+}) => applyEffect(theme.color.text5, theme.effect.hover), CarouselButtonIcon, ({
+  theme
+}) => applyEffect(theme.color.surface4, theme.effect.press), ({
+  theme
+}) => applyEffect(theme.color.text5, theme.effect.press), p => p.hide && css(_t3$3 || (_t3$3 = _$4`
       visibility: hidden;
       opacity: 0;
       pointer-events: none;
-    `)));p(Xn)(Dn||(Dn=_n`
+    `)));
+styled(CarouselButtonIcon)(_t4$2 || (_t4$2 = _$4`
   cursor: pointer;
 
   &:hover {
@@ -506,11 +1592,280 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
     background-color: ${0};
     color: ${0};
   }
-`),({theme:e})=>w(e.color.surface4,e.effect.hover),({theme:e})=>w(e.color.text5,e.effect.hover),({theme:e})=>w(e.color.surface4,e.effect.press),({theme:e})=>w(e.color.text5,e.effect.press));const Kn=h(Un||(Un=_n`
+`), ({
+  theme
+}) => applyEffect(theme.color.surface4, theme.effect.hover), ({
+  theme
+}) => applyEffect(theme.color.text5, theme.effect.hover), ({
+  theme
+}) => applyEffect(theme.color.surface4, theme.effect.press), ({
+  theme
+}) => applyEffect(theme.color.text5, theme.effect.press));
+const onlyNonTouchDevice = css(_t5$1 || (_t5$1 = _$4`
   @media (hover: none) and (pointer: coarse) {
     display: none;
   }
-`));let Yn,Qn,er,tr,nr,rr,or,ir,lr,ar,cr=e=>e;const sr=["buttonOffset","buttonPadding","bottomOffset","defaultScroll","onScroll","onResize","children","centerItems","onScrollStateChange","scrollAmountCoef"],dr=.75;function ur(t){let{buttonOffset:o=0,buttonPadding:i=16,bottomOffset:c=0,defaultScroll:{align:s="left",offset:d=0}={},onScroll:m,onResize:p,children:h,centerItems:f,onScrollStateChange:g,scrollAmountCoef:x=dr}=t,b=B(t,sr);const[v,$]=function(e){const[t,r]=n(0),o=l();return[t,a((e,t=!1)=>{t?r(e):void 0===o.current&&(o.current=requestAnimationFrame(()=>{r(e),void 0!==o.current&&(o.current=void 0)}))},[])]}(),w=l(!1),[y,k]=n(0),[E,C]=n(!1),[z,L]=n(!1),[O,M]=R(()=>({scroll:0})),S=l(null),T=l(null),H=l(null),j=a(()=>{if(null===T.current)return;const{clientWidth:e}=T.current,t=Math.min(v+e*x,y);$(t,!0),M({scroll:t,from:{scroll:v},reset:!w.current}),w.current=!0},[w,y,v,M,x,$]),A=a(()=>{if(null===T.current)return;const{clientWidth:e}=T.current,t=Math.max(v-e*x,0);$(t,!0),M({scroll:t,from:{scroll:v},reset:!w.current}),w.current=!0},[w,v,M,x,$]);u(()=>{const e=v>0,t=v<y&&y>0;e===E&&t===z||(C(e),L(t),null==g||g(e||t))},[E,y,g,z,v]);const N=a(()=>{null!==S.current&&(w.current&&(O.scroll.stop(),w.current=!1),$(S.current.scrollLeft))},[w,$,O]),I=a(()=>{if(null===S.current)return;const{clientWidth:e,scrollWidth:t}=S.current;k(t-e),p&&p(e)},[p]),P=l(new ResizeObserver(I)),W=l(new ResizeObserver(I));r(()=>{const e=S.current,t=H.current;if(null===e||null===t)return;e.addEventListener("wheel",N,function(){if(void 0!==Nn)return Nn;Nn=!1;try{const t=Object.defineProperty({},"passive",{get:()=>Nn=!0});window.addEventListener("test",e,t),window.removeEventListener("test",e)}catch(e){}return Nn;function e(){}}()&&{passive:!0});const n=P.current;n.observe(e);const r=W.current;return r.observe(t),()=>{e.removeEventListener("wheel",N),n.disconnect(),r.disconnect()}},[I,N]),r(()=>{if("left"!==s||0!==d){const e=S.current;if(null!==e){const t=Math.max(0,Math.min("left"===s&&d>0?d:"center"===s?y/2+d:"right"===s&&d<=y?y-d/2:0,y));e.scrollLeft=t,$(t,!0)}}},[S.current]);const Z=a(()=>{null!==S.current&&m&&m(S.current.scrollLeft)},[m]),[G,F]=n(!1);if(r(()=>{navigator.userAgent.includes("Edge/")&&F(!0)},[]),!G&&!0===b.hasGradient){var D;const t=null!=(D=b.fadeInGradient)&&D,n=!t;/*#__PURE__*/return e.createElement(hr,{ref:T},/*#__PURE__*/e.createElement(gr,{fadeInGradient:t},/*#__PURE__*/e.createElement(xr,null,/*#__PURE__*/e.createElement(br,{show:n||v>0},/*#__PURE__*/e.createElement(fr,{ref:S,scrollLeft:O.scroll,onScroll:Z},/*#__PURE__*/e.createElement(mr,{ref:H,centerItems:f},h))))),/*#__PURE__*/e.createElement(pr,null,/*#__PURE__*/e.createElement(Jn,{direction:Vn.Left,show:E,offset:o,bottomOffset:c,padding:i,gradient:n,onClick:A}),/*#__PURE__*/e.createElement(Jn,{direction:Vn.Right,show:z,offset:o,bottomOffset:c,padding:i,gradient:!0,onClick:j})))}/*#__PURE__*/return e.createElement(hr,{ref:T},/*#__PURE__*/e.createElement(fr,{ref:S,scrollLeft:O.scroll,onScroll:Z},/*#__PURE__*/e.createElement(mr,{ref:H,centerItems:f},h)),/*#__PURE__*/e.createElement(pr,null,/*#__PURE__*/e.createElement(Jn,{direction:Vn.Left,show:E,offset:o,bottomOffset:c,padding:i,onClick:A}),/*#__PURE__*/e.createElement(Jn,{direction:Vn.Right,show:z,offset:o,bottomOffset:c,padding:i,onClick:j})))}const mr=p.ul(Yn||(Yn=cr`
+`));
+
+let _$3 = t => t,
+    _t$4,
+    _t2$2,
+    _t3$2,
+    _t4$1,
+    _t5,
+    _t6,
+    _t7,
+    _t8,
+    _t9,
+    _t10;
+
+const _excluded = ["buttonOffset", "buttonPadding", "bottomOffset", "defaultScroll", "onScroll", "onResize", "children", "centerItems", "onScrollStateChange", "scrollAmountCoef"];
+const GRADIENT_WIDTH = 72;
+/**
+ * カルーセル系のスクロール量の定数
+ *
+ * @example
+ * const scrollAmount = containerElm.clientWidth * SCROLL_AMOUNT_COEF
+ */
+
+const SCROLL_AMOUNT_COEF = 0.75;
+function Carousel(_ref) {
+  let {
+    buttonOffset = 0,
+    buttonPadding = 16,
+    bottomOffset = 0,
+    defaultScroll: {
+      align = 'left',
+      offset: scrollOffset = 0
+    } = {},
+    onScroll,
+    onResize,
+    children,
+    centerItems,
+    onScrollStateChange,
+    scrollAmountCoef = SCROLL_AMOUNT_COEF
+  } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  // スクロール位置を保存する
+  // アニメーション中の場合は、アニメーション終了時のスクロール位置が保存される
+  const [scrollLeft, setScrollLeft] = useDebounceAnimationState(0); // アニメーション中かどうか
+
+  const animation = useRef(false); // スクロール可能な領域を保存する
+
+  const [maxScrollLeft, setMaxScrollLeft] = useState(0); // 左右のボタンの表示状態を保存する
+
+  const [leftShow, setLeftShow] = useState(false);
+  const [rightShow, setRightShow] = useState(false); // const [props, set, stop] = useSpring(() => ({
+  //   scroll: 0
+  // }))
+
+  const [styles, set] = useSpring(() => ({
+    scroll: 0
+  }));
+  const ref = useRef(null);
+  const visibleAreaRef = useRef(null);
+  const innerRef = useRef(null);
+  const handleRight = useCallback(() => {
+    if (visibleAreaRef.current === null) {
+      return;
+    }
+
+    const {
+      clientWidth
+    } = visibleAreaRef.current; // スクロール領域を超えないように、アニメーションを開始
+    // アニメーション中にアニメーションが開始されたときに、アニメーション終了予定の位置から再度計算するようにする
+
+    const scroll = Math.min(scrollLeft + clientWidth * scrollAmountCoef, maxScrollLeft);
+    setScrollLeft(scroll, true);
+    set({
+      scroll,
+      from: {
+        scroll: scrollLeft
+      },
+      reset: !animation.current
+    });
+    animation.current = true;
+  }, [animation, maxScrollLeft, scrollLeft, set, scrollAmountCoef, setScrollLeft]);
+  const handleLeft = useCallback(() => {
+    if (visibleAreaRef.current === null) {
+      return;
+    }
+
+    const {
+      clientWidth
+    } = visibleAreaRef.current;
+    const scroll = Math.max(scrollLeft - clientWidth * scrollAmountCoef, 0);
+    setScrollLeft(scroll, true);
+    set({
+      scroll,
+      from: {
+        scroll: scrollLeft
+      },
+      reset: !animation.current
+    });
+    animation.current = true;
+  }, [animation, scrollLeft, set, scrollAmountCoef, setScrollLeft]); // スクロール可能な場合にボタンを表示する
+  // scrollLeftが変化したときに処理する (アニメーション開始時 & 手動スクロール時)
+
+  useEffect(() => {
+    const newleftShow = scrollLeft > 0;
+    const newrightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0;
+
+    if (newleftShow !== leftShow || newrightShow !== rightShow) {
+      setLeftShow(newleftShow);
+      setRightShow(newrightShow);
+      onScrollStateChange == null ? void 0 : onScrollStateChange(newleftShow || newrightShow);
+    }
+  }, [leftShow, maxScrollLeft, onScrollStateChange, rightShow, scrollLeft]);
+  const handleScroll = useCallback(() => {
+    if (ref.current === null) {
+      return;
+    } // 手動でスクロールが開始されたときにアニメーションを中断
+
+
+    if (animation.current) {
+      styles.scroll.stop();
+      animation.current = false;
+    } // スクロール位置を保存 (アニメーションの基準になる)
+
+
+    const manualScrollLeft = ref.current.scrollLeft; // 過剰にsetStateが走らないようにDebouceする
+
+    setScrollLeft(manualScrollLeft);
+  }, [animation, setScrollLeft, styles]); // リサイズが起きたときに、アニメーション用のスクロール領域 & ボタンの表示状態 を再計算する
+
+  const handleResize = useCallback(() => {
+    if (ref.current === null) {
+      return;
+    }
+
+    const {
+      clientWidth,
+      scrollWidth
+    } = ref.current;
+    const newMaxScrollLeft = scrollWidth - clientWidth;
+    setMaxScrollLeft(newMaxScrollLeft);
+
+    if (onResize) {
+      onResize(clientWidth);
+    }
+  }, [onResize]);
+  useLayoutEffect(() => {
+    const elm = ref.current;
+    const innerElm = innerRef.current;
+
+    if (elm === null || innerElm === null) {
+      return;
+    }
+
+    elm.addEventListener('wheel', handleScroll, passiveEvents() && {
+      passive: true
+    });
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(elm);
+    const resizeObserverInner = new ResizeObserver(handleResize);
+    resizeObserverInner.observe(innerElm);
+    return () => {
+      elm.removeEventListener('wheel', handleScroll);
+      resizeObserver.disconnect();
+      resizeObserverInner.disconnect();
+    };
+  }, [handleResize, handleScroll]); // 初期スクロールを行う
+
+  useLayoutEffect(() => {
+    if (align !== 'left' || scrollOffset !== 0) {
+      const scroll = ref.current;
+
+      if (scroll !== null) {
+        const scrollLength = Math.max(0, Math.min(align === 'left' && scrollOffset > 0 ? scrollOffset : align === 'center' ? maxScrollLeft / 2 + scrollOffset : align === 'right' && scrollOffset <= maxScrollLeft ? maxScrollLeft - scrollOffset / 2 : 0, maxScrollLeft));
+        scroll.scrollLeft = scrollLength;
+        setScrollLeft(scrollLength, true);
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [ref.current]);
+  const handleScrollMove = useCallback(() => {
+    if (ref.current === null) {
+      return;
+    }
+
+    if (onScroll) {
+      onScroll(ref.current.scrollLeft);
+    }
+  }, [onScroll]);
+  const [disableGradient, setDisableGradient] = useState(false);
+  useLayoutEffect(() => {
+    if (isEdge()) {
+      setDisableGradient(true);
+    }
+  }, []); // NOTE: Edgeではmaskを使うと要素のレンダリングがバグる（場合によっては画像が表示されない）のでグラデーションを無効にする
+
+  if (!disableGradient && options.hasGradient === true) {
+    var _options$fadeInGradie;
+
+    const fadeInGradient = (_options$fadeInGradie = options.fadeInGradient) != null ? _options$fadeInGradie : false;
+    const overflowGradient = !fadeInGradient;
+    return /*#__PURE__*/React.createElement(Container, {
+      ref: visibleAreaRef
+    }, /*#__PURE__*/React.createElement(GradientContainer, {
+      fadeInGradient: fadeInGradient
+    }, /*#__PURE__*/React.createElement(RightGradient, null, /*#__PURE__*/React.createElement(LeftGradient, {
+      show: overflowGradient || scrollLeft > 0
+    }, /*#__PURE__*/React.createElement(ScrollArea, {
+      ref: ref,
+      scrollLeft: styles.scroll,
+      onScroll: handleScrollMove
+    }, /*#__PURE__*/React.createElement(CarouselContainer, {
+      ref: innerRef,
+      centerItems: centerItems
+    }, children))))), /*#__PURE__*/React.createElement(ButtonsContainer, null, /*#__PURE__*/React.createElement(CarouselButton, {
+      direction: Direction.Left,
+      show: leftShow,
+      offset: buttonOffset,
+      bottomOffset: bottomOffset,
+      padding: buttonPadding,
+      gradient: overflowGradient,
+      onClick: handleLeft
+    }), /*#__PURE__*/React.createElement(CarouselButton, {
+      direction: Direction.Right,
+      show: rightShow,
+      offset: buttonOffset,
+      bottomOffset: bottomOffset,
+      padding: buttonPadding,
+      gradient: true,
+      onClick: handleRight
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(Container, {
+    ref: visibleAreaRef
+  }, /*#__PURE__*/React.createElement(ScrollArea // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  , {
+    ref: ref,
+    scrollLeft: styles.scroll,
+    onScroll: handleScrollMove
+  }, /*#__PURE__*/React.createElement(CarouselContainer, {
+    ref: innerRef,
+    centerItems: centerItems
+  }, children)), /*#__PURE__*/React.createElement(ButtonsContainer, null, /*#__PURE__*/React.createElement(CarouselButton, {
+    direction: Direction.Left,
+    show: leftShow,
+    offset: buttonOffset,
+    bottomOffset: bottomOffset,
+    padding: buttonPadding,
+    onClick: handleLeft
+  }), /*#__PURE__*/React.createElement(CarouselButton, {
+    direction: Direction.Right,
+    show: rightShow,
+    offset: buttonOffset,
+    bottomOffset: bottomOffset,
+    padding: buttonPadding,
+    onClick: handleRight
+  })));
+}
+const CarouselContainer = styled.ul(_t$4 || (_t$4 = _$3`
   vertical-align: top;
   overflow: hidden;
   list-style: none;
@@ -521,17 +1876,21 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   box-sizing: border-box;
 
   ${0}
-`),({centerItems:e=!1})=>h(e?Qn||(Qn=cr`
+`), ({
+  centerItems: _centerItems = false
+}) => _centerItems ? css(_t2$2 || (_t2$2 = _$3`
           display: flex;
           width: max-content;
           margin: 0 auto;
-        `):er||(er=cr`
+        `)) : css(_t3$2 || (_t3$2 = _$3`
           display: inline-flex;
           margin: 0;
-        `))),pr=p.div(tr||(tr=cr`
+        `)));
+const ButtonsContainer = styled.div(_t4$1 || (_t4$1 = _$3`
   opacity: 0;
   transition: 0.4s opacity;
-`)),hr=p.div(nr||(nr=cr`
+`));
+const Container = styled.div(_t5 || (_t5 = _$3`
   &:hover ${0} {
     opacity: 1;
   }
@@ -539,7 +1898,8 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */
   position: relative;
   z-index: 0;
-`),pr),fr=p(L.div)(rr||(rr=cr`
+`), ButtonsContainer);
+const ScrollArea = styled(animated.div)(_t6 || (_t6 = _$3`
   overflow-x: auto;
   padding: 0;
   margin: 0;
@@ -549,7 +1909,8 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   }
 
   scrollbar-width: none;
-`)),gr=p.div(or||(or=cr`
+`));
+const GradientContainer = styled.div(_t7 || (_t7 = _$3`
   /* NOTE: LeftGradientがはみ出るためhidden */
   overflow: hidden;
   ${0}
@@ -559,18 +1920,20 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   ${0} {
     padding-right: ${0}px;
   }
-`),e=>!e.fadeInGradient&&h(ir||(ir=cr`
+`), p => !p.fadeInGradient && css(_t8 || (_t8 = _$3`
       margin-left: ${0}px;
       ${0} {
         padding-left: ${0}px;
       }
-    `),-72,mr,72),-72,mr,72),xr=p.div(lr||(lr=cr`
+    `), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
+const RightGradient = styled.div(_t9 || (_t9 = _$3`
   mask-image: linear-gradient(
     to right,
     #000 calc(100% - ${0}px),
     transparent
   );
-`),72),br=p.div(ar||(ar=cr`
+`), GRADIENT_WIDTH);
+const LeftGradient = styled.div(_t10 || (_t10 = _$3`
   /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */
   margin-right: ${0}px;
   padding-right: ${0}px;
@@ -578,18 +1941,249 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   transition: 0.2s all ease-in;
   mask: linear-gradient(to right, transparent, #000 ${0}px)
     ${0}px 0;
-`),-72,72,72,e=>e.show?0:-72);let vr;function $r({size:t}){/*#__PURE__*/return e.createElement(wr,{viewBox:"0 0 20 6",width:t,height:t},/*#__PURE__*/e.createElement("path",{fillRule:"evenodd",d:"M5,14.5 C3.61928813,14.5 2.5,13.3807119 2.5,12 C2.5,10.6192881 3.61928813,9.5 5,9.5\n          C6.38071187,9.5 7.5,10.6192881 7.5,12 C7.5,13.3807119 6.38071187,14.5 5,14.5 Z M12,14.5\n          C10.6192881,14.5 9.5,13.3807119 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5\n          C13.3807119,9.5 14.5,10.6192881 14.5,12 C14.5,13.3807119 13.3807119,14.5 12,14.5 Z M19,14.5\n          C17.6192881,14.5 16.5,13.3807119 16.5,12 C16.5,10.6192881 17.6192881,9.5 19,9.5\n          C20.3807119,9.5 21.5,10.6192881 21.5,12 C21.5,13.3807119 20.3807119,14.5 19,14.5 Z",transform:"translate(-2 -9)"}))}$r.defaultProps={size:16};const wr=p.svg(vr||(vr=(e=>e)`
+`), -GRADIENT_WIDTH, GRADIENT_WIDTH, GRADIENT_WIDTH, p => p.show ? 0 : -GRADIENT_WIDTH);
+
+let _$2 = t => t,
+    _t$3;
+
+function DotsIcon({
+  size
+}) {
+  return /*#__PURE__*/React.createElement(StyledSVG, {
+    viewBox: "0 0 20 6",
+    width: size,
+    height: size
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: `M5,14.5 C3.61928813,14.5 2.5,13.3807119 2.5,12 C2.5,10.6192881 3.61928813,9.5 5,9.5
+          C6.38071187,9.5 7.5,10.6192881 7.5,12 C7.5,13.3807119 6.38071187,14.5 5,14.5 Z M12,14.5
+          C10.6192881,14.5 9.5,13.3807119 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5
+          C13.3807119,9.5 14.5,10.6192881 14.5,12 C14.5,13.3807119 13.3807119,14.5 12,14.5 Z M19,14.5
+          C17.6192881,14.5 16.5,13.3807119 16.5,12 C16.5,10.6192881 17.6192881,9.5 19,9.5
+          C20.3807119,9.5 21.5,10.6192881 21.5,12 C21.5,13.3807119 20.3807119,14.5 19,14.5 Z`,
+    transform: "translate(-2 -9)"
+  }));
+}
+
+DotsIcon.defaultProps = {
+  size: 16
+};
+const StyledSVG = styled.svg(_t$3 || (_t$3 = _$2`
   fill: currentColor;
-`));let yr;var kr;function Er({size:t,direction:n}){/*#__PURE__*/return e.createElement("svg",{viewBox:"0 0 10 8",width:t,height:t},/*#__PURE__*/e.createElement(zr,{strokeWidth:"2",points:"1,2 5,6 9,2",transform:Cr(n)}))}function Cr(e){switch(e){case kr.Up:return"rotate(180 5 4)";case kr.Down:return;case kr.Left:return"rotate(90 5 4)";case kr.Right:return"rotate(-90 5 4)";default:return Pn(e)}}!function(e){e.Up="up",e.Down="down",e.Left="left",e.Right="right"}(kr||(kr={})),Er.defaultProps={size:16,white:!1,lightGray:!1};const zr=p.polyline(yr||(yr=(e=>e)`
+`));
+
+let _$1 = t => t,
+    _t$2;
+var WedgeDirection;
+
+(function (WedgeDirection) {
+  WedgeDirection["Up"] = "up";
+  WedgeDirection["Down"] = "down";
+  WedgeDirection["Left"] = "left";
+  WedgeDirection["Right"] = "right";
+})(WedgeDirection || (WedgeDirection = {}));
+
+function WedgeIcon({
+  size,
+  direction
+}) {
+  return (
+    /*#__PURE__*/
+    // NOTE: directionToTransform depends on the value of viewBox
+    React.createElement("svg", {
+      viewBox: "0 0 10 8",
+      width: size,
+      height: size
+    }, /*#__PURE__*/React.createElement(StyledPolyline, {
+      strokeWidth: "2",
+      points: "1,2 5,6 9,2",
+      transform: directionToTransform(direction)
+    }))
+  );
+}
+WedgeIcon.defaultProps = {
+  size: 16,
+  white: false,
+  lightGray: false
+};
+
+function directionToTransform(direction) {
+  // "5 4" is the center point of the "0 0 10 8" viewBox
+  switch (direction) {
+    case WedgeDirection.Up:
+      return 'rotate(180 5 4)';
+
+    case WedgeDirection.Down:
+      return undefined;
+
+    case WedgeDirection.Left:
+      return 'rotate(90 5 4)';
+
+    case WedgeDirection.Right:
+      return 'rotate(-90 5 4)';
+
+    default:
+      return unreachable(direction);
+  }
+}
+
+const StyledPolyline = styled.polyline(_t$2 || (_t$2 = _$1`
   fill: none;
   stroke-linejoin: round;
   stroke-linecap: round;
   stroke: currentColor;
-`));let Lr,Rr,Or,Mr,Sr=e=>e;function Br(e,n,r=7){"production"!==process.env.NODE_ENV&&(O((0|e)===e,`\`page\` must be interger (${e})`),O((0|n)===n,`\`pageCount\` must be interger (${n})`));const i=t(()=>{const t=Math.min(n,Math.max(e+Math.floor(r/2),r));if(t<=r)return Array.from({length:1+t-1},(e,t)=>1+t);{const e=t-(r-1)+2;return[1,"...",...Array.from({length:1+t-e},(t,n)=>e+n)]}},[e,n,r]);return o(i),i}var Tr=e.memo(function({page:t,pageCount:n,onChange:r}){const o=Br(t,n),i=a(e=>()=>{r(e)},[r]),l=t<n,c=t>1;/*#__PURE__*/return e.createElement(jr,null,/*#__PURE__*/e.createElement(Ar,{type:"button",hidden:!c,disabled:!c,onClick:i(Math.max(1,t-1)),noBackground:!0},/*#__PURE__*/e.createElement(Er,{size:16,direction:kr.Left})),o.map(n=>"..."===n?/*#__PURE__*/e.createElement(Nr,{key:n},/*#__PURE__*/e.createElement($r,{size:20})):/*#__PURE__*/e.createElement(Ar,n===t?{key:n,type:"button","aria-current":!0}:{key:n,type:"button",onClick:i(n)},/*#__PURE__*/e.createElement(Ir,null,n))),/*#__PURE__*/e.createElement(Ar,{type:"button",hidden:!l,disabled:!l,onClick:i(Math.min(n,t+1)),noBackground:!0},/*#__PURE__*/e.createElement(Er,{size:16,direction:kr.Right})))});function Hr({page:t,pageCount:n,makeUrl:r}){const{Link:o}=b(),i=Br(t,n),l=t<n,a=t>1;/*#__PURE__*/return e.createElement(jr,null,/*#__PURE__*/e.createElement(o,{to:r(Math.max(1,t-1))},/*#__PURE__*/e.createElement(Ar,{hidden:!a,"aria-disabled":!a,noBackground:!0},/*#__PURE__*/e.createElement(Er,{size:16,direction:kr.Left}))),i.map(n=>"..."===n?/*#__PURE__*/e.createElement(Nr,{key:n},/*#__PURE__*/e.createElement($r,{size:20,subLink:!0})):n===t?/*#__PURE__*/e.createElement(Ar,{key:n,type:"button","aria-current":!0},/*#__PURE__*/e.createElement(Ir,null,n)):/*#__PURE__*/e.createElement(o,{key:n,to:r(n)},/*#__PURE__*/e.createElement(Ar,{type:"button"},/*#__PURE__*/e.createElement(Ir,null,n)))),/*#__PURE__*/e.createElement(o,{to:r(Math.min(n,t+1))},/*#__PURE__*/e.createElement(Ar,{hidden:!l,"aria-disabled":!l,noBackground:!0},/*#__PURE__*/e.createElement(Er,{size:16,direction:kr.Right}))))}const jr=p.nav(Lr||(Lr=Sr`
+`));
+
+let _2 = t => t,
+    _t$1,
+    _t2$1,
+    _t3$1,
+    _t4;
+
+function usePagerWindow(page, pageCount, windowSize = 7) {
+  // ページャーのリンク生成例:
+  //
+  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]
+  //
+  //       [*1*] [ 2 ] >
+  //
+  // デザインの意図: 前後移動時のカーソル移動を最小限にする。
+  if (process.env.NODE_ENV !== 'production') {
+    warning((page | 0) === page, `\`page\` must be interger (${page})`);
+    warning((pageCount | 0) === pageCount, `\`pageCount\` must be interger (${pageCount})`);
+  }
+
+  const window = useMemo(() => {
+    const visibleFirstPage = 1;
+    const visibleLastPage = Math.min(pageCount, Math.max(page + Math.floor(windowSize / 2), windowSize));
+
+    if (visibleLastPage <= windowSize) {
+      // 表示範囲が1-7ページなら省略は無い。
+      return Array.from({
+        length: 1 + visibleLastPage - visibleFirstPage
+      }, (_, i) => visibleFirstPage + i);
+    } else {
+      const start = visibleLastPage - (windowSize - 1) + 2;
+      return [// 表示範囲が1-7ページを超えるなら、
+      // - 1ページ目は固定で表示する
+      visibleFirstPage, // - 2ページ目から現在のページの直前までは省略する
+      '...', ...Array.from({
+        length: 1 + visibleLastPage - start
+      }, (_, i) => start + i)];
+    }
+  }, [page, pageCount, windowSize]);
+  useDebugValue(window);
+  return window;
+} // this pager is just regular buttons; for links use LinkPager
+
+
+var index = React.memo(function Pager({
+  page,
+  pageCount,
+  onChange
+}) {
+  // TODO: refactor Pager and LinkPager to use a common parent component
+  const window = usePagerWindow(page, pageCount);
+  const makeClickHandler = useCallback(value => () => {
+    onChange(value);
+  }, [onChange]);
+  const hasNext = page < pageCount;
+  const hasPrev = page > 1;
+  return /*#__PURE__*/React.createElement(PagerContainer, null, /*#__PURE__*/React.createElement(CircleButton, {
+    type: "button",
+    hidden: !hasPrev,
+    disabled: !hasPrev,
+    onClick: makeClickHandler(Math.max(1, page - 1)),
+    noBackground: true
+  }, /*#__PURE__*/React.createElement(WedgeIcon, {
+    size: 16,
+    direction: WedgeDirection.Left
+  })), window.map(p => p === '...' ? /*#__PURE__*/React.createElement(Spacer, {
+    key: p
+  }, /*#__PURE__*/React.createElement(DotsIcon, {
+    size: 20
+  })) : p === page ?
+  /*#__PURE__*/
+  // we remove the onClick but don't mark it as disabled to preserve keyboard focus
+  // not doing so causes the focus ring to flicker in and out of existence
+  React.createElement(CircleButton, {
+    key: p,
+    type: "button",
+    "aria-current": true
+  }, /*#__PURE__*/React.createElement(Text, null, p)) : /*#__PURE__*/React.createElement(CircleButton, {
+    key: p,
+    type: "button",
+    onClick: makeClickHandler(p)
+  }, /*#__PURE__*/React.createElement(Text, null, p))), /*#__PURE__*/React.createElement(CircleButton, {
+    type: "button",
+    hidden: !hasNext,
+    disabled: !hasNext,
+    onClick: makeClickHandler(Math.min(pageCount, page + 1)),
+    noBackground: true
+  }, /*#__PURE__*/React.createElement(WedgeIcon, {
+    size: 16,
+    direction: WedgeDirection.Right
+  })));
+});
+function LinkPager({
+  page,
+  pageCount,
+  makeUrl
+}) {
+  const {
+    Link
+  } = useComponentAbstraction();
+  const window = usePagerWindow(page, pageCount);
+  const hasNext = page < pageCount;
+  const hasPrev = page > 1;
+  return /*#__PURE__*/React.createElement(PagerContainer, null, /*#__PURE__*/React.createElement(Link, {
+    to: makeUrl(Math.max(1, page - 1))
+  }, /*#__PURE__*/React.createElement(CircleButton, {
+    hidden: !hasPrev,
+    "aria-disabled": !hasPrev,
+    noBackground: true
+  }, /*#__PURE__*/React.createElement(WedgeIcon, {
+    size: 16,
+    direction: WedgeDirection.Left
+  }))), window.map(p => p === '...' ? /*#__PURE__*/React.createElement(Spacer, {
+    key: p
+  }, /*#__PURE__*/React.createElement(DotsIcon, {
+    size: 20,
+    subLink: true
+  })) : p === page ? /*#__PURE__*/React.createElement(CircleButton, {
+    key: p,
+    type: "button",
+    "aria-current": true
+  }, /*#__PURE__*/React.createElement(Text, null, p)) : /*#__PURE__*/React.createElement(Link, {
+    key: p,
+    to: makeUrl(p)
+  }, /*#__PURE__*/React.createElement(CircleButton, {
+    type: "button"
+  }, /*#__PURE__*/React.createElement(Text, null, p)))), /*#__PURE__*/React.createElement(Link, {
+    to: makeUrl(Math.min(pageCount, page + 1))
+  }, /*#__PURE__*/React.createElement(CircleButton, {
+    hidden: !hasNext,
+    "aria-disabled": !hasNext,
+    noBackground: true
+  }, /*#__PURE__*/React.createElement(WedgeIcon, {
+    size: 16,
+    direction: WedgeDirection.Right
+  }))));
+}
+const PagerContainer = styled.nav(_t$1 || (_t$1 = _2`
   display: flex;
   justify-content: center;
   align-items: center;
-`)),Ar=p.button(Rr||(Rr=Sr`
+`));
+const CircleButton = styled.button(_t2$1 || (_t2$1 = _2`
   font-size: 1rem;
   line-height: calc(1em + 8px);
   text-decoration: none;
@@ -642,17 +2236,59 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   }
 
   ${0}
-`),({theme:e})=>e.color.text3,({theme:e})=>e.color.surface3,({theme:e})=>e.color.text2,({theme:e})=>e.color.surface6,({theme:e})=>e.color.text5,({theme:e})=>e.color.surface6,({theme:e})=>e.color.text5,({noBackground:e=!1})=>e&&h(Or||(Or=Sr`
+`), ({
+  theme
+}) => theme.color.text3, ({
+  theme
+}) => theme.color.surface3, ({
+  theme
+}) => theme.color.text2, ({
+  theme
+}) => theme.color.surface6, ({
+  theme
+}) => theme.color.text5, ({
+  theme
+}) => theme.color.surface6, ({
+  theme
+}) => theme.color.text5, ({
+  noBackground: _noBackground = false
+}) => _noBackground && css(_t3$1 || (_t3$1 = _2`
       /* stylelint-disable-next-line no-duplicate-selectors */
       &:hover {
         background: transparent;
       }
-    `))),Nr=p(Ar).attrs({type:"button",disabled:!0})(Mr||(Mr=Sr`
+    `)));
+const Spacer = styled(CircleButton).attrs({
+  type: 'button',
+  disabled: true
+})(_t4 || (_t4 = _2`
   && {
     color: ${0};
     background: none;
   }
-`),({theme:e})=>e.color.text3),Ir="span";let Pr,Wr,Zr,Gr=e=>e;function Fr({size:t=48,padding:n=16,transparent:r=!1}){/*#__PURE__*/return e.createElement(Dr,{size:t,padding:n,transparent:r},/*#__PURE__*/e.createElement(Vr,null))}const Dr=p.div.attrs({role:"progressbar"})(Pr||(Pr=Gr`
+`), ({
+  theme
+}) => theme.color.text3);
+const Text = 'span';
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3;
+function Spinner({
+  size = 48,
+  padding = 16,
+  transparent = false
+}) {
+  return /*#__PURE__*/React.createElement(SpinnerRoot, {
+    size: size,
+    padding: padding,
+    transparent: transparent
+  }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
+}
+const SpinnerRoot = styled.div.attrs({
+  role: 'progressbar'
+})(_t || (_t = _`
   margin: auto;
   padding: ${0}px;
   border-radius: 8px;
@@ -661,7 +2297,13 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   height: ${0}px;
   background-color: ${0};
   color: ${0};
-`),e=>e.padding,e=>e.size,e=>e.size,e=>e.size,({theme:e,transparent:t})=>t?"transparent":M(.32,e.color.background1),({theme:e})=>e.color.text4),Ur=x(Wr||(Wr=Gr`
+`), props => props.padding, props => props.size, props => props.size, props => props.size, ({
+  theme,
+  transparent
+}) => transparent ? 'transparent' : transparentize(0.32, theme.color.background1), ({
+  theme
+}) => theme.color.text4);
+const scaleout = keyframes(_t2 || (_t2 = _`
   from {
     transform: scale(0);
     opacity: 1;
@@ -671,7 +2313,10 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
     transform: scale(1);
     opacity: 0;
   }
-`)),_r=p.div.attrs({role:"presentation"})(Zr||(Zr=Gr`
+`));
+const Icon = styled.div.attrs({
+  role: 'presentation'
+})(_t3 || (_t3 = _`
   width: 1em;
   height: 1em;
   border-radius: 1em;
@@ -682,5 +2327,26 @@ import e,{useMemo as t,useState as n,useLayoutEffect as r,useDebugValue as o,use
   &[data-reset-animation] {
     animation: none;
   }
-`),Ur,e=>e.once?1:"infinite"),Vr=e.forwardRef(function({once:t=!1},n){const r=l(null);return m(n,()=>({restart:()=>{r.current&&(r.current.dataset.resetAnimation="true",delete r.current.dataset.resetAnimation)}})),/*#__PURE__*/e.createElement(_r,{ref:r,once:t})});export{nt as CancelLayoutItemBodyPadding,ur as Carousel,Y as Filter,D as FilterButton,U as FilterIconButton,_ as FilterLink,me as HintText,Ye as LAYOUT_ITEM_BODY_PADDING,We as Layout,Je as LayoutItem,Qe as LayoutItemBody,qe as LayoutItemHeader,Ft as LeftMenu,Dt as LeftMenuContent,Hr as LinkPager,ge as MAIN_COLUMN_HORIZONTAL_MIN_MARGIN,Lt as MenuListItem,zt as MenuListItemContext,jt as MenuListItemWithIcon,Pt as MenuListLabel,Bt as MenuListLinkItem,Ht as MenuListLinkItemWithIcon,It as MenuListSpacer,Tr as Pager,xe as RESPONSIVE_LEFT_WIDTH,be as RESPONSIVE_MAIN_MAX_WIDTH,Fr as Spinner,Vr as SpinnerIcon,rt as StyledCancelLayoutItemBodyPadding,et as StyledLayoutItemBody,ln as SwitchCheckbox,ut as TextEllipsis,Ln as WithIcon,ye as useElementSize,tt as useLayoutItemBodyPadding,$e as useMedia,ve as useMediaScreen1};
+`), scaleout, p => p.once ? 1 : 'infinite');
+const SpinnerIcon = React.forwardRef(function SpinnerIcon({
+  once = false
+}, ref) {
+  const iconRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    restart: () => {
+      if (!iconRef.current) {
+        return;
+      }
+
+      iconRef.current.dataset.resetAnimation = 'true'; // Force reflow hack!
+      delete iconRef.current.dataset.resetAnimation;
+    }
+  }));
+  return /*#__PURE__*/React.createElement(Icon, {
+    ref: iconRef,
+    once: once
+  });
+});
+
+export { CancelLayoutItemBodyPadding, Carousel, Filter, FilterButton, FilterIconButton, FilterLink, HintText, LAYOUT_ITEM_BODY_PADDING, Layout, LayoutItem, LayoutItemBody, LayoutItemHeader, LeftMenu, LeftMenuContent, LinkPager, MAIN_COLUMN_HORIZONTAL_MIN_MARGIN, MenuListItem, MenuListItemContext, MenuListItemWithIcon, MenuListLabel, MenuListLinkItem, MenuListLinkItemWithIcon, MenuListSpacer, index as Pager, RESPONSIVE_LEFT_WIDTH, RESPONSIVE_MAIN_MAX_WIDTH, Spinner, SpinnerIcon, StyledCancelLayoutItemBodyPadding, StyledLayoutItemBody, index$2 as SwitchCheckbox, TextEllipsis, index$1 as WithIcon, useElementSize, useLayoutItemBodyPadding, useMedia, useMediaScreen1 };
 //# sourceMappingURL=index.modern.js.map