@charcoal-ui/react-sandbox 2.4.0 → 2.6.0

package/dist/index.module.js

@@ -1,1766 +0,0 @@
-import React, { useMemo, useState, useLayoutEffect, useDebugValue, useReducer, useRef, useCallback, useContext, isValidElement, Children as Children$1, useEffect } from 'react';
-import styled, { css, useTheme, createGlobalStyle } 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';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _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;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
-}
-
-var _templateObject$e, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5;
-
-var _excluded$3 = ["onClick", "children", "active", "hover", "reactive"];
-var FilterButton = React.forwardRef(function FilterButton(_ref, ref) {
-  var onClick = _ref.onClick,
-      children = _ref.children,
-      _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active,
-      hover = _ref.hover,
-      _ref$reactive = _ref.reactive,
-      reactive = _ref$reactive === void 0 ? false : _ref$reactive;
-  return /*#__PURE__*/React.createElement(ButtonLike, {
-    active: active,
-    reactive: reactive,
-    hover: hover,
-    onClick: active && !reactive ? undefined : onClick,
-    ref: ref
-  }, children);
-});
-var FilterIconButton = React.forwardRef(function FilterIconButton(_ref2, ref) {
-  var onClick = _ref2.onClick,
-      children = _ref2.children,
-      _ref2$active = _ref2.active,
-      active = _ref2$active === void 0 ? false : _ref2$active,
-      hover = _ref2.hover,
-      _ref2$reactive = _ref2.reactive,
-      reactive = _ref2$reactive === void 0 ? false : _ref2$reactive,
-      width = _ref2.width,
-      height = _ref2.height;
-  return /*#__PURE__*/React.createElement(StyledButtonLike, {
-    active: active,
-    reactive: reactive,
-    hover: hover,
-    onClick: active && !reactive ? undefined : onClick,
-    ref: ref,
-    buttonWidth: width,
-    buttonHeight: height
-  }, children);
-});
-var FilterLink = React.forwardRef(function FilterLink(_ref3, ref) {
-  var onClick = _ref3.onClick,
-      children = _ref3.children,
-      _ref3$active = _ref3.active,
-      active = _ref3$active === void 0 ? false : _ref3$active,
-      hover = _ref3.hover,
-      _ref3$reactive = _ref3.reactive,
-      reactive = _ref3$reactive === void 0 ? false : _ref3$reactive,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
-
-  var _useComponentAbstract = useComponentAbstraction(),
-      Link = _useComponentAbstract.Link;
-
-  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));
-  }
-});
-var buttonCss = css(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  display: block;\n  outline: none;\n  border: none;\n  padding: 9px 24px;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  border-radius: /* absurd radius, but ensures rounded corners */ 2000px;\n  transition: color 0.2s;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n\n  &:hover {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  @media ", " {\n    padding: 5px 16px;\n  }\n"])), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.color.text3;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.color.text2;
-}, function (_ref6) {
-  var _ref6$hover = _ref6.hover,
-      hover = _ref6$hover === void 0 ? false : _ref6$hover;
-  return hover && css(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), function (_ref7) {
-    var theme = _ref7.theme;
-    return theme.color.text2;
-  });
-}, function (_ref8) {
-  var _ref8$active = _ref8.active,
-      active = _ref8$active === void 0 ? false : _ref8$active;
-  return active && css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      color: ", ";\n    "])), function (_ref9) {
-    var theme = _ref9.theme;
-    return theme.color.surface3;
-  }, function (_ref10) {
-    var theme = _ref10.theme;
-    return theme.color.text2;
-  });
-}, function (_ref11) {
-  var _ref11$active = _ref11.active,
-      active = _ref11$active === void 0 ? false : _ref11$active,
-      _ref11$reactive = _ref11.reactive,
-      reactive = _ref11$reactive === void 0 ? false : _ref11$reactive;
-  return active && !reactive && css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return maxWidth(theme.breakpoint.screen1);
-});
-var padding0Css = css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  padding: 0;\n\n  @media ", " {\n    padding: 0;\n  }\n"])), function (_ref13) {
-  var theme = _ref13.theme;
-  return maxWidth(theme.breakpoint.screen1);
-});
-var ButtonLike = styled.button(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonCss);
-var PlainElement = styled.span(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonCss);
-var StyledButtonLike = styled(ButtonLike)(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "\n  ", "\n"])), padding0Css, function (p) {
-  return p.buttonWidth !== undefined && "width: " + p.buttonWidth + "px;";
-}, function (p) {
-  return p.buttonHeight !== undefined && "height: " + p.buttonHeight + "px;";
-});
-var Filter = styled.div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-
-var theme = createTheme(styled);
-
-var _templateObject$d;
-function IconBase(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 24 : _ref$size,
-      viewBoxSize = _ref.viewBoxSize,
-      currentColor = _ref.currentColor,
-      path = _ref.path,
-      transform = _ref.transform,
-      fillRule = _ref.fillRule,
-      clipRule = _ref.clipRule;
-  return /*#__PURE__*/React.createElement(Icon$2, {
-    viewBox: "0 0 " + viewBoxSize + " " + viewBoxSize,
-    size: size,
-    currentColor: currentColor
-  }, /*#__PURE__*/React.createElement(IconBasePath, {
-    path: path,
-    transform: transform,
-    fillRule: fillRule,
-    clipRule: clipRule
-  }));
-}
-var Icon$2 = styled.svg(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  stroke: none;\n  fill: ", ";\n  width: ", "px;\n  height: ", "px;\n  line-height: 0;\n  font-size: 0;\n  vertical-align: middle;\n"])), function (_ref2) {
-  var _ref2$currentColor = _ref2.currentColor,
-      currentColor = _ref2$currentColor === void 0 ? false : _ref2$currentColor,
-      theme = _ref2.theme;
-  return currentColor ? 'currentColor' : theme.color.text2;
-}, function (props) {
-  return props.size;
-}, function (props) {
-  return props.size;
-});
-var IconBasePath = function IconBasePath(_ref3) {
-  var path = _ref3.path,
-      transform = _ref3.transform,
-      fillRule = _ref3.fillRule,
-      clipRule = _ref3.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);
-  }
-};
-
-var _templateObject$c;
-var size$1 = 16;
-function InfoIcon() {
-  var 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
-  });
-}
-var Path = styled.path(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  fill: ", ";\n  fill-rule: evenodd;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.color.surface1;
-});
-
-var _templateObject$b, _templateObject2$9, _templateObject3$8, _templateObject4$7;
-function HintText(_ref) {
-  var children = _ref.children,
-      context = _ref.context,
-      className = _ref.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));
-}
-var Container$2 = styled.div.attrs(styledProps)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }\n\n  display: flex;\n  align-items: flex-start;\n  ", "\n"])), function (p) {
-  return theme(function (o) {
-    return [o.bg.surface3, o.borderRadius(8), o.padding.vertical(p["default"].vertical), o.padding.horizontal(p["default"].horizontal)];
-  });
-}, function (_ref2) {
-  var t = _ref2.theme;
-  return maxWidth(t.breakpoint.screen1);
-}, function (p) {
-  return theme(function (o) {
-    return [o.padding.vertical(p.screen1.vertical), o.padding.horizontal(p.screen1.horizontal)];
-  });
-}, function (p) {
-  return p.context === 'page' && css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n      justify-content: center;\n    "])));
-});
-var IconWrap = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n  height: 22px;\n  margin: -4px 4px -4px 0;\n"])), function (p) {
-  return p.theme.color.text4;
-});
-var Text$2 = styled.p(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  ", "\n  margin: 0;\n"])), theme(function (o) {
-  return [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
-        }
-      };
-  }
-}
-
-var MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72;
-var RESPONSIVE_LEFT_WIDTH = columnSystem(2, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT;
-var 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) {
-  var matcher = useMemo(function () {
-    return __TEST__ ? {
-      matches: false,
-      addListener: function addListener() {// do nothing
-      },
-      removeListener: function removeListener() {// do nothing
-      }
-    } : matchMedia(query);
-  }, [query]);
-
-  var _useState = useState(matcher.matches),
-      matches = _useState[0],
-      setMatches = _useState[1]; // can only happen if/when the query changes
-
-
-  if (matcher.matches !== matches) {
-    setMatches(matcher.matches);
-  }
-
-  var callback = function 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(function () {
-        setMatches(e.matches);
-      });
-    } catch (_unused) {
-      setMatches(e.matches);
-    }
-  };
-
-  useLayoutEffect(function () {
-    matcher.addListener(callback); // sync update
-
-    setMatches(matcher.matches);
-    return function () {
-      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) {
-  if (deps === void 0) {
-    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
-  var _useReducer = useReducer(function (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),
-      size = _useReducer[0],
-      setSize = _useReducer[1];
-
-  var _useState2 = useState(null),
-      watch = _useState2[0],
-      setWatch = _useState2[1];
-
-  useLayoutEffect(function () {
-    if (watch === null) {
-      return;
-    }
-
-    var observer = new ResizeObserver(function () {
-      // NOTE: the ResizeObserverCallback receives a rect,
-      // but it's not measured in the same way as getBoundingClientRect,
-      // which causes unstable layout
-      var newSize = measure(watch);
-      setSize(newSize);
-    }); // The ResizeObserver is supposed to call handleResize on observe
-
-    observer.observe(watch);
-    return function () {
-      // 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(function () {
-    if (ref.current !== watch) {
-      setWatch(ref.current);
-    }
-  });
-  useLayoutEffect(function () {
-    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) {
-  var _useState3 = useState(defaultValue),
-      state = _useState3[0],
-      setState = _useState3[1];
-
-  var timer = useRef(); // typescript bug? (any when omitting type annotation)
-  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
-
-  var setDebounceState = useCallback(function (value, force) {
-    if (force === void 0) {
-      force = false;
-    }
-
-    if (force) {
-      setState(value);
-      return;
-    }
-
-    if (timer.current !== undefined) {
-      return;
-    }
-
-    timer.current = requestAnimationFrame(function () {
-      setState(value);
-
-      if (timer.current !== undefined) {
-        timer.current = undefined;
-      }
-    });
-  }, []);
-  return [state, setDebounceState];
-}
-
-var _templateObject$a, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$5, _templateObject6$4, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15;
-var LayoutConfigContext = React.createContext({
-  wide: false,
-  center: false,
-  withLeft: false
-});
-function Layout(_ref) {
-  var menu = _ref.menu,
-      children = _ref.children,
-      header = _ref.header,
-      _ref$center = _ref.center,
-      center = _ref$center === void 0 ? false : _ref$center,
-      wide = _ref.wide,
-      _ref$isHeaderTopMenu = _ref.isHeaderTopMenu,
-      isHeaderTopMenu = _ref$isHeaderTopMenu === void 0 ? false : _ref$isHeaderTopMenu;
-  var config = {
-    center: 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));
-}
-var HeaderTopMenuContainer = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  margin-bottom: 40px;\n  overflow-x: auto;\n  word-break: keep-all;\n\n  @media ", " {\n    margin-bottom: 0;\n    padding-left: 16px;\n    padding-bottom: 16px;\n    background-color: ", ";\n  }\n"])), function (_ref2) {
-  var theme = _ref2.theme;
-  return maxWidth(theme.breakpoint.screen1);
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.color.surface2;
-});
-var GlobalStyle = createGlobalStyle(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  :root {\n    background-color: ", ";\n\n    @media ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.color.background2;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return maxWidth(theme.breakpoint.screen1);
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.color.background1;
-});
-var LayoutRoot = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: ", ";\n\n  @media ", " {\n    background-color: ", ";\n  }\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.color.background2;
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return maxWidth(theme.breakpoint.screen1);
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.color.background1;
-});
-var LeftArea = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  min-width: ", "px;\n  padding: 40px 0 40px ", "px;\n  box-sizing: border-box;\n\n  @media ", " {\n    display: none;\n  }\n"])), RESPONSIVE_LEFT_WIDTH, GUTTER_UNIT, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.breakpoint.screen3;
-});
-var MainArea = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  flex-grow: 1;\n  /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\n  max-width: ", "px;\n  padding: 40px ", "px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n\n  @media ", " {\n    padding: 0;\n  }\n"])), function (p) {
-  return p.center ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) : RESPONSIVE_MAIN_MAX_WIDTH;
-}, MAIN_COLUMN_HORIZONTAL_MIN_MARGIN, function (_ref11) {
-  var theme = _ref11.theme;
-  return maxWidth(theme.breakpoint.screen1);
-});
-var Header = styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  margin-bottom: 12px;\n  font-size: 20px;\n  line-height: 28px;\n  color: ", ";\n\n  @media ", " {\n    margin-bottom: 0;\n    padding: 12px;\n    font-size: 16px;\n    line-height: 24px;\n    display: flex;\n    justify-content: center;\n    background-color: ", ";\n  }\n"])), function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.color.text2;
-}, function (_ref13) {
-  var theme = _ref13.theme;
-  return maxWidth(theme.breakpoint.screen1);
-}, function (_ref14) {
-  var theme = _ref14.theme;
-  return theme.color.surface2;
-});
-var Grid = styled.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: ", "px;\n  grid-template-columns: 1fr;\n  grid-auto-columns: 1fr;\n  grid-auto-rows: auto;\n\n  @media ", " {\n    gap: 0;\n    background-color: ", ";\n    padding-bottom: 60px;\n  }\n"])), GUTTER_UNIT, function (_ref15) {
-  var theme = _ref15.theme;
-  return maxWidth(theme.breakpoint.screen1);
-}, function (_ref16) {
-  var theme = _ref16.theme;
-  return theme.color.background1;
-});
-var LayoutItem = React.forwardRef(function LayoutItem(_ref17, ref) {
-  var span = _ref17.span,
-      children = _ref17.children;
-
-  var _useContext = useContext(LayoutConfigContext),
-      withLeft = _useContext.withLeft;
-
-  return /*#__PURE__*/React.createElement(StyledLayoutItem, {
-    span: span,
-    withLeft: withLeft,
-    ref: ref
-  }, children);
-});
-var StyledLayoutItem = styled.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n  grid-column-start: auto;\n  grid-column-end: span ", ";\n  border-radius: 24px;\n  color: ", ";\n  background-color: ", ";\n  /* https://www.w3.org/TR/css-grid-1/#min-size-auto */\n  min-width: 0;\n\n  @media ", " {\n    ", "\n  }\n\n  @media ", " {\n    ", "\n\n    border-radius: 0;\n    padding-bottom: 40px;\n  }\n"])), function (p) {
-  return p.span;
-}, function (_ref18) {
-  var theme = _ref18.theme;
-  return theme.color.text2;
-}, function (_ref19) {
-  var theme = _ref19.theme;
-  return theme.color.background1;
-}, function (p) {
-  return p.withLeft ? p.theme.breakpoint.screen4 : p.theme.breakpoint.screen3;
-}, function (p) {
-  return p.span > 2 && css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n        grid-column-end: span 2;\n      "])));
-}, function (_ref20) {
-  var theme = _ref20.theme;
-  return maxWidth(theme.breakpoint.screen1);
-}, function (p) {
-  return p.span > 1 && css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n        grid-column-end: span 1;\n      "])));
-});
-function LayoutItemHeader(_ref21) {
-  var children = _ref21.children;
-
-  var _useContext2 = useContext(LayoutConfigContext),
-      wide = _useContext2.wide,
-      center = _useContext2.center;
-
-  return /*#__PURE__*/React.createElement(StyledLayoutItemHeader, {
-    wide: wide,
-    center: center
-  }, children);
-}
-var StyledLayoutItemHeader = styled.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  padding: 0 ", "px;\n  height: ", "px;\n  display: grid;\n  align-items: center;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: bold;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 24px 24px 0 0;\n  ", "\n\n  @media ", " {\n    margin-top: 4px;\n    padding: 0 16px;\n    background: none;\n    overflow-x: auto;\n    border-radius: unset;\n    ", "\n  }\n"])), function (p) {
-  return p.wide ? 40 : 24;
-}, function (p) {
-  return p.wide ? 64 : 48;
-}, function (_ref22) {
-  var theme = _ref22.theme;
-  return theme.color.surface2;
-}, function (_ref23) {
-  var theme = _ref23.theme;
-  return theme.color.text2;
-}, function (p) {
-  return p.center && css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n      justify-content: center;\n    "])));
-}, function (_ref24) {
-  var theme = _ref24.theme;
-  return maxWidth(theme.breakpoint.screen1);
-}, function (p) {
-  return p.wide && css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n        height: 48px;\n        margin-top: 0;\n      "])));
-});
-var 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(_ref25) {
-  var children = _ref25.children,
-      _ref25$horizontal = _ref25.horizontal,
-      horizontal = _ref25$horizontal === void 0 ? false : _ref25$horizontal,
-      _ref25$narrow = _ref25.narrow,
-      narrow = _ref25$narrow === void 0 ? false : _ref25$narrow;
-
-  var _useContext3 = useContext(LayoutConfigContext),
-      wide = _useContext3.wide;
-
-  return /*#__PURE__*/React.createElement(StyledLayoutItemBody, {
-    wide: wide,
-    horizontal: horizontal,
-    narrow: narrow
-  }, children);
-}
-var StyledLayoutItemBody = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n\n  @media ", " {\n    padding: ", ";\n  }\n\n  width: 100%;\n  box-sizing: border-box;\n"])), function (p) {
-  return 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";
-}, function (_ref26) {
-  var theme = _ref26.theme;
-  return maxWidth(theme.breakpoint.screen1);
-}, function (p) {
-  return 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() {
-  var _useContext4 = useContext(LayoutConfigContext),
-      wide = _useContext4.wide;
-
-  return useMediaScreen1() ? LAYOUT_ITEM_BODY_PADDING.column1 : wide ? LAYOUT_ITEM_BODY_PADDING.wide : LAYOUT_ITEM_BODY_PADDING["default"];
-}
-function CancelLayoutItemBodyPadding(_ref27) {
-  var children = _ref27.children,
-      cancelTop = _ref27.cancelTop;
-
-  var _useContext5 = useContext(LayoutConfigContext),
-      wide = _useContext5.wide;
-
-  return /*#__PURE__*/React.createElement(StyledCancelLayoutItemBodyPadding, {
-    wide: wide,
-    cancelTop: cancelTop
-  }, children);
-}
-/* eslint-disable max-len */
-
-var StyledCancelLayoutItemBodyPadding = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  margin: 0 -", "px;\n  margin-top: -", "px;\n\n  @media ", " {\n    margin: 0 -", "px;\n    margin-top: -", "px;\n  }\n"])), function (p) {
-  return p.wide ? LAYOUT_ITEM_BODY_PADDING.wide.x : LAYOUT_ITEM_BODY_PADDING["default"].x;
-}, function (_ref28) {
-  var _ref28$cancelTop = _ref28.cancelTop,
-      cancelTop = _ref28$cancelTop === void 0 ? false : _ref28$cancelTop,
-      wide = _ref28.wide;
-  return !cancelTop ? 0 : wide ? LAYOUT_ITEM_BODY_PADDING.wide.y : LAYOUT_ITEM_BODY_PADDING["default"].y;
-}, function (_ref29) {
-  var theme = _ref29.theme;
-  return maxWidth(theme.breakpoint.screen1);
-}, LAYOUT_ITEM_BODY_PADDING.column1.x, function (_ref30) {
-  var _ref30$cancelTop = _ref30.cancelTop,
-      cancelTop = _ref30$cancelTop === void 0 ? false : _ref30$cancelTop;
-  return !cancelTop ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x;
-});
-/* eslint-enable max-len */
-
-// https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts
-
-var hasChildren = function hasChildren(element) {
-  return isValidElement(element) && Boolean(element.props.children);
-};
-
-var childToString = function 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();
-};
-var onlyText = function onlyText(children) {
-  if (!Array.isArray(children) && !isValidElement(children)) {
-    return childToString(children);
-  }
-
-  return Children$1.toArray(children).reduce(function (text, child) {
-    var 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);
-  }, '');
-};
-
-var _templateObject$9, _templateObject2$7, _templateObject3$6;
-/**
- * 複数行のテキストに表示行数制限を設けて`...`で省略する
- */
-
-var TextEllipsis = styled.div.attrs(function (_ref) {
-  var children = _ref.children,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? onlyText(children) : _ref$title;
-  return {
-    title: title !== '' ? title : undefined
-  };
-})(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  line-height: ", "px;\n  /* For english */\n  overflow-wrap: break-word;\n\n  ", "\n"])), function (props) {
-  return props.lineHeight;
-}, function (_ref2) {
-  var _ref2$lineLimit = _ref2.lineLimit,
-      lineLimit = _ref2$lineLimit === void 0 ? 1 : _ref2$lineLimit,
-      lineHeight = _ref2.lineHeight;
-  return lineLimit === 1 ? css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        "]))) : css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ", ";\n          /* Fallback for -webkit-line-clamp */\n          max-height: ", "px;\n        "])), lineLimit, lineHeight * lineLimit);
-});
-
-var _excluded$2 = ["link", "onClick", "disabled", "primary", "secondary", "gtmClass", "noHover", "children"],
-    _excluded2 = ["icon", "primary"],
-    _excluded3 = ["icon", "primary"];
-
-var _templateObject$8, _templateObject2$6, _templateObject3$5, _templateObject4$5, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3;
-var MenuListItemContext = React.createContext({
-  padding: 24
-});
-function MenuListItem(_ref) {
-  var primary = _ref.primary,
-      secondary = _ref.secondary,
-      _onClick = _ref.onClick,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$noHover = _ref.noHover,
-      noHover = _ref$noHover === void 0 ? false : _ref$noHover,
-      gtmClass = _ref.gtmClass,
-      children = _ref.children;
-
-  var _useContext = useContext(MenuListItemContext),
-      padding = _useContext.padding;
-
-  return /*#__PURE__*/React.createElement(Item, {
-    hasSubLabel: secondary !== undefined,
-    onClick: function onClick(e) {
-      return !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);
-}
-var Item = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", "px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  user-select: none;\n  cursor: ", ";\n  transition: 0.2s background-color;\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", " {\n    cursor: default;\n    pointer-events: none;\n\n    &:hover {\n      background-color: unset;\n    }\n  }\n"])), function (p) {
-  return p.hasSubLabel ? 56 : 40;
-}, function (p) {
-  return p.sidePadding;
-}, function (p) {
-  return p.noClick ? 'default' : 'pointer';
-}, function (p) {
-  return !p.noHover && css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
-    var theme = _ref2.theme;
-    return theme.color.surface3;
-  });
-}, theme(function (o) {
-  return o.disabled;
-}), disabledSelector);
-var Labels = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var PrimaryText = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  line-height: 22px;\n  font-size: 14px;\n  display: grid;\n"])), function (p) {
-  return p.theme.color.text2;
-});
-var SecondaryText = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  line-height: 18px;\n  font-size: 10px;\n"])), function (p) {
-  return p.theme.color.text3;
-});
-function MenuListLinkItem(_ref3) {
-  var link = _ref3.link,
-      onClick = _ref3.onClick,
-      _ref3$disabled = _ref3.disabled,
-      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-      primary = _ref3.primary,
-      secondary = _ref3.secondary,
-      gtmClass = _ref3.gtmClass,
-      noHover = _ref3.noHover,
-      children = _ref3.children,
-      linkProps = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
-
-  var _useComponentAbstract = useComponentAbstraction(),
-      Link = _useComponentAbstract.Link;
-
-  var props = {
-    disabled: disabled,
-    primary: primary,
-    secondary: secondary,
-    gtmClass: gtmClass,
-    noHover: noHover,
-    children: 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: function onClick() {
-      return void 0;
-    }
-  }, props)));
-}
-var A = styled.a(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
-function MenuListLinkItemWithIcon(_ref4) {
-  var icon = _ref4.icon,
-      text = _ref4.primary,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded2);
-
-  var primary = /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon$1, null, icon), text);
-  return /*#__PURE__*/React.createElement(MenuListLinkItem, _extends({
-    primary: primary
-  }, props));
-}
-function MenuListItemWithIcon(_ref5) {
-  var icon = _ref5.icon,
-      text = _ref5.primary,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded3);
-
-  var primary = /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon$1, null, icon), text);
-  return /*#__PURE__*/React.createElement(MenuListItem, _extends({
-    primary: primary
-  }, props));
-}
-var IconContainer = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 8px;\n  grid-auto-flow: column;\n  align-items: center;\n"])));
-var Icon$1 = styled.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n"])), function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.color.text3;
-});
-var MenuListSpacer = styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  height: 24px;\n"])));
-var MenuListLabel = styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  padding: 0 16px;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n  margin-top: -2px;\n  margin-bottom: 6px;\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.color.text3;
-});
-
-var _templateObject$7, _templateObject2$5;
-function LeftMenu(_ref) {
-  var links = _ref.links,
-      active = _ref.active;
-
-  var _useComponentAbstract = useComponentAbstraction(),
-      Link = _useComponentAbstract.Link;
-
-  return /*#__PURE__*/React.createElement(Container$1, null, links.map(function (link, index) {
-    return /*#__PURE__*/React.createElement(Link, {
-      to: link.to,
-      key: index
-    }, /*#__PURE__*/React.createElement(LinkItem, {
-      "aria-current": link.id === active || undefined
-    }, link.text));
-  }));
-}
-function LeftMenuContent(_ref2) {
-  var links = _ref2.links;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, links.map(function (link, index) {
-    return /*#__PURE__*/React.createElement(MenuListLinkItem, {
-      link: link.to,
-      key: index,
-      primary: link.text
-    });
-  }));
-}
-var Container$1 = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
-var LinkItem = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n  border-radius: 24px;\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 22px;\n  padding: 0 16px;\n  height: 40px;\n  transition: 0.2s color;\n  &:hover {\n    transition: 0.2s color;\n    color: ", ";\n  }\n  &[aria-current] {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.color.text3;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.color.text2;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.color.text2;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.color.surface3;
-});
-
-var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2;
-
-var _excluded$1 = ["gtmClass", "flex", "rowReverse", "children", "disabled"];
-var index$2 = React.forwardRef(function SwitchCheckbox(_ref, ref) {
-  var gtmClass = _ref.gtmClass,
-      _ref$flex = _ref.flex,
-      flex = _ref$flex === void 0 ? false : _ref$flex,
-      _ref$rowReverse = _ref.rowReverse,
-      rowReverse = _ref$rowReverse === void 0 ? false : _ref$rowReverse,
-      children = _ref.children,
-      disabled = _ref.disabled,
-      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));
-});
-var Children = styled.span(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (p) {
-  return p.rowReverse ? css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n          margin-right: 8px;\n        "]))) : css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n          margin-left: 8px;\n        "])));
-});
-var Label = styled.label(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  ", "\n  ", "\n  cursor: pointer;\n  outline: 0;\n\n  &[aria-disabled='true'] {\n    cursor: auto;\n  }\n"])), function (_ref2) {
-  var flex = _ref2.flex;
-  return flex && css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      justify-content: space-between;\n    "])));
-}, function (_ref3) {
-  var rowReverse = _ref3.rowReverse;
-  return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n      flex-direction: ", ";\n    "])), rowReverse ? 'row-reverse' : 'row');
-});
-var SwitchOuter = styled.span(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  position: relative;\n  z-index: 0;\n"])));
-var SwitchInner = styled.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  box-sizing: border-box;\n  width: 28px;\n  height: 16px;\n  border-radius: 16px;\n  border: 2px solid transparent;\n  background: ", ";\n  transition: box-shadow 0.2s, background-color 0.2s;\n"])), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.color.text4;
-});
-var SwitchInnerKnob = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  width: 12px;\n  height: 12px;\n  background-color: ", ";\n  border-radius: 50%;\n  transform: translateX(0);\n  transition: transform 0.2s;\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.color.text5;
-});
-var SwitchInput = styled.input.attrs({
-  type: 'checkbox'
-})(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  /* NOTE: this is contained by the GraphicCheckboxOuter */\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  /* just to control the clickable area if used standalone */\n  border-radius: 16px;\n  opacity: 0;\n  appearance: none;\n  outline: none;\n  cursor: pointer;\n\n  &:checked {\n    ~ ", " {\n      background-color: ", ";\n\n      ", " {\n        transform: translateX(12px);\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: auto;\n\n    ~ ", " {\n      opacity: ", ";\n    }\n  }\n\n  &:not(:disabled):focus {\n    ~ ", " {\n      box-shadow: 0 0 0 4px\n        ", ";\n    }\n  }\n"])), SwitchInner, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.color.brand;
-}, SwitchInnerKnob, SwitchInner, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.elementEffect.disabled.opacity;
-}, SwitchInner, function (_ref8) {
-  var theme = _ref8.theme;
-  return applyEffect(theme.color.brand, theme.elementEffect.disabled);
-});
-
-var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
-var index$1 = React.memo(function WithIcon(_ref) {
-  var children = _ref.children,
-      icon = _ref.icon,
-      _ref$show = _ref.show,
-      show = _ref$show === void 0 ? true : _ref$show,
-      _ref$prefix = _ref.prefix,
-      pre = _ref$prefix === void 0 ? false : _ref$prefix,
-      width = _ref.width,
-      _ref$fit = _ref.fit,
-      fit = _ref$fit === void 0 ? false : _ref$fit,
-      _ref$fixed = _ref.fixed,
-      fixed = _ref$fixed === void 0 ? false : _ref$fixed;
-  var 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, 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);
-});
-var Root = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var Text$1 = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  ", "\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (p) {
-  return !p.fixed && css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n      min-width: 0;\n      overflow: hidden;\n    "])));
-});
-
-function AutoWidthIconAnchor(_ref2) {
-  var _useElementSize$width, _useElementSize;
-
-  var children = _ref2.children,
-      show = _ref2.show,
-      pre = _ref2.pre;
-  var ref = useRef(null); // depsを空配列にしないことで初回だけ同期で幅を計算させるテクニック
-
-  var 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, {
-    ref: ref
-  }, children));
-}
-
-var forceCenteringCss = css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  > svg {\n    display: block;\n  }\n"])));
-var iconAnchorCss = css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "\n"])), function (p) {
-  return p.show === 'collapse' ? css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n          display: none;\n        "]))) : css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n          visibility: ", ";\n        "])), p.show ? 'visible' : 'hidden');
-}, function (p) {
-  return p.pre ? css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n          margin-right: 4px;\n        "]))) : css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n          margin-left: 4px;\n        "])));
-});
-var IconAnchorNaive = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  ", "\n"])), iconAnchorCss);
-var IconNaive = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n\n  ", "\n"])), forceCenteringCss);
-var IconAnchor = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  /* Icon\u3092line-height\u306B\u95A2\u4E0E\u3055\u305B\u306A\u3044 */\n  height: 0;\n  /* \u6A2A\u65B9\u5411\u306E\u9818\u57DF\u306F\u78BA\u4FDD\u3059\u308B */\n  width: ", "px;\n\n  ", "\n"])), function (p) {
-  return p.width;
-}, iconAnchorCss);
-var Icon = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  position: absolute;\n  transform: translateY(-50%);\n\n  ", "\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
-    var options = Object.defineProperty({}, 'passive', {
-      get: function get() {
-        return passiveEventsResult = true;
-      }
-    });
-    window.addEventListener('test', test, options);
-    window.removeEventListener('test', test);
-  } catch (_unused) {// test fail
-  }
-
-  return passiveEventsResult;
-
-  function test() {
-    /* empty */
-  }
-}
-var isEdge = function isEdge() {
-  return 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
-
-
-var 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";
-var size = 24;
-function NextIcon(_ref) {
-  var direction = _ref.direction;
-  var 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);
-  }
-}
-
-var _templateObject$4, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$1;
-var Direction;
-
-(function (Direction) {
-  Direction["Right"] = "right";
-  Direction["Left"] = "left";
-})(Direction || (Direction = {}));
-
-function CarouselButton(_ref) {
-  var direction = _ref.direction,
-      show = _ref.show,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? 0 : _ref$offset,
-      _ref$padding = _ref.padding,
-      padding = _ref$padding === void 0 ? 0 : _ref$padding,
-      _ref$bottomOffset = _ref.bottomOffset,
-      bottom = _ref$bottomOffset === void 0 ? 0 : _ref$bottomOffset,
-      _ref$gradient = _ref.gradient,
-      gradient = _ref$gradient === void 0 ? false : _ref$gradient,
-      onClick = _ref.onClick;
-  var 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()
-  })));
-}
-var CAROUSEL_BUTTON_SIZE = 40;
-var CarouselButtonIcon = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;\n  color: ", ";\n"])), CAROUSEL_BUTTON_SIZE, CAROUSEL_BUTTON_SIZE, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.color.surface4;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.color.text5;
-});
-var Button = styled.button(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  min-width: 40px;\n  border: none;\n  outline: 0;\n  background: transparent;\n  cursor: pointer;\n  transition: 0.4s visibility, 0.4s opacity;\n  /* \u3064\u3089\u3044 */\n  /* \u3053\u306E\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306FCarousel\u3067\u3057\u304B\u4F7F\u308F\u308C\u3066\u306A\u3044\u306E\u3067\u305D\u3063\u3061\u3067\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3067\u5207\u308B */\n  z-index: 1;\n\n  &:hover ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  ", "\n"])), CarouselButtonIcon, function (_ref4) {
-  var theme = _ref4.theme;
-  return applyEffect(theme.color.surface4, theme.effect.hover);
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return applyEffect(theme.color.text5, theme.effect.hover);
-}, CarouselButtonIcon, function (_ref6) {
-  var theme = _ref6.theme;
-  return applyEffect(theme.color.surface4, theme.effect.press);
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return applyEffect(theme.color.text5, theme.effect.press);
-}, function (p) {
-  return p.hide && css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n      visibility: hidden;\n      opacity: 0;\n      pointer-events: none;\n    "])));
-});
-styled(CarouselButtonIcon)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_ref9) {
-  var theme = _ref9.theme;
-  return applyEffect(theme.color.surface4, theme.effect.hover);
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return applyEffect(theme.color.text5, theme.effect.hover);
-}, function (_ref11) {
-  var theme = _ref11.theme;
-  return applyEffect(theme.color.surface4, theme.effect.press);
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return applyEffect(theme.color.text5, theme.effect.press);
-});
-var onlyNonTouchDevice = css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  @media (hover: none) and (pointer: coarse) {\n    display: none;\n  }\n"])));
-
-var _templateObject$3, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
-var _excluded = ["buttonOffset", "buttonPadding", "bottomOffset", "defaultScroll", "onScroll", "onResize", "children", "centerItems", "onScrollStateChange", "scrollAmountCoef"];
-var GRADIENT_WIDTH = 72;
-/**
- * カルーセル系のスクロール量の定数
- *
- * @example
- * const scrollAmount = containerElm.clientWidth * SCROLL_AMOUNT_COEF
- */
-
-var SCROLL_AMOUNT_COEF = 0.75;
-function Carousel(_ref) {
-  var _ref$buttonOffset = _ref.buttonOffset,
-      buttonOffset = _ref$buttonOffset === void 0 ? 0 : _ref$buttonOffset,
-      _ref$buttonPadding = _ref.buttonPadding,
-      buttonPadding = _ref$buttonPadding === void 0 ? 16 : _ref$buttonPadding,
-      _ref$bottomOffset = _ref.bottomOffset,
-      bottomOffset = _ref$bottomOffset === void 0 ? 0 : _ref$bottomOffset,
-      _ref$defaultScroll = _ref.defaultScroll;
-  _ref$defaultScroll = _ref$defaultScroll === void 0 ? {} : _ref$defaultScroll;
-
-  var _ref$defaultScroll$al = _ref$defaultScroll.align,
-      align = _ref$defaultScroll$al === void 0 ? 'left' : _ref$defaultScroll$al,
-      _ref$defaultScroll$of = _ref$defaultScroll.offset,
-      scrollOffset = _ref$defaultScroll$of === void 0 ? 0 : _ref$defaultScroll$of,
-      onScroll = _ref.onScroll,
-      onResize = _ref.onResize,
-      children = _ref.children,
-      centerItems = _ref.centerItems,
-      onScrollStateChange = _ref.onScrollStateChange,
-      _ref$scrollAmountCoef = _ref.scrollAmountCoef,
-      scrollAmountCoef = _ref$scrollAmountCoef === void 0 ? SCROLL_AMOUNT_COEF : _ref$scrollAmountCoef,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  // スクロール位置を保存する
-  // アニメーション中の場合は、アニメーション終了時のスクロール位置が保存される
-  var _useDebounceAnimation = useDebounceAnimationState(0),
-      scrollLeft = _useDebounceAnimation[0],
-      setScrollLeft = _useDebounceAnimation[1]; // アニメーション中かどうか
-
-
-  var animation = useRef(false); // スクロール可能な領域を保存する
-
-  var _useState = useState(0),
-      maxScrollLeft = _useState[0],
-      setMaxScrollLeft = _useState[1]; // 左右のボタンの表示状態を保存する
-
-
-  var _useState2 = useState(false),
-      leftShow = _useState2[0],
-      setLeftShow = _useState2[1];
-
-  var _useState3 = useState(false),
-      rightShow = _useState3[0],
-      setRightShow = _useState3[1]; // const [props, set, stop] = useSpring(() => ({
-  //   scroll: 0
-  // }))
-
-
-  var _useSpring = useSpring(function () {
-    return {
-      scroll: 0
-    };
-  }),
-      styles = _useSpring[0],
-      set = _useSpring[1];
-
-  var ref = useRef(null);
-  var visibleAreaRef = useRef(null);
-  var innerRef = useRef(null);
-  var handleRight = useCallback(function () {
-    if (visibleAreaRef.current === null) {
-      return;
-    }
-
-    var clientWidth = visibleAreaRef.current.clientWidth; // スクロール領域を超えないように、アニメーションを開始
-    // アニメーション中にアニメーションが開始されたときに、アニメーション終了予定の位置から再度計算するようにする
-
-    var scroll = Math.min(scrollLeft + clientWidth * scrollAmountCoef, maxScrollLeft);
-    setScrollLeft(scroll, true);
-    set({
-      scroll: scroll,
-      from: {
-        scroll: scrollLeft
-      },
-      reset: !animation.current
-    });
-    animation.current = true;
-  }, [animation, maxScrollLeft, scrollLeft, set, scrollAmountCoef, setScrollLeft]);
-  var handleLeft = useCallback(function () {
-    if (visibleAreaRef.current === null) {
-      return;
-    }
-
-    var clientWidth = visibleAreaRef.current.clientWidth;
-    var scroll = Math.max(scrollLeft - clientWidth * scrollAmountCoef, 0);
-    setScrollLeft(scroll, true);
-    set({
-      scroll: scroll,
-      from: {
-        scroll: scrollLeft
-      },
-      reset: !animation.current
-    });
-    animation.current = true;
-  }, [animation, scrollLeft, set, scrollAmountCoef, setScrollLeft]); // スクロール可能な場合にボタンを表示する
-  // scrollLeftが変化したときに処理する (アニメーション開始時 & 手動スクロール時)
-
-  useEffect(function () {
-    var newleftShow = scrollLeft > 0;
-    var 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]);
-  var handleScroll = useCallback(function () {
-    if (ref.current === null) {
-      return;
-    } // 手動でスクロールが開始されたときにアニメーションを中断
-
-
-    if (animation.current) {
-      styles.scroll.stop();
-      animation.current = false;
-    } // スクロール位置を保存 (アニメーションの基準になる)
-
-
-    var manualScrollLeft = ref.current.scrollLeft; // 過剰にsetStateが走らないようにDebouceする
-
-    setScrollLeft(manualScrollLeft);
-  }, [animation, setScrollLeft, styles]); // リサイズが起きたときに、アニメーション用のスクロール領域 & ボタンの表示状態 を再計算する
-
-  var handleResize = useCallback(function () {
-    if (ref.current === null) {
-      return;
-    }
-
-    var _ref$current = ref.current,
-        clientWidth = _ref$current.clientWidth,
-        scrollWidth = _ref$current.scrollWidth;
-    var newMaxScrollLeft = scrollWidth - clientWidth;
-    setMaxScrollLeft(newMaxScrollLeft);
-
-    if (onResize) {
-      onResize(clientWidth);
-    }
-  }, [onResize]);
-  useLayoutEffect(function () {
-    var elm = ref.current;
-    var innerElm = innerRef.current;
-
-    if (elm === null || innerElm === null) {
-      return;
-    }
-
-    elm.addEventListener('wheel', handleScroll, passiveEvents() && {
-      passive: true
-    });
-    var resizeObserver = new ResizeObserver(handleResize);
-    resizeObserver.observe(elm);
-    var resizeObserverInner = new ResizeObserver(handleResize);
-    resizeObserverInner.observe(innerElm);
-    return function () {
-      elm.removeEventListener('wheel', handleScroll);
-      resizeObserver.disconnect();
-      resizeObserverInner.disconnect();
-    };
-  }, [handleResize, handleScroll]); // 初期スクロールを行う
-
-  useLayoutEffect(function () {
-    if (align !== 'left' || scrollOffset !== 0) {
-      var scroll = ref.current;
-
-      if (scroll !== null) {
-        var 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]);
-  var handleScrollMove = useCallback(function () {
-    if (ref.current === null) {
-      return;
-    }
-
-    if (onScroll) {
-      onScroll(ref.current.scrollLeft);
-    }
-  }, [onScroll]);
-
-  var _useState4 = useState(false),
-      disableGradient = _useState4[0],
-      setDisableGradient = _useState4[1];
-
-  useLayoutEffect(function () {
-    if (isEdge()) {
-      setDisableGradient(true);
-    }
-  }, []); // NOTE: Edgeではmaskを使うと要素のレンダリングがバグる（場合によっては画像が表示されない）のでグラデーションを無効にする
-
-  if (!disableGradient && options.hasGradient === true) {
-    var _options$fadeInGradie;
-
-    var fadeInGradient = (_options$fadeInGradie = options.fadeInGradient) != null ? _options$fadeInGradie : false;
-    var 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
-  })));
-}
-var CarouselContainer = styled.ul(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  vertical-align: top;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n\n  /* \u6700\u5C0F\u5E45\u3092100%\u306B\u3057\u3066\u89AA\u8981\u7D20\u306B\u3074\u3063\u305F\u308A\u304F\u3063\u3064\u3051\u308B\u3053\u3068\u3067\u5B50\u8981\u7D20\u3067\u8981\u7D20\u3092\u5747\u7B49\u306B\u5272\u308A\u4ED8\u3051\u308B\u306A\u3069\u3092\u51FA\u6765\u308B\u3088\u3046\u306B\u3057\u3066\u3042\u308B */\n  min-width: 100%;\n  box-sizing: border-box;\n\n  ", "\n"])), function (_ref2) {
-  var _ref2$centerItems = _ref2.centerItems,
-      centerItems = _ref2$centerItems === void 0 ? false : _ref2$centerItems;
-  return centerItems ? css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n          display: flex;\n          width: max-content;\n          margin: 0 auto;\n        "]))) : css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n          display: inline-flex;\n          margin: 0;\n        "])));
-});
-var ButtonsContainer = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  transition: 0.4s opacity;\n"])));
-var Container = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  &:hover ", " {\n    opacity: 1;\n  }\n\n  /* CarouselButton\u306E\u4E2D\u306Bz-index:1\u304C\u3042\u308B\u306E\u3067\u3053\u3053\u3067\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u5207\u308B */\n  position: relative;\n  z-index: 0;\n"])), ButtonsContainer);
-var ScrollArea = styled(animated.div)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  padding: 0;\n  margin: 0;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  scrollbar-width: none;\n"])));
-var GradientContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  /* NOTE: LeftGradient\u304C\u306F\u307F\u51FA\u308B\u305F\u3081hidden */\n  overflow: hidden;\n  ", "\n\n  margin-right: ", "px;\n  /* stylelint-disable-next-line no-duplicate-selectors */\n  ", " {\n    padding-right: ", "px;\n  }\n"])), function (p) {
-  return !p.fadeInGradient && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      margin-left: ", "px;\n      ", " {\n        padding-left: ", "px;\n      }\n    "])), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
-}, -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
-var RightGradient = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  mask-image: linear-gradient(\n    to right,\n    #000 calc(100% - ", "px),\n    transparent\n  );\n"])), GRADIENT_WIDTH);
-var LeftGradient = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  /* NOTE: mask-position \u304C left \u2192 negative px \u306E\u6642\u3001right \u2192 abs(negative px) \u306E\u4F4D\u7F6E\u306B\u8868\u793A\u3055\u308C\u308B\u305F\u3081 */\n  margin-right: ", "px;\n  padding-right: ", "px;\n  /* NOTE: mask-position \u306B transition \u3092\u3064\u3051\u305F\u3044\u304C vender prefixes \u5BFE\u7B56\u3067 all \u306B\u3064\u3051\u308B */\n  transition: 0.2s all ease-in;\n  mask: linear-gradient(to right, transparent, #000 ", "px)\n    ", "px 0;\n"])), -GRADIENT_WIDTH, GRADIENT_WIDTH, GRADIENT_WIDTH, function (p) {
-  return p.show ? 0 : -GRADIENT_WIDTH;
-});
-
-var _templateObject$2;
-
-function DotsIcon(_ref) {
-  var size = _ref.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\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)"
-  }));
-}
-
-DotsIcon.defaultProps = {
-  size: 16
-};
-var StyledSVG = styled.svg(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  fill: currentColor;\n"])));
-
-var _templateObject$1;
-var WedgeDirection;
-
-(function (WedgeDirection) {
-  WedgeDirection["Up"] = "up";
-  WedgeDirection["Down"] = "down";
-  WedgeDirection["Left"] = "left";
-  WedgeDirection["Right"] = "right";
-})(WedgeDirection || (WedgeDirection = {}));
-
-function WedgeIcon(_ref) {
-  var size = _ref.size,
-      direction = _ref.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);
-  }
-}
-
-var StyledPolyline = styled.polyline(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n  stroke: currentColor;\n"])));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function usePagerWindow(page, pageCount, windowSize) {
-  if (windowSize === void 0) {
-    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 + ")");
-  }
-
-  var window = useMemo(function () {
-    var visibleFirstPage = 1;
-    var visibleLastPage = Math.min(pageCount, Math.max(page + Math.floor(windowSize / 2), windowSize));
-
-    if (visibleLastPage <= windowSize) {
-      // 表示範囲が1-7ページなら省略は無い。
-      return Array.from({
-        length: 1 + visibleLastPage - visibleFirstPage
-      }, function (_, i) {
-        return visibleFirstPage + i;
-      });
-    } else {
-      var start = visibleLastPage - (windowSize - 1) + 2;
-      return [// 表示範囲が1-7ページを超えるなら、
-      // - 1ページ目は固定で表示する
-      visibleFirstPage, // - 2ページ目から現在のページの直前までは省略する
-      '...'].concat(Array.from({
-        length: 1 + visibleLastPage - start
-      }, function (_, i) {
-        return 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(_ref) {
-  var page = _ref.page,
-      pageCount = _ref.pageCount,
-      onChange = _ref.onChange;
-  // TODO: refactor Pager and LinkPager to use a common parent component
-  var window = usePagerWindow(page, pageCount);
-  var makeClickHandler = useCallback(function (value) {
-    return function () {
-      onChange(value);
-    };
-  }, [onChange]);
-  var hasNext = page < pageCount;
-  var 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(function (p) {
-    return 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(_ref2) {
-  var page = _ref2.page,
-      pageCount = _ref2.pageCount,
-      makeUrl = _ref2.makeUrl;
-
-  var _useComponentAbstract = useComponentAbstraction(),
-      Link = _useComponentAbstract.Link;
-
-  var window = usePagerWindow(page, pageCount);
-  var hasNext = page < pageCount;
-  var 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(function (p) {
-    return 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
-  }))));
-}
-var PagerContainer = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var CircleButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-size: 1rem;\n  line-height: calc(1em + 8px);\n  text-decoration: none;\n  border: none;\n  outline: none;\n  touch-action: manipulation;\n  user-select: none;\n  transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s,\n    background 0.2s ease 0s, opacity 0.2s ease 0s;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-sizing: content-box;\n  min-width: 24px;\n  min-height: 24px;\n  padding: 8px;\n  cursor: pointer;\n  font-weight: bold;\n  /* HACK:\n   * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.\n   * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.\n   */\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-transform: translateZ(0);\n\n  &[hidden] {\n    visibility: hidden;\n    display: block;\n  }\n\n  border-radius: 48px;\n\n  background: transparent;\n  color: ", ";\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &[aria-current] {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &[aria-current]:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  ", "\n"])), function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.color.text3;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.color.surface3;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.color.text2;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.color.surface6;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.color.text5;
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.color.surface6;
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.color.text5;
-}, function (_ref10) {
-  var _ref10$noBackground = _ref10.noBackground,
-      noBackground = _ref10$noBackground === void 0 ? false : _ref10$noBackground;
-  return noBackground && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      /* stylelint-disable-next-line no-duplicate-selectors */\n      &:hover {\n        background: transparent;\n      }\n    "])));
-});
-var Spacer = styled(CircleButton).attrs({
-  type: 'button',
-  disabled: true
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  && {\n    color: ", ";\n    background: none;\n  }\n"])), function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.color.text3;
-});
-var Text = 'span';
-
-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, StyledCancelLayoutItemBodyPadding, StyledLayoutItemBody, index$2 as SwitchCheckbox, TextEllipsis, index$1 as WithIcon, useElementSize, useLayoutItemBodyPadding, useMedia, useMediaScreen1 };
-//# sourceMappingURL=index.module.js.map