@charcoal-ui/react-sandbox 2.5.0 → 2.7.0

package/dist/index.modern.js

@@ -1,2275 +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;
-}
-
-let _$d = t => t,
-    _t$e,
-    _t2$a,
-    _t3$9,
-    _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$e || (_t$e = _$d`
-  display: block;
-  outline: none;
-  border: none;
-  padding: 9px 24px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  border-radius: /* absurd radius, but ensures rounded corners */ 2000px;
-  transition: color 0.2s;
-  color: ${0};
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-
-  &:hover {
-    color: ${0};
-  }
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  @media ${0} {
-    padding: 5px 16px;
-  }
-`), ({
-  theme
-}) => theme.color.text3, ({
-  theme
-}) => theme.color.text2, ({
-  hover: _hover = false
-}) => _hover && css(_t2$a || (_t2$a = _$d`
-      color: ${0};
-    `), ({
-  theme
-}) => theme.color.text2), ({
-  active: _active = false
-}) => _active && css(_t3$9 || (_t3$9 = _$d`
-      background-color: ${0};
-      color: ${0};
-    `), ({
-  theme
-}) => theme.color.surface3, ({
-  theme
-}) => theme.color.text2), ({
-  active: _active2 = false,
-  reactive: _reactive = false
-}) => _active2 && !_reactive && css(_t4$8 || (_t4$8 = _$d`
-      cursor: default;
-    `)), ({
-  theme
-}) => maxWidth(theme.breakpoint.screen1));
-const padding0Css = css(_t5$6 || (_t5$6 = _$d`
-  padding: 0;
-
-  @media ${0} {
-    padding: 0;
-  }
-`), ({
-  theme
-}) => maxWidth(theme.breakpoint.screen1));
-const ButtonLike = styled.button(_t6$5 || (_t6$5 = _$d`
-  ${0}
-`), buttonCss);
-const PlainElement = styled.span(_t7$5 || (_t7$5 = _$d`
-  ${0}
-`), buttonCss);
-const StyledButtonLike = styled(ButtonLike)(_t8$5 || (_t8$5 = _$d`
-  ${0};
-  ${0}
-  ${0}
-`), 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 = _$d`
-  display: flex;
-`));
-
-const theme = createTheme(styled);
-
-let _$c = t => t,
-    _t$d;
-function IconBase({
-  size = 24,
-  viewBoxSize,
-  currentColor,
-  path,
-  transform,
-  fillRule,
-  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
-  }));
-}
-const Icon$2 = styled.svg(_t$d || (_t$d = _$c`
-  stroke: none;
-  fill: ${0};
-  width: ${0}px;
-  height: ${0}px;
-  line-height: 0;
-  font-size: 0;
-  vertical-align: middle;
-`), ({
-  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 _$b = t => t,
-    _t$c;
-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$c || (_t$c = _$b`
-  fill: ${0};
-  fill-rule: evenodd;
-`), ({
-  theme
-}) => theme.color.surface1);
-
-let _$a = t => t,
-    _t$b,
-    _t2$9,
-    _t3$8,
-    _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$b || (_t$b = _$a`
-  ${0}
-
-  @media ${0} {
-    ${0}
-  }
-
-  display: flex;
-  align-items: flex-start;
-  ${0}
-`), 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$9 || (_t2$9 = _$a`
-      justify-content: center;
-    `)));
-const IconWrap = styled.div(_t3$8 || (_t3$8 = _$a`
-  display: flex;
-  align-items: center;
-  color: ${0};
-  height: 22px;
-  margin: -4px 4px -4px 0;
-`), p => p.theme.color.text4);
-const Text$2 = styled.p(_t4$7 || (_t4$7 = _$a`
-  ${0}
-  margin: 0;
-`), 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 _$9 = t => t,
-    _t$a,
-    _t2$8,
-    _t3$7,
-    _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$a || (_t$a = _$9`
-  margin-bottom: 40px;
-  overflow-x: auto;
-  word-break: keep-all;
-
-  @media ${0} {
-    margin-bottom: 0;
-    padding-left: 16px;
-    padding-bottom: 16px;
-    background-color: ${0};
-  }
-`), ({
-  theme
-}) => maxWidth(theme.breakpoint.screen1), ({
-  theme
-}) => theme.color.surface2);
-const GlobalStyle = createGlobalStyle(_t2$8 || (_t2$8 = _$9`
-  :root {
-    background-color: ${0};
-
-    @media ${0} {
-      background-color: ${0};
-    }
-  }
-`), ({
-  theme
-}) => theme.color.background2, ({
-  theme
-}) => maxWidth(theme.breakpoint.screen1), ({
-  theme
-}) => theme.color.background1);
-const LayoutRoot = styled.div(_t3$7 || (_t3$7 = _$9`
-  display: flex;
-  background-color: ${0};
-
-  @media ${0} {
-    background-color: ${0};
-  }
-`), ({
-  theme
-}) => theme.color.background2, ({
-  theme
-}) => maxWidth(theme.breakpoint.screen1), ({
-  theme
-}) => theme.color.background1);
-const LeftArea = styled.div(_t4$6 || (_t4$6 = _$9`
-  min-width: ${0}px;
-  padding: 40px 0 40px ${0}px;
-  box-sizing: border-box;
-
-  @media ${0} {
-    display: none;
-  }
-`), RESPONSIVE_LEFT_WIDTH, GUTTER_UNIT, ({
-  theme
-}) => theme.breakpoint.screen3);
-const MainArea = styled.div(_t5$5 || (_t5$5 = _$9`
-  flex-grow: 1;
-  /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
-  min-width: 0;
-  max-width: ${0}px;
-  padding: 40px ${0}px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-
-  @media ${0} {
-    padding: 0;
-  }
-`), 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 = _$9`
-  font-weight: bold;
-  margin-bottom: 12px;
-  font-size: 20px;
-  line-height: 28px;
-  color: ${0};
-
-  @media ${0} {
-    margin-bottom: 0;
-    padding: 12px;
-    font-size: 16px;
-    line-height: 24px;
-    display: flex;
-    justify-content: center;
-    background-color: ${0};
-  }
-`), ({
-  theme
-}) => theme.color.text2, ({
-  theme
-}) => maxWidth(theme.breakpoint.screen1), ({
-  theme
-}) => theme.color.surface2);
-const Grid = styled.div(_t7$4 || (_t7$4 = _$9`
-  display: grid;
-  gap: ${0}px;
-  grid-template-columns: 1fr;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: auto;
-
-  @media ${0} {
-    gap: 0;
-    background-color: ${0};
-    padding-bottom: 60px;
-  }
-`), 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 = _$9`
-  grid-column-start: auto;
-  grid-column-end: span ${0};
-  border-radius: 24px;
-  color: ${0};
-  background-color: ${0};
-  /* https://www.w3.org/TR/css-grid-1/#min-size-auto */
-  min-width: 0;
-
-  @media ${0} {
-    ${0}
-  }
-
-  @media ${0} {
-    ${0}
-
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-`), 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 = _$9`
-        grid-column-end: span 2;
-      `)), ({
-  theme
-}) => maxWidth(theme.breakpoint.screen1), p => p.span > 1 && css(_t10$4 || (_t10$4 = _$9`
-        grid-column-end: span 1;
-      `)));
-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 = _$9`
-  padding: 0 ${0}px;
-  height: ${0}px;
-  display: grid;
-  align-items: center;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  background-color: ${0};
-  color: ${0};
-  border-radius: 24px 24px 0 0;
-  ${0}
-
-  @media ${0} {
-    margin-top: 4px;
-    padding: 0 16px;
-    background: none;
-    overflow-x: auto;
-    border-radius: unset;
-    ${0}
-  }
-`), 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 = _$9`
-      justify-content: center;
-    `)), ({
-  theme
-}) => maxWidth(theme.breakpoint.screen1), p => p.wide && css(_t13$1 || (_t13$1 = _$9`
-        height: 48px;
-        margin-top: 0;
-      `)));
-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 = _$9`
-  padding: ${0};
-
-  @media ${0} {
-    padding: ${0};
-  }
-
-  width: 100%;
-  box-sizing: border-box;
-`), 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 = _$9`
-  margin: 0 -${0}px;
-  margin-top: -${0}px;
-
-  @media ${0} {
-    margin: 0 -${0}px;
-    margin-top: -${0}px;
-  }
-`), 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 _$8 = t => t,
-    _t$9,
-    _t2$7,
-    _t3$6;
-/**
- * 複数行のテキストに表示行数制限を設けて`...`で省略する
- */
-
-const TextEllipsis = styled.div.attrs(({
-  children,
-  title: _title = onlyText(children)
-}) => ({
-  title: _title !== '' ? _title : undefined
-}))(_t$9 || (_t$9 = _$8`
-  overflow: hidden;
-  line-height: ${0}px;
-  /* For english */
-  overflow-wrap: break-word;
-
-  ${0}
-`), props => props.lineHeight, ({
-  lineLimit: _lineLimit = 1,
-  lineHeight
-}) => _lineLimit === 1 ? css(_t2$7 || (_t2$7 = _$8`
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        `)) : css(_t3$6 || (_t3$6 = _$8`
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: ${0};
-          /* Fallback for -webkit-line-clamp */
-          max-height: ${0}px;
-        `), _lineLimit, lineHeight * _lineLimit));
-
-const _excluded$2 = ["link", "onClick", "disabled", "primary", "secondary", "gtmClass", "noHover", "children"],
-      _excluded2 = ["icon", "primary"],
-      _excluded3 = ["icon", "primary"];
-
-let _$7 = t => t,
-    _t$8,
-    _t2$6,
-    _t3$5,
-    _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$8 || (_t$8 = _$7`
-  display: flex;
-  height: ${0}px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 ${0}px;
-  user-select: none;
-  cursor: ${0};
-  transition: 0.2s background-color;
-
-  &:hover {
-    ${0}
-  }
-
-  ${0}
-
-  ${0} {
-    cursor: default;
-    pointer-events: none;
-
-    &:hover {
-      background-color: unset;
-    }
-  }
-`), p => p.hasSubLabel ? 56 : 40, p => p.sidePadding, p => p.noClick ? 'default' : 'pointer', p => !p.noHover && css(_t2$6 || (_t2$6 = _$7`
-        background-color: ${0};
-      `), ({
-  theme
-}) => theme.color.surface3), theme(o => o.disabled), disabledSelector);
-const Labels = styled.div(_t3$5 || (_t3$5 = _$7`
-  display: flex;
-  flex-direction: column;
-`));
-const PrimaryText = styled.div(_t4$5 || (_t4$5 = _$7`
-  color: ${0};
-  line-height: 22px;
-  font-size: 14px;
-  display: grid;
-`), p => p.theme.color.text2);
-const SecondaryText = styled.div(_t5$4 || (_t5$4 = _$7`
-  color: ${0};
-  line-height: 18px;
-  font-size: 10px;
-`), 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 = _$7`
-  display: block;
-`));
-function MenuListLinkItemWithIcon(_ref2) {
-  let {
-    icon,
-    primary: text
-  } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
-  const 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(_ref3) {
-  let {
-    icon,
-    primary: text
-  } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-
-  const primary = /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon$1, null, icon), text);
-  return /*#__PURE__*/React.createElement(MenuListItem, _extends({
-    primary: primary
-  }, props));
-}
-const IconContainer = styled.div(_t7$3 || (_t7$3 = _$7`
-  display: grid;
-  gap: 8px;
-  grid-auto-flow: column;
-  align-items: center;
-`));
-const Icon$1 = styled.div(_t8$3 || (_t8$3 = _$7`
-  color: ${0};
-  display: flex;
-`), ({
-  theme
-}) => theme.color.text3);
-const MenuListSpacer = styled.div(_t9$3 || (_t9$3 = _$7`
-  height: 24px;
-`));
-const MenuListLabel = styled.div(_t10$3 || (_t10$3 = _$7`
-  padding: 0 16px;
-  font-size: 12px;
-  line-height: 16px;
-  color: ${0};
-  margin-top: -2px;
-  margin-bottom: 6px;
-`), ({
-  theme
-}) => theme.color.text3);
-
-let _$6 = t => t,
-    _t$7,
-    _t2$5;
-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$7 || (_t$7 = _$6`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-`));
-const LinkItem = styled.div(_t2$5 || (_t2$5 = _$6`
-  display: flex;
-  align-items: center;
-  color: ${0};
-  border-radius: 24px;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 22px;
-  padding: 0 16px;
-  height: 40px;
-  transition: 0.2s color;
-  &:hover {
-    transition: 0.2s color;
-    color: ${0};
-  }
-  &[aria-current] {
-    color: ${0};
-    background-color: ${0};
-  }
-`), ({
-  theme
-}) => theme.color.text3, ({
-  theme
-}) => theme.color.text2, ({
-  theme
-}) => theme.color.text2, ({
-  theme
-}) => theme.color.surface3);
-
-let _$5 = t => t,
-    _t$6,
-    _t2$4,
-    _t3$4,
-    _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$6 || (_t$6 = _$5`
-  ${0}
-`), p => p.rowReverse ? css(_t2$4 || (_t2$4 = _$5`
-          margin-right: 8px;
-        `)) : css(_t3$4 || (_t3$4 = _$5`
-          margin-left: 8px;
-        `)));
-const Label = styled.label(_t4$4 || (_t4$4 = _$5`
-  display: inline-flex;
-  align-items: center;
-  ${0}
-  ${0}
-  cursor: pointer;
-  outline: 0;
-
-  &[aria-disabled='true'] {
-    cursor: auto;
-  }
-`), ({
-  flex
-}) => flex && css(_t5$3 || (_t5$3 = _$5`
-      display: flex;
-      justify-content: space-between;
-    `)), ({
-  rowReverse
-}) => css(_t6$2 || (_t6$2 = _$5`
-      flex-direction: ${0};
-    `), rowReverse ? 'row-reverse' : 'row'));
-const SwitchOuter = styled.span(_t7$2 || (_t7$2 = _$5`
-  display: inline-flex;
-  position: relative;
-  z-index: 0;
-`));
-const SwitchInner = styled.div(_t8$2 || (_t8$2 = _$5`
-  position: relative;
-  box-sizing: border-box;
-  width: 28px;
-  height: 16px;
-  border-radius: 16px;
-  border: 2px solid transparent;
-  background: ${0};
-  transition: box-shadow 0.2s, background-color 0.2s;
-`), ({
-  theme
-}) => theme.color.text4);
-const SwitchInnerKnob = styled.div(_t9$2 || (_t9$2 = _$5`
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  width: 12px;
-  height: 12px;
-  background-color: ${0};
-  border-radius: 50%;
-  transform: translateX(0);
-  transition: transform 0.2s;
-`), ({
-  theme
-}) => theme.color.text5);
-const SwitchInput = styled.input.attrs({
-  type: 'checkbox'
-})(_t10$2 || (_t10$2 = _$5`
-  position: absolute;
-  /* NOTE: this is contained by the GraphicCheckboxOuter */
-  z-index: 1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  /* just to control the clickable area if used standalone */
-  border-radius: 16px;
-  opacity: 0;
-  appearance: none;
-  outline: none;
-  cursor: pointer;
-
-  &:checked {
-    ~ ${0} {
-      background-color: ${0};
-
-      ${0} {
-        transform: translateX(12px);
-      }
-    }
-  }
-
-  &:disabled {
-    cursor: auto;
-
-    ~ ${0} {
-      opacity: ${0};
-    }
-  }
-
-  &:not(:disabled):focus {
-    ~ ${0} {
-      box-shadow: 0 0 0 4px
-        ${0};
-    }
-  }
-`), SwitchInner, ({
-  theme
-}) => theme.color.brand, SwitchInnerKnob, SwitchInner, ({
-  theme
-}) => theme.elementEffect.disabled.opacity, SwitchInner, ({
-  theme
-}) => applyEffect(theme.color.brand, theme.elementEffect.disabled));
-
-let _$4 = t => t,
-    _t$5,
-    _t2$3,
-    _t3$3,
-    _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, 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$5 || (_t$5 = _$4`
-  display: flex;
-  align-items: center;
-`));
-const Text$1 = styled.div(_t2$3 || (_t2$3 = _$4`
-  ${0}
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`), p => !p.fixed && css(_t3$3 || (_t3$3 = _$4`
-      min-width: 0;
-      overflow: hidden;
-    `)));
-
-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, {
-    ref: ref
-  }, children));
-}
-
-const forceCenteringCss = css(_t4$3 || (_t4$3 = _$4`
-  > svg {
-    display: block;
-  }
-`));
-const iconAnchorCss = css(_t5$2 || (_t5$2 = _$4`
-  ${0};
-  ${0}
-`), p => p.show === 'collapse' ? css(_t6$1 || (_t6$1 = _$4`
-          display: none;
-        `)) : css(_t7$1 || (_t7$1 = _$4`
-          visibility: ${0};
-        `), p.show ? 'visible' : 'hidden'), p => p.pre ? css(_t8$1 || (_t8$1 = _$4`
-          margin-right: 4px;
-        `)) : css(_t9$1 || (_t9$1 = _$4`
-          margin-left: 4px;
-        `)));
-const IconAnchorNaive = styled.div(_t10$1 || (_t10$1 = _$4`
-  display: flex;
-  align-items: center;
-
-  ${0}
-`), iconAnchorCss);
-const IconNaive = styled.div(_t11 || (_t11 = _$4`
-  display: inline-flex;
-
-  ${0}
-`), forceCenteringCss);
-const IconAnchor = styled.div(_t12 || (_t12 = _$4`
-  display: flex;
-  position: relative;
-  /* Iconをline-heightに関与させない */
-  height: 0;
-  /* 横方向の領域は確保する */
-  width: ${0}px;
-
-  ${0}
-`), p => p.width, iconAnchorCss);
-const Icon = styled.div(_t13 || (_t13 = _$4`
-  display: inline-flex;
-  position: absolute;
-  transform: translateY(-50%);
-
-  ${0}
-`), 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/');
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-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 _$3 = t => t,
-    _t$4,
-    _t2$2,
-    _t3$2,
-    _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$4 || (_t$4 = _$3`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${0}px;
-  height: ${0}px;
-  border-radius: 50%;
-  background-color: ${0};
-  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;
-  color: ${0};
-`), CAROUSEL_BUTTON_SIZE, CAROUSEL_BUTTON_SIZE, ({
-  theme
-}) => theme.color.surface4, ({
-  theme
-}) => theme.color.text5);
-const Button = styled.button(_t2$2 || (_t2$2 = _$3`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  min-width: 40px;
-  border: none;
-  outline: 0;
-  background: transparent;
-  cursor: pointer;
-  transition: 0.4s visibility, 0.4s opacity;
-  /* つらい */
-  /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */
-  z-index: 1;
-
-  &:hover ${0} {
-    background-color: ${0};
-    color: ${0};
-  }
-
-  &:active ${0} {
-    background-color: ${0};
-    color: ${0};
-  }
-
-  ${0}
-`), 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$2 || (_t3$2 = _$3`
-      visibility: hidden;
-      opacity: 0;
-      pointer-events: none;
-    `)));
-styled(CarouselButtonIcon)(_t4$2 || (_t4$2 = _$3`
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${0};
-    color: ${0};
-  }
-
-  &:active {
-    background-color: ${0};
-    color: ${0};
-  }
-`), ({
-  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 = _$3`
-  @media (hover: none) and (pointer: coarse) {
-    display: none;
-  }
-`));
-
-let _$2 = t => t,
-    _t$3,
-    _t2$1,
-    _t3$1,
-    _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]);
-  useIsomorphicLayoutEffect(() => {
-    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]); // 初期スクロールを行う
-
-  useIsomorphicLayoutEffect(() => {
-    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);
-  useIsomorphicLayoutEffect(() => {
-    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$3 || (_t$3 = _$2`
-  vertical-align: top;
-  overflow: hidden;
-  list-style: none;
-  padding: 0;
-
-  /* 最小幅を100%にして親要素にぴったりくっつけることで子要素で要素を均等に割り付けるなどを出来るようにしてある */
-  min-width: 100%;
-  box-sizing: border-box;
-
-  ${0}
-`), ({
-  centerItems: _centerItems = false
-}) => _centerItems ? css(_t2$1 || (_t2$1 = _$2`
-          display: flex;
-          width: max-content;
-          margin: 0 auto;
-        `)) : css(_t3$1 || (_t3$1 = _$2`
-          display: inline-flex;
-          margin: 0;
-        `)));
-const ButtonsContainer = styled.div(_t4$1 || (_t4$1 = _$2`
-  opacity: 0;
-  transition: 0.4s opacity;
-`));
-const Container = styled.div(_t5 || (_t5 = _$2`
-  &:hover ${0} {
-    opacity: 1;
-  }
-
-  /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */
-  position: relative;
-  z-index: 0;
-`), ButtonsContainer);
-const ScrollArea = styled(animated.div)(_t6 || (_t6 = _$2`
-  overflow-x: auto;
-  padding: 0;
-  margin: 0;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  scrollbar-width: none;
-`));
-const GradientContainer = styled.div(_t7 || (_t7 = _$2`
-  /* NOTE: LeftGradientがはみ出るためhidden */
-  overflow: hidden;
-  ${0}
-
-  margin-right: ${0}px;
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  ${0} {
-    padding-right: ${0}px;
-  }
-`), p => !p.fadeInGradient && css(_t8 || (_t8 = _$2`
-      margin-left: ${0}px;
-      ${0} {
-        padding-left: ${0}px;
-      }
-    `), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
-const RightGradient = styled.div(_t9 || (_t9 = _$2`
-  mask-image: linear-gradient(
-    to right,
-    #000 calc(100% - ${0}px),
-    transparent
-  );
-`), GRADIENT_WIDTH);
-const LeftGradient = styled.div(_t10 || (_t10 = _$2`
-  /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */
-  margin-right: ${0}px;
-  padding-right: ${0}px;
-  /* NOTE: mask-position に transition をつけたいが vender prefixes 対策で all につける */
-  transition: 0.2s all ease-in;
-  mask: linear-gradient(to right, transparent, #000 ${0}px)
-    ${0}px 0;
-`), -GRADIENT_WIDTH, GRADIENT_WIDTH, GRADIENT_WIDTH, p => p.show ? 0 : -GRADIENT_WIDTH);
-
-let _$1 = t => t,
-    _t$2;
-
-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$2 || (_t$2 = _$1`
-  fill: currentColor;
-`));
-
-let _ = t => t,
-    _t$1;
-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$1 || (_t$1 = _`
-  fill: none;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  stroke: currentColor;
-`));
-
-let _2 = t => t,
-    _t,
-    _t2,
-    _t3,
-    _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 || (_t = _2`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`));
-const CircleButton = styled.button(_t2 || (_t2 = _2`
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  user-select: none;
-  transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s,
-    background 0.2s ease 0s, opacity 0.2s ease 0s;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  /* HACK:
-   * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
-   * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
-   */
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-transform: translateZ(0);
-
-  &[hidden] {
-    visibility: hidden;
-    display: block;
-  }
-
-  border-radius: 48px;
-
-  background: transparent;
-  color: ${0};
-
-  &:hover {
-    background: ${0};
-    color: ${0};
-  }
-
-  &[aria-current] {
-    background-color: ${0};
-    color: ${0};
-  }
-
-  &[aria-current]:hover {
-    background-color: ${0};
-    color: ${0};
-  }
-
-  ${0}
-`), ({
-  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 || (_t3 = _2`
-      /* stylelint-disable-next-line no-duplicate-selectors */
-      &:hover {
-        background: transparent;
-      }
-    `)));
-const Spacer = styled(CircleButton).attrs({
-  type: 'button',
-  disabled: true
-})(_t4 || (_t4 = _2`
-  && {
-    color: ${0};
-    background: none;
-  }
-`), ({
-  theme
-}) => theme.color.text3);
-const 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.modern.js.map