@charcoal-ui/react-sandbox 2.5.0 → 2.6.0

package/dist/index.esm.js

@@ -0,0 +1,1816 @@
+// src/components/Filter/index.tsx
+import React from "react";
+import styled, { css } from "styled-components";
+import { useComponentAbstraction } from "@charcoal-ui/react";
+import { maxWidth } from "@charcoal-ui/utils";
+var FilterButton = React.forwardRef(function FilterButton2({
+  onClick,
+  children,
+  active = false,
+  hover,
+  reactive = false
+}, ref) {
+  return /* @__PURE__ */ React.createElement(
+    ButtonLike,
+    {
+      active,
+      reactive,
+      hover,
+      onClick: active && !reactive ? void 0 : onClick,
+      ref
+    },
+    children
+  );
+});
+var FilterIconButton = React.forwardRef(function FilterIconButton2({
+  onClick,
+  children,
+  active = false,
+  hover,
+  reactive = false,
+  width,
+  height
+}, ref) {
+  return /* @__PURE__ */ React.createElement(
+    StyledButtonLike,
+    {
+      active,
+      reactive,
+      hover,
+      onClick: active && !reactive ? void 0 : onClick,
+      ref,
+      buttonWidth: width,
+      buttonHeight: height
+    },
+    children
+  );
+});
+var FilterLink = React.forwardRef(function FilterLink2({
+  onClick,
+  children,
+  active = false,
+  hover,
+  reactive = false,
+  ...props
+}, ref) {
+  const { Link } = useComponentAbstraction();
+  if (active && !reactive) {
+    return /* @__PURE__ */ React.createElement(PlainElement, { active: true, hover, ref }, children);
+  } else {
+    return /* @__PURE__ */ React.createElement(Link, { ...props, onClick }, /* @__PURE__ */ React.createElement(
+      PlainElement,
+      {
+        active,
+        reactive,
+        hover,
+        ref
+      },
+      children
+    ));
+  }
+});
+var buttonCss = css`
+  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: ${({ theme: theme2 }) => theme2.color.text3};
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+
+  &:hover {
+    color: ${({ theme: theme2 }) => theme2.color.text2};
+  }
+
+  ${({ hover = false }) => hover && css`
+      color: ${({ theme: theme2 }) => theme2.color.text2};
+    `}
+
+  ${({ active = false }) => active && css`
+      background-color: ${({ theme: theme2 }) => theme2.color.surface3};
+      color: ${({ theme: theme2 }) => theme2.color.text2};
+    `}
+
+  ${({ active = false, reactive = false }) => active && !reactive && css`
+      cursor: default;
+    `}
+
+  @media ${({ theme: theme2 }) => maxWidth(theme2.breakpoint.screen1)} {
+    padding: 5px 16px;
+  }
+`;
+var padding0Css = css`
+  padding: 0;
+
+  @media ${({ theme: theme2 }) => maxWidth(theme2.breakpoint.screen1)} {
+    padding: 0;
+  }
+`;
+var ButtonLike = styled.button`
+  ${buttonCss}
+`;
+var PlainElement = styled.span`
+  ${buttonCss}
+`;
+var StyledButtonLike = styled(ButtonLike)`
+  ${padding0Css};
+  ${(p) => p.buttonWidth !== void 0 && `width: ${p.buttonWidth}px;`}
+  ${(p) => p.buttonHeight !== void 0 && `height: ${p.buttonHeight}px;`}
+`;
+var Filter = styled.div`
+  display: flex;
+`;
+var Filter_default = Filter;
+
+// src/components/HintText/index.tsx
+import React4 from "react";
+import styled5, { css as css2 } from "styled-components";
+
+// src/styled.ts
+import styled2 from "styled-components";
+import { createTheme } from "@charcoal-ui/styled";
+var theme = createTheme(styled2);
+
+// src/components/icons/InfoIcon.tsx
+import React3 from "react";
+import styled4 from "styled-components";
+
+// src/components/icons/Base.tsx
+import React2 from "react";
+import styled3 from "styled-components";
+function IconBase({
+  size: size3 = 24,
+  viewBoxSize,
+  currentColor,
+  path: path2,
+  transform,
+  fillRule,
+  clipRule
+}) {
+  return /* @__PURE__ */ React2.createElement(
+    Icon,
+    {
+      viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+      size: size3,
+      currentColor
+    },
+    /* @__PURE__ */ React2.createElement(
+      IconBasePath,
+      {
+        path: path2,
+        transform,
+        fillRule,
+        clipRule
+      }
+    )
+  );
+}
+var Icon = styled3.svg`
+  stroke: none;
+  fill: ${({ currentColor = false, theme: theme2 }) => currentColor ? "currentColor" : theme2.color.text2};
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  line-height: 0;
+  font-size: 0;
+  vertical-align: middle;
+`;
+var IconBasePath = ({
+  path: path2,
+  transform,
+  fillRule,
+  clipRule
+}) => {
+  if (typeof path2 === "string") {
+    return /* @__PURE__ */ React2.createElement(
+      "path",
+      {
+        d: path2,
+        transform,
+        fillRule,
+        clipRule
+      }
+    );
+  } else {
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, path2);
+  }
+};
+
+// src/components/icons/InfoIcon.tsx
+var size = 16;
+function InfoIcon() {
+  const path2 = /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    "path",
+    {
+      d: "M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183\n           0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Path,
+    {
+      d: "M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629\n           4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036\n           9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75\n           5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25\n           8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8\n           6.75C7.44772 6.75 7 7.19772 7 7.75Z"
+    }
+  ));
+  return /* @__PURE__ */ React3.createElement(IconBase, { viewBoxSize: size, size, currentColor: true, path: path2 });
+}
+var Path = styled4.path`
+  fill: ${({ theme: theme2 }) => theme2.color.surface1};
+  fill-rule: evenodd;
+`;
+
+// src/components/HintText/index.tsx
+import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
+function HintText({ children, context, className }) {
+  return /* @__PURE__ */ React4.createElement(Container, { className, context }, /* @__PURE__ */ React4.createElement(IconWrap, null, /* @__PURE__ */ React4.createElement(InfoIcon, null)), /* @__PURE__ */ React4.createElement(Text, null, children));
+}
+var Container = styled5.div.attrs(
+  styledProps
+)`
+  ${(p) => theme((o) => [
+  o.bg.surface3,
+  o.borderRadius(8),
+  o.padding.vertical(p.default.vertical),
+  o.padding.horizontal(p.default.horizontal)
+])}
+
+  @media ${({ theme: t }) => maxWidth2(t.breakpoint.screen1)} {
+    ${(p) => theme((o) => [
+  o.padding.vertical(p.screen1.vertical),
+  o.padding.horizontal(p.screen1.horizontal)
+])}
+  }
+
+  display: flex;
+  align-items: flex-start;
+  ${(p) => p.context === "page" && css2`
+      justify-content: center;
+    `}
+`;
+var IconWrap = styled5.div`
+  display: flex;
+  align-items: center;
+  color: ${(p) => p.theme.color.text4};
+  height: 22px;
+  margin: -4px 4px -4px 0;
+`;
+var Text = styled5.p`
+  ${theme((o) => [o.font.text2, o.typography(14)])}
+  margin: 0;
+`;
+function styledProps(props) {
+  return { ...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
+        }
+      };
+  }
+}
+
+// src/components/Layout/index.tsx
+import React5, { useContext } from "react";
+import styled6, { createGlobalStyle, css as css3 } from "styled-components";
+
+// src/foundation/contants.ts
+import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from "@charcoal-ui/foundation";
+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
+);
+
+// src/foundation/hooks.ts
+import {
+  useCallback,
+  useDebugValue,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import ReactDOM from "react-dom";
+import { useTheme } from "styled-components";
+import { maxWidth as maxWidth3 } from "@charcoal-ui/utils";
+function useMediaScreen1() {
+  return useMedia(maxWidth3(useTheme().breakpoint.screen1));
+}
+function useMedia(query) {
+  const matcher = useMemo(
+    () => __TEST__ ? {
+      matches: false,
+      addListener: () => {
+      },
+      removeListener: () => {
+      }
+    } : matchMedia(query),
+    [query]
+  );
+  const [matches, setMatches] = useState(matcher.matches);
+  if (matcher.matches !== matches) {
+    setMatches(matcher.matches);
+  }
+  const callback = (e) => {
+    try {
+      ReactDOM.flushSync(() => {
+        setMatches(e.matches);
+      });
+    } catch {
+      setMatches(e.matches);
+    }
+  };
+  useLayoutEffect(() => {
+    matcher.addListener(callback);
+    setMatches(matcher.matches);
+    return () => {
+      matcher.removeListener(callback);
+    };
+  }, [matcher]);
+  useDebugValue(`${query}: ${matches.toString()}`);
+  return matches;
+}
+function measure(ref) {
+  return ref !== null ? ref.getBoundingClientRect() : void 0;
+}
+function useElementSize(ref, deps = []) {
+  const [size3, setSize] = useReducer(
+    (state, next) => {
+      if (state === void 0 || next === void 0) {
+        return next;
+      }
+      if (state.height === next.height && state.width === next.width) {
+        return state;
+      }
+      return next;
+    },
+    void 0
+  );
+  const [watch, setWatch] = useState(null);
+  useLayoutEffect(() => {
+    if (watch === null) {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      const newSize = measure(watch);
+      setSize(newSize);
+    });
+    observer.observe(watch);
+    return () => {
+      observer.unobserve(watch);
+      setSize(void 0);
+    };
+  }, [watch]);
+  useLayoutEffect(() => {
+    if (ref.current !== watch) {
+      setWatch(ref.current);
+    }
+  });
+  useLayoutEffect(() => {
+    if (deps.length > 0) {
+      setSize(measure(ref.current));
+    }
+  }, deps);
+  useDebugValue(size3);
+  return size3;
+}
+function useDebounceAnimationState(defaultValue) {
+  const [state, setState] = useState(defaultValue);
+  const timer = useRef();
+  const setDebounceState = useCallback((value, force = false) => {
+    if (force) {
+      setState(value);
+      return;
+    }
+    if (timer.current !== void 0) {
+      return;
+    }
+    timer.current = requestAnimationFrame(() => {
+      setState(value);
+      if (timer.current !== void 0) {
+        timer.current = void 0;
+      }
+    });
+  }, []);
+  return [state, setDebounceState];
+}
+
+// src/components/Layout/index.tsx
+import { columnSystem as columnSystem2, COLUMN_UNIT as COLUMN_UNIT2, GUTTER_UNIT as GUTTER_UNIT2 } from "@charcoal-ui/foundation";
+import { maxWidth as maxWidth4 } from "@charcoal-ui/utils";
+var LayoutConfigContext = React5.createContext({
+  wide: false,
+  center: false,
+  withLeft: false
+});
+function Layout({
+  menu,
+  children,
+  header,
+  center = false,
+  wide,
+  isHeaderTopMenu = false
+}) {
+  const config = {
+    center,
+    wide: center ? true : wide ?? false,
+    withLeft: menu != null && !isHeaderTopMenu
+  };
+  return /* @__PURE__ */ React5.createElement(LayoutRoot, null, /* @__PURE__ */ React5.createElement(LayoutConfigContext.Provider, { value: config }, config.withLeft && /* @__PURE__ */ React5.createElement(LeftArea, null, menu), /* @__PURE__ */ React5.createElement(MainArea, { center }, header != null && /* @__PURE__ */ React5.createElement(Header, null, header), isHeaderTopMenu && /* @__PURE__ */ React5.createElement(HeaderTopMenuContainer, null, menu), /* @__PURE__ */ React5.createElement(Grid, null, children))), /* @__PURE__ */ React5.createElement(GlobalStyle, null));
+}
+var HeaderTopMenuContainer = styled6.div`
+  margin-bottom: 40px;
+  overflow-x: auto;
+  word-break: keep-all;
+
+  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+    margin-bottom: 0;
+    padding-left: 16px;
+    padding-bottom: 16px;
+    background-color: ${({ theme: theme2 }) => theme2.color.surface2};
+  }
+`;
+var GlobalStyle = createGlobalStyle`
+  :root {
+    background-color: ${({ theme: theme2 }) => theme2.color.background2};
+
+    @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+      background-color: ${({ theme: theme2 }) => theme2.color.background1};
+    }
+  }
+`;
+var LayoutRoot = styled6.div`
+  display: flex;
+  background-color: ${({ theme: theme2 }) => theme2.color.background2};
+
+  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+    background-color: ${({ theme: theme2 }) => theme2.color.background1};
+  }
+`;
+var LeftArea = styled6.div`
+  min-width: ${RESPONSIVE_LEFT_WIDTH}px;
+  padding: 40px 0 40px ${GUTTER_UNIT2}px;
+  box-sizing: border-box;
+
+  @media ${({ theme: theme2 }) => theme2.breakpoint.screen3} {
+    display: none;
+  }
+`;
+var MainArea = styled6.div`
+  flex-grow: 1;
+  /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
+  min-width: 0;
+  max-width: ${(p) => p.center ? columnSystem2(6, COLUMN_UNIT2, GUTTER_UNIT2) : RESPONSIVE_MAIN_MAX_WIDTH}px;
+  padding: 40px ${MAIN_COLUMN_HORIZONTAL_MIN_MARGIN}px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+
+  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+    padding: 0;
+  }
+`;
+var Header = styled6.div`
+  font-weight: bold;
+  margin-bottom: 12px;
+  font-size: 20px;
+  line-height: 28px;
+  color: ${({ theme: theme2 }) => theme2.color.text2};
+
+  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+    margin-bottom: 0;
+    padding: 12px;
+    font-size: 16px;
+    line-height: 24px;
+    display: flex;
+    justify-content: center;
+    background-color: ${({ theme: theme2 }) => theme2.color.surface2};
+  }
+`;
+var Grid = styled6.div`
+  display: grid;
+  gap: ${GUTTER_UNIT2}px;
+  grid-template-columns: 1fr;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: auto;
+
+  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+    gap: 0;
+    background-color: ${({ theme: theme2 }) => theme2.color.background1};
+    padding-bottom: 60px;
+  }
+`;
+var LayoutItem = React5.forwardRef(
+  function LayoutItem2({ span, children }, ref) {
+    const { withLeft } = useContext(LayoutConfigContext);
+    return /* @__PURE__ */ React5.createElement(StyledLayoutItem, { span, withLeft, ref }, children);
+  }
+);
+var StyledLayoutItem = styled6.div`
+  grid-column-start: auto;
+  grid-column-end: span ${(p) => p.span};
+  border-radius: 24px;
+  color: ${({ theme: theme2 }) => theme2.color.text2};
+  background-color: ${({ theme: theme2 }) => theme2.color.background1};
+  /* https://www.w3.org/TR/css-grid-1/#min-size-auto */
+  min-width: 0;
+
+  @media ${(p) => p.withLeft ? p.theme.breakpoint.screen4 : p.theme.breakpoint.screen3} {
+    ${(p) => p.span > 2 && css3`
+        grid-column-end: span 2;
+      `}
+  }
+
+  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+    ${(p) => p.span > 1 && css3`
+        grid-column-end: span 1;
+      `}
+
+    border-radius: 0;
+    padding-bottom: 40px;
+  }
+`;
+function LayoutItemHeader({ children }) {
+  const { wide, center } = useContext(LayoutConfigContext);
+  return /* @__PURE__ */ React5.createElement(StyledLayoutItemHeader, { wide, center }, children);
+}
+var StyledLayoutItemHeader = styled6.div`
+  padding: 0 ${(p) => p.wide ? 40 : 24}px;
+  height: ${(p) => p.wide ? 64 : 48}px;
+  display: grid;
+  align-items: center;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: bold;
+  background-color: ${({ theme: theme2 }) => theme2.color.surface2};
+  color: ${({ theme: theme2 }) => theme2.color.text2};
+  border-radius: 24px 24px 0 0;
+  ${(p) => p.center && css3`
+      justify-content: center;
+    `}
+
+  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+    margin-top: 4px;
+    padding: 0 16px;
+    background: none;
+    overflow-x: auto;
+    border-radius: unset;
+    ${(p) => p.wide && css3`
+        height: 48px;
+        margin-top: 0;
+      `}
+  }
+`;
+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({
+  children,
+  horizontal = false,
+  narrow = false
+}) {
+  const { wide } = useContext(LayoutConfigContext);
+  return /* @__PURE__ */ React5.createElement(StyledLayoutItemBody, { wide, horizontal, narrow }, children);
+}
+var StyledLayoutItemBody = styled6.div`
+  padding: ${(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`};
+
+  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+    padding: ${(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}`};
+  }
+
+  width: 100%;
+  box-sizing: border-box;
+`;
+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__ */ React5.createElement(StyledCancelLayoutItemBodyPadding, { wide, cancelTop }, children);
+}
+var StyledCancelLayoutItemBodyPadding = styled6.div`
+  margin: 0 -${(p) => p.wide ? LAYOUT_ITEM_BODY_PADDING.wide.x : LAYOUT_ITEM_BODY_PADDING.default.x}px;
+  margin-top: -${({ cancelTop = false, wide }) => !cancelTop ? 0 : wide ? LAYOUT_ITEM_BODY_PADDING.wide.y : LAYOUT_ITEM_BODY_PADDING.default.y}px;
+
+  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
+    margin: 0 -${LAYOUT_ITEM_BODY_PADDING.column1.x}px;
+    margin-top: -${({ cancelTop = false }) => !cancelTop ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x}px;
+  }
+`;
+
+// src/components/LeftMenu/index.tsx
+import React7 from "react";
+import styled9 from "styled-components";
+
+// src/components/MenuListItem/index.tsx
+import React6, { useContext as useContext2 } from "react";
+import styled8, { css as css5 } from "styled-components";
+
+// src/components/TextEllipsis/index.tsx
+import styled7, { css as css4 } from "styled-components";
+
+// src/components/TextEllipsis/helper.ts
+import {
+  Children,
+  isValidElement
+} from "react";
+var hasChildren = (element) => isValidElement(element) && Boolean(element.props.children);
+var childToString = (child) => {
+  if (typeof child === "undefined" || child === null || typeof child === "boolean") {
+    return "";
+  }
+  if (JSON.stringify(child) === "{}") {
+    return "";
+  }
+  return child.toString();
+};
+var onlyText = (children) => {
+  if (!Array.isArray(children) && !isValidElement(children)) {
+    return childToString(children);
+  }
+  return Children.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);
+    },
+    ""
+  );
+};
+
+// src/components/TextEllipsis/index.tsx
+var TextEllipsis = styled7.div.attrs(
+  ({ children, title = onlyText(children) }) => ({
+    title: title !== "" ? title : void 0
+  })
+)`
+  overflow: hidden;
+  line-height: ${(props) => props.lineHeight}px;
+  /* For english */
+  overflow-wrap: break-word;
+
+  ${({ lineLimit = 1, lineHeight }) => lineLimit === 1 ? css4`
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : css4`
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: ${lineLimit};
+          /* Fallback for -webkit-line-clamp */
+          max-height: ${lineHeight * lineLimit}px;
+        `}
+`;
+
+// src/components/MenuListItem/index.tsx
+import { useComponentAbstraction as useComponentAbstraction2 } from "@charcoal-ui/react";
+import { disabledSelector } from "@charcoal-ui/utils";
+var MenuListItemContext = React6.createContext({ padding: 24 });
+function MenuListItem({
+  primary,
+  secondary,
+  onClick,
+  disabled = false,
+  noHover = false,
+  gtmClass,
+  children
+}) {
+  const { padding } = useContext2(MenuListItemContext);
+  return /* @__PURE__ */ React6.createElement(
+    Item,
+    {
+      hasSubLabel: secondary !== void 0,
+      onClick: (e) => !disabled && onClick && onClick(e),
+      sidePadding: padding,
+      noHover,
+      noClick: onClick === void 0,
+      "aria-disabled": disabled,
+      role: onClick !== void 0 ? "button" : void 0,
+      className: gtmClass !== void 0 ? `gtm-${gtmClass}` : void 0
+    },
+    /* @__PURE__ */ React6.createElement(Labels, null, /* @__PURE__ */ React6.createElement(PrimaryText, null, /* @__PURE__ */ React6.createElement(TextEllipsis, { lineHeight: 22, lineLimit: 1 }, primary)), secondary !== void 0 && /* @__PURE__ */ React6.createElement(SecondaryText, null, /* @__PURE__ */ React6.createElement(TextEllipsis, { lineHeight: 22, lineLimit: 1 }, secondary))),
+    children
+  );
+}
+var Item = styled8.div`
+  display: flex;
+  height: ${(p) => p.hasSubLabel ? 56 : 40}px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 ${(p) => p.sidePadding}px;
+  user-select: none;
+  cursor: ${(p) => p.noClick ? "default" : "pointer"};
+  transition: 0.2s background-color;
+
+  &:hover {
+    ${(p) => !p.noHover && css5`
+        background-color: ${({ theme: theme2 }) => theme2.color.surface3};
+      `}
+  }
+
+  ${theme((o) => o.disabled)}
+
+  ${disabledSelector} {
+    cursor: default;
+    pointer-events: none;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+`;
+var Labels = styled8.div`
+  display: flex;
+  flex-direction: column;
+`;
+var PrimaryText = styled8.div`
+  color: ${(p) => p.theme.color.text2};
+  line-height: 22px;
+  font-size: 14px;
+  display: grid;
+`;
+var SecondaryText = styled8.div`
+  color: ${(p) => p.theme.color.text3};
+  line-height: 18px;
+  font-size: 10px;
+`;
+function MenuListLinkItem({
+  link,
+  onClick,
+  disabled = false,
+  primary,
+  secondary,
+  gtmClass,
+  noHover,
+  children,
+  ...linkProps
+}) {
+  const { Link } = useComponentAbstraction2();
+  const props = {
+    disabled,
+    primary,
+    secondary,
+    gtmClass,
+    noHover,
+    children
+  };
+  return disabled ? /* @__PURE__ */ React6.createElement("span", { onClick }, /* @__PURE__ */ React6.createElement(MenuListItem, { ...props })) : /* @__PURE__ */ React6.createElement(A, { as: Link, to: link, onClick, ...linkProps }, /* @__PURE__ */ React6.createElement(MenuListItem, { onClick: () => void 0, ...props }));
+}
+var A = styled8.a`
+  display: block;
+`;
+function MenuListLinkItemWithIcon({
+  icon,
+  primary: text,
+  ...props
+}) {
+  const primary = /* @__PURE__ */ React6.createElement(IconContainer, null, /* @__PURE__ */ React6.createElement(Icon2, null, icon), text);
+  return /* @__PURE__ */ React6.createElement(MenuListLinkItem, { primary, ...props });
+}
+function MenuListItemWithIcon({
+  icon,
+  primary: text,
+  ...props
+}) {
+  const primary = /* @__PURE__ */ React6.createElement(IconContainer, null, /* @__PURE__ */ React6.createElement(Icon2, null, icon), text);
+  return /* @__PURE__ */ React6.createElement(MenuListItem, { primary, ...props });
+}
+var IconContainer = styled8.div`
+  display: grid;
+  gap: 8px;
+  grid-auto-flow: column;
+  align-items: center;
+`;
+var Icon2 = styled8.div`
+  color: ${({ theme: theme2 }) => theme2.color.text3};
+  display: flex;
+`;
+var MenuListSpacer = styled8.div`
+  height: 24px;
+`;
+var MenuListLabel = styled8.div`
+  padding: 0 16px;
+  font-size: 12px;
+  line-height: 16px;
+  color: ${({ theme: theme2 }) => theme2.color.text3};
+  margin-top: -2px;
+  margin-bottom: 6px;
+`;
+
+// src/components/LeftMenu/index.tsx
+import { useComponentAbstraction as useComponentAbstraction3 } from "@charcoal-ui/react";
+function LeftMenu({
+  links,
+  active
+}) {
+  const { Link } = useComponentAbstraction3();
+  return /* @__PURE__ */ React7.createElement(Container2, null, links.map((link, index) => /* @__PURE__ */ React7.createElement(Link, { to: link.to, key: index }, /* @__PURE__ */ React7.createElement(LinkItem, { "aria-current": link.id === active || void 0 }, link.text))));
+}
+function LeftMenuContent({ links }) {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, links.map((link, index) => /* @__PURE__ */ React7.createElement(MenuListLinkItem, { link: link.to, key: index, primary: link.text })));
+}
+var Container2 = styled9.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+var LinkItem = styled9.div`
+  display: flex;
+  align-items: center;
+  color: ${({ theme: theme2 }) => theme2.color.text3};
+  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: ${({ theme: theme2 }) => theme2.color.text2};
+  }
+  &[aria-current] {
+    color: ${({ theme: theme2 }) => theme2.color.text2};
+    background-color: ${({ theme: theme2 }) => theme2.color.surface3};
+  }
+`;
+
+// src/components/SwitchCheckbox/index.tsx
+import React8 from "react";
+import styled10, { css as css6 } from "styled-components";
+import { applyEffect } from "@charcoal-ui/utils";
+var SwitchCheckbox_default = React8.forwardRef(function SwitchCheckbox({
+  gtmClass,
+  flex = false,
+  rowReverse = false,
+  children,
+  disabled,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ React8.createElement(
+    Label,
+    {
+      className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "",
+      flex,
+      rowReverse,
+      "aria-disabled": disabled
+    },
+    /* @__PURE__ */ React8.createElement(SwitchOuter, null, /* @__PURE__ */ React8.createElement(SwitchInput, { ...props, disabled, ref }), /* @__PURE__ */ React8.createElement(SwitchInner, null, /* @__PURE__ */ React8.createElement(SwitchInnerKnob, null))),
+    children != null && /* @__PURE__ */ React8.createElement(Children2, { rowReverse }, children)
+  );
+});
+var Children2 = styled10.span`
+  ${(p) => p.rowReverse ? css6`
+          margin-right: 8px;
+        ` : css6`
+          margin-left: 8px;
+        `}
+`;
+var Label = styled10.label`
+  display: inline-flex;
+  align-items: center;
+  ${({ flex }) => flex && css6`
+      display: flex;
+      justify-content: space-between;
+    `}
+  ${({ rowReverse }) => css6`
+      flex-direction: ${rowReverse ? "row-reverse" : "row"};
+    `}
+  cursor: pointer;
+  outline: 0;
+
+  &[aria-disabled='true'] {
+    cursor: auto;
+  }
+`;
+var SwitchOuter = styled10.span`
+  display: inline-flex;
+  position: relative;
+  z-index: 0;
+`;
+var SwitchInner = styled10.div`
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  height: 16px;
+  border-radius: 16px;
+  border: 2px solid transparent;
+  background: ${({ theme: theme2 }) => theme2.color.text4};
+  transition: box-shadow 0.2s, background-color 0.2s;
+`;
+var SwitchInnerKnob = styled10.div`
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  background-color: ${({ theme: theme2 }) => theme2.color.text5};
+  border-radius: 50%;
+  transform: translateX(0);
+  transition: transform 0.2s;
+`;
+var SwitchInput = styled10.input.attrs({
+  type: "checkbox"
+})`
+  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 {
+    ~ ${SwitchInner} {
+      background-color: ${({ theme: theme2 }) => theme2.color.brand};
+
+      ${SwitchInnerKnob} {
+        transform: translateX(12px);
+      }
+    }
+  }
+
+  &:disabled {
+    cursor: auto;
+
+    ~ ${SwitchInner} {
+      opacity: ${({ theme: theme2 }) => theme2.elementEffect.disabled.opacity};
+    }
+  }
+
+  &:not(:disabled):focus {
+    ~ ${SwitchInner} {
+      box-shadow: 0 0 0 4px
+        ${({ theme: theme2 }) => applyEffect(theme2.color.brand, theme2.elementEffect.disabled)};
+    }
+  }
+`;
+
+// src/components/WithIcon/index.tsx
+import React9, { useRef as useRef2 } from "react";
+import styled11, { css as css7 } from "styled-components";
+var WithIcon_default = React9.memo(function WithIcon({
+  children,
+  icon,
+  show = true,
+  prefix: pre = false,
+  width,
+  fit = false,
+  fixed = false
+}) {
+  const node = fit ? width === void 0 ? /* @__PURE__ */ React9.createElement(AutoWidthIconAnchor, { show, pre }, icon) : /* @__PURE__ */ React9.createElement(IconAnchor, { width, show, pre }, /* @__PURE__ */ React9.createElement(Icon3, null, icon)) : /* @__PURE__ */ React9.createElement(IconAnchorNaive, { show, pre }, /* @__PURE__ */ React9.createElement(IconNaive, null, icon));
+  return /* @__PURE__ */ React9.createElement(Root, null, pre && node, /* @__PURE__ */ React9.createElement(Text2, { fixed }, children), !pre && node);
+});
+var Root = styled11.div`
+  display: flex;
+  align-items: center;
+`;
+var Text2 = styled11.div`
+  ${(p) => !p.fixed && css7`
+      min-width: 0;
+      overflow: hidden;
+    `}
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+function AutoWidthIconAnchor({
+  children,
+  show,
+  pre
+}) {
+  const ref = useRef2(null);
+  const width = useElementSize(ref, [null])?.width ?? 0;
+  return /* @__PURE__ */ React9.createElement(IconAnchor, { width, show, pre }, /* @__PURE__ */ React9.createElement(Icon3, { ref }, children));
+}
+var forceCenteringCss = css7`
+  > svg {
+    display: block;
+  }
+`;
+var iconAnchorCss = css7`
+  ${(p) => p.show === "collapse" ? css7`
+          display: none;
+        ` : css7`
+          visibility: ${p.show ? "visible" : "hidden"};
+        `};
+  ${(p) => p.pre ? css7`
+          margin-right: 4px;
+        ` : css7`
+          margin-left: 4px;
+        `}
+`;
+var IconAnchorNaive = styled11.div`
+  display: flex;
+  align-items: center;
+
+  ${iconAnchorCss}
+`;
+var IconNaive = styled11.div`
+  display: inline-flex;
+
+  ${forceCenteringCss}
+`;
+var IconAnchor = styled11.div`
+  display: flex;
+  position: relative;
+  /* Iconをline-heightに関与させない */
+  height: 0;
+  /* 横方向の領域は確保する */
+  width: ${(p) => p.width}px;
+
+  ${iconAnchorCss}
+`;
+var Icon3 = styled11.div`
+  display: inline-flex;
+  position: absolute;
+  transform: translateY(-50%);
+
+  ${forceCenteringCss}
+`;
+
+// src/index.ts
+import {
+  ComponentAbstraction,
+  useComponentAbstraction as useComponentAbstraction5
+} from "@charcoal-ui/react";
+
+// src/components/Carousel/index.tsx
+import React12, { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useRef as useRef3 } from "react";
+import { animated, useSpring } from "react-spring";
+import styled13, { css as css9 } from "styled-components";
+
+// src/foundation/support.ts
+var passiveEventsResult;
+function passiveEvents() {
+  if (passiveEventsResult !== void 0) {
+    return passiveEventsResult;
+  }
+  passiveEventsResult = false;
+  try {
+    const options = Object.defineProperty({}, "passive", {
+      get() {
+        return passiveEventsResult = true;
+      }
+    });
+    window.addEventListener("test", test, options);
+    window.removeEventListener("test", test);
+  } catch {
+  }
+  return passiveEventsResult;
+  function test() {
+  }
+}
+var isEdge = () => navigator.userAgent.includes("Edge/");
+
+// src/hooks/index.ts
+import { useLayoutEffect as useLayoutEffect2, useEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect2 : useEffect;
+
+// src/components/CarouselButton/index.tsx
+import React11 from "react";
+import styled12, { css as css8 } from "styled-components";
+
+// src/foundation/utils.ts
+function unreachable(value) {
+  throw new Error(
+    arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`
+  );
+}
+
+// src/components/icons/NextIcon.tsx
+import React10 from "react";
+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 size2 = 24;
+function NextIcon({ direction }) {
+  const transform = directionToTransform(direction);
+  return /* @__PURE__ */ React10.createElement(
+    IconBase,
+    {
+      viewBoxSize: size2,
+      size: size2,
+      currentColor: true,
+      path,
+      transform
+    }
+  );
+}
+function directionToTransform(direction) {
+  switch (direction) {
+    case "up" /* Up */:
+      return "rotate(270 12 12)";
+    case "down" /* Down */:
+      return "rotate(90 12 12)";
+    case "left" /* Left */:
+      return "rotate(180 12 12)";
+    case "right" /* Right */:
+      return void 0;
+    default:
+      return unreachable(direction);
+  }
+}
+
+// src/components/CarouselButton/index.tsx
+import { applyEffect as applyEffect2 } from "@charcoal-ui/utils";
+function CarouselButton({
+  direction,
+  show,
+  offset = 0,
+  padding = 0,
+  bottomOffset: bottom = 0,
+  gradient = false,
+  onClick
+}) {
+  const offsetStyle = direction === "left" /* 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__ */ React11.createElement(
+    Button,
+    {
+      type: "button",
+      onClick,
+      hide: !show,
+      style: offsetStyle,
+      css: onlyNonTouchDevice
+    },
+    /* @__PURE__ */ React11.createElement(CarouselButtonIcon, null, /* @__PURE__ */ React11.createElement(
+      NextIcon,
+      {
+        direction: direction === "right" /* Right */ ? "right" /* Right */ : direction === "left" /* Left */ ? "left" /* Left */ : unreachable()
+      }
+    ))
+  );
+}
+var CAROUSEL_BUTTON_SIZE = 40;
+var CarouselButtonIcon = styled12.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${CAROUSEL_BUTTON_SIZE}px;
+  height: ${CAROUSEL_BUTTON_SIZE}px;
+  border-radius: 50%;
+  background-color: ${({ theme: theme2 }) => theme2.color.surface4};
+  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;
+  color: ${({ theme: theme2 }) => theme2.color.text5};
+`;
+var Button = styled12.button`
+  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 ${CarouselButtonIcon} {
+    background-color: ${({ theme: theme2 }) => applyEffect2(theme2.color.surface4, theme2.effect.hover)};
+    color: ${({ theme: theme2 }) => applyEffect2(theme2.color.text5, theme2.effect.hover)};
+  }
+
+  &:active ${CarouselButtonIcon} {
+    background-color: ${({ theme: theme2 }) => applyEffect2(theme2.color.surface4, theme2.effect.press)};
+    color: ${({ theme: theme2 }) => applyEffect2(theme2.color.text5, theme2.effect.press)};
+  }
+
+  ${(p) => p.hide && css8`
+      visibility: hidden;
+      opacity: 0;
+      pointer-events: none;
+    `}
+`;
+var ScrollHintIcon = styled12(CarouselButtonIcon)`
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme: theme2 }) => applyEffect2(theme2.color.surface4, theme2.effect.hover)};
+    color: ${({ theme: theme2 }) => applyEffect2(theme2.color.text5, theme2.effect.hover)};
+  }
+
+  &:active {
+    background-color: ${({ theme: theme2 }) => applyEffect2(theme2.color.surface4, theme2.effect.press)};
+    color: ${({ theme: theme2 }) => applyEffect2(theme2.color.text5, theme2.effect.press)};
+  }
+`;
+var onlyNonTouchDevice = css8`
+  @media (hover: none) and (pointer: coarse) {
+    display: none;
+  }
+`;
+
+// src/components/Carousel/index.tsx
+var GRADIENT_WIDTH = 72;
+var SCROLL_AMOUNT_COEF = 0.75;
+function Carousel({
+  buttonOffset = 0,
+  buttonPadding = 16,
+  bottomOffset = 0,
+  defaultScroll: { align = "left", offset: scrollOffset = 0 } = {},
+  onScroll,
+  onResize,
+  children,
+  centerItems,
+  onScrollStateChange,
+  scrollAmountCoef = SCROLL_AMOUNT_COEF,
+  ...options
+}) {
+  const [scrollLeft, setScrollLeft] = useDebounceAnimationState(0);
+  const animation = useRef3(false);
+  const [maxScrollLeft, setMaxScrollLeft] = useState2(0);
+  const [leftShow, setLeftShow] = useState2(false);
+  const [rightShow, setRightShow] = useState2(false);
+  const [styles, set] = useSpring(() => ({ scroll: 0 }));
+  const ref = useRef3(null);
+  const visibleAreaRef = useRef3(null);
+  const innerRef = useRef3(null);
+  const handleRight = useCallback2(() => {
+    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 = useCallback2(() => {
+    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]);
+  useEffect2(() => {
+    const newleftShow = scrollLeft > 0;
+    const newrightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0;
+    if (newleftShow !== leftShow || newrightShow !== rightShow) {
+      setLeftShow(newleftShow);
+      setRightShow(newrightShow);
+      onScrollStateChange?.(newleftShow || newrightShow);
+    }
+  }, [leftShow, maxScrollLeft, onScrollStateChange, rightShow, scrollLeft]);
+  const handleScroll = useCallback2(() => {
+    if (ref.current === null) {
+      return;
+    }
+    if (animation.current) {
+      styles.scroll.stop();
+      animation.current = false;
+    }
+    const manualScrollLeft = ref.current.scrollLeft;
+    setScrollLeft(manualScrollLeft);
+  }, [animation, setScrollLeft, styles]);
+  const handleResize = useCallback2(() => {
+    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);
+      }
+    }
+  }, [ref.current]);
+  const handleScrollMove = useCallback2(() => {
+    if (ref.current === null) {
+      return;
+    }
+    if (onScroll) {
+      onScroll(ref.current.scrollLeft);
+    }
+  }, [onScroll]);
+  const [disableGradient, setDisableGradient] = useState2(false);
+  useIsomorphicLayoutEffect(() => {
+    if (isEdge()) {
+      setDisableGradient(true);
+    }
+  }, []);
+  if (!disableGradient && options.hasGradient === true) {
+    const fadeInGradient = options.fadeInGradient ?? false;
+    const overflowGradient = !fadeInGradient;
+    return /* @__PURE__ */ React12.createElement(Container3, { ref: visibleAreaRef }, /* @__PURE__ */ React12.createElement(GradientContainer, { fadeInGradient }, /* @__PURE__ */ React12.createElement(RightGradient, null, /* @__PURE__ */ React12.createElement(LeftGradient, { show: overflowGradient || scrollLeft > 0 }, /* @__PURE__ */ React12.createElement(
+      ScrollArea,
+      {
+        ref,
+        scrollLeft: styles.scroll,
+        onScroll: handleScrollMove
+      },
+      /* @__PURE__ */ React12.createElement(CarouselContainer, { ref: innerRef, centerItems }, children)
+    )))), /* @__PURE__ */ React12.createElement(ButtonsContainer, null, /* @__PURE__ */ React12.createElement(
+      CarouselButton,
+      {
+        direction: "left" /* Left */,
+        show: leftShow,
+        offset: buttonOffset,
+        bottomOffset,
+        padding: buttonPadding,
+        gradient: overflowGradient,
+        onClick: handleLeft
+      }
+    ), /* @__PURE__ */ React12.createElement(
+      CarouselButton,
+      {
+        direction: "right" /* Right */,
+        show: rightShow,
+        offset: buttonOffset,
+        bottomOffset,
+        padding: buttonPadding,
+        gradient: true,
+        onClick: handleRight
+      }
+    )));
+  }
+  return /* @__PURE__ */ React12.createElement(Container3, { ref: visibleAreaRef }, /* @__PURE__ */ React12.createElement(
+    ScrollArea,
+    {
+      ref,
+      scrollLeft: styles.scroll,
+      onScroll: handleScrollMove
+    },
+    /* @__PURE__ */ React12.createElement(CarouselContainer, { ref: innerRef, centerItems }, children)
+  ), /* @__PURE__ */ React12.createElement(ButtonsContainer, null, /* @__PURE__ */ React12.createElement(
+    CarouselButton,
+    {
+      direction: "left" /* Left */,
+      show: leftShow,
+      offset: buttonOffset,
+      bottomOffset,
+      padding: buttonPadding,
+      onClick: handleLeft
+    }
+  ), /* @__PURE__ */ React12.createElement(
+    CarouselButton,
+    {
+      direction: "right" /* Right */,
+      show: rightShow,
+      offset: buttonOffset,
+      bottomOffset,
+      padding: buttonPadding,
+      onClick: handleRight
+    }
+  )));
+}
+var CarouselContainer = styled13.ul`
+  vertical-align: top;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+
+  /* 最小幅を100%にして親要素にぴったりくっつけることで子要素で要素を均等に割り付けるなどを出来るようにしてある */
+  min-width: 100%;
+  box-sizing: border-box;
+
+  ${({ centerItems = false }) => centerItems ? css9`
+          display: flex;
+          width: max-content;
+          margin: 0 auto;
+        ` : css9`
+          display: inline-flex;
+          margin: 0;
+        `}
+`;
+var ButtonsContainer = styled13.div`
+  opacity: 0;
+  transition: 0.4s opacity;
+`;
+var Container3 = styled13.div`
+  &:hover ${ButtonsContainer} {
+    opacity: 1;
+  }
+
+  /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */
+  position: relative;
+  z-index: 0;
+`;
+var ScrollArea = styled13(animated.div)`
+  overflow-x: auto;
+  padding: 0;
+  margin: 0;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+`;
+var GradientContainer = styled13.div`
+  /* NOTE: LeftGradientがはみ出るためhidden */
+  overflow: hidden;
+  ${(p) => !p.fadeInGradient && css9`
+      margin-left: ${-GRADIENT_WIDTH}px;
+      ${CarouselContainer} {
+        padding-left: ${GRADIENT_WIDTH}px;
+      }
+    `}
+
+  margin-right: ${-GRADIENT_WIDTH}px;
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  ${CarouselContainer} {
+    padding-right: ${GRADIENT_WIDTH}px;
+  }
+`;
+var RightGradient = styled13.div`
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - ${GRADIENT_WIDTH}px),
+    transparent
+  );
+`;
+var LeftGradient = styled13.div`
+  /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */
+  margin-right: ${-GRADIENT_WIDTH}px;
+  padding-right: ${GRADIENT_WIDTH}px;
+  /* NOTE: mask-position に transition をつけたいが vender prefixes 対策で all につける */
+  transition: 0.2s all ease-in;
+  mask: linear-gradient(to right, transparent, #000 ${GRADIENT_WIDTH}px)
+    ${(p) => p.show ? 0 : -GRADIENT_WIDTH}px 0;
+`;
+
+// src/components/Pager/index.tsx
+import React15, { useCallback as useCallback3, useDebugValue as useDebugValue2, useMemo as useMemo2 } from "react";
+import styled16, { css as css10 } from "styled-components";
+import warning from "warning";
+
+// src/components/icons/DotsIcon.tsx
+import React13 from "react";
+import styled14 from "styled-components";
+function DotsIcon({ size: size3 }) {
+  return /* @__PURE__ */ React13.createElement(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3 }, /* @__PURE__ */ React13.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
+};
+var StyledSVG = styled14.svg`
+  fill: currentColor;
+`;
+
+// src/components/icons/WedgeIcon.tsx
+import React14 from "react";
+import styled15 from "styled-components";
+function WedgeIcon({ size: size3, direction }) {
+  return /* @__PURE__ */ React14.createElement("svg", { viewBox: "0 0 10 8", width: size3, height: size3 }, /* @__PURE__ */ React14.createElement(
+    StyledPolyline,
+    {
+      strokeWidth: "2",
+      points: "1,2 5,6 9,2",
+      transform: directionToTransform2(direction)
+    }
+  ));
+}
+WedgeIcon.defaultProps = {
+  size: 16,
+  white: false,
+  lightGray: false
+};
+function directionToTransform2(direction) {
+  switch (direction) {
+    case "up" /* Up */:
+      return "rotate(180 5 4)";
+    case "down" /* Down */:
+      return void 0;
+    case "left" /* Left */:
+      return "rotate(90 5 4)";
+    case "right" /* Right */:
+      return "rotate(-90 5 4)";
+    default:
+      return unreachable(direction);
+  }
+}
+var StyledPolyline = styled15.polyline`
+  fill: none;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  stroke: currentColor;
+`;
+
+// src/components/Pager/index.tsx
+import { useComponentAbstraction as useComponentAbstraction4 } from "@charcoal-ui/react";
+function usePagerWindow(page, pageCount, windowSize = 7) {
+  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 window2 = useMemo2(() => {
+    const visibleFirstPage = 1;
+    const visibleLastPage = Math.min(
+      pageCount,
+      Math.max(page + Math.floor(windowSize / 2), windowSize)
+    );
+    if (visibleLastPage <= windowSize) {
+      return Array.from(
+        { length: 1 + visibleLastPage - visibleFirstPage },
+        (_, i) => visibleFirstPage + i
+      );
+    } else {
+      const start = visibleLastPage - (windowSize - 1) + 2;
+      return [
+        visibleFirstPage,
+        "...",
+        ...Array.from(
+          { length: 1 + visibleLastPage - start },
+          (_, i) => start + i
+        )
+      ];
+    }
+  }, [page, pageCount, windowSize]);
+  useDebugValue2(window2);
+  return window2;
+}
+var Pager_default = React15.memo(function Pager({
+  page,
+  pageCount,
+  onChange
+}) {
+  const window2 = usePagerWindow(page, pageCount);
+  const makeClickHandler = useCallback3(
+    (value) => () => {
+      onChange(value);
+    },
+    [onChange]
+  );
+  const hasNext = page < pageCount;
+  const hasPrev = page > 1;
+  return /* @__PURE__ */ React15.createElement(PagerContainer, null, /* @__PURE__ */ React15.createElement(
+    CircleButton,
+    {
+      type: "button",
+      hidden: !hasPrev,
+      disabled: !hasPrev,
+      onClick: makeClickHandler(Math.max(1, page - 1)),
+      noBackground: true
+    },
+    /* @__PURE__ */ React15.createElement(WedgeIcon, { size: 16, direction: "left" /* Left */ })
+  ), window2.map(
+    (p) => p === "..." ? /* @__PURE__ */ React15.createElement(Spacer, { key: p }, /* @__PURE__ */ React15.createElement(DotsIcon, { size: 20 })) : p === page ? /* @__PURE__ */ React15.createElement(CircleButton, { key: p, type: "button", "aria-current": true }, /* @__PURE__ */ React15.createElement(Text3, null, p)) : /* @__PURE__ */ React15.createElement(CircleButton, { key: p, type: "button", onClick: makeClickHandler(p) }, /* @__PURE__ */ React15.createElement(Text3, null, p))
+  ), /* @__PURE__ */ React15.createElement(
+    CircleButton,
+    {
+      type: "button",
+      hidden: !hasNext,
+      disabled: !hasNext,
+      onClick: makeClickHandler(Math.min(pageCount, page + 1)),
+      noBackground: true
+    },
+    /* @__PURE__ */ React15.createElement(WedgeIcon, { size: 16, direction: "right" /* Right */ })
+  ));
+});
+function LinkPager({ page, pageCount, makeUrl }) {
+  const { Link } = useComponentAbstraction4();
+  const window2 = usePagerWindow(page, pageCount);
+  const hasNext = page < pageCount;
+  const hasPrev = page > 1;
+  return /* @__PURE__ */ React15.createElement(PagerContainer, null, /* @__PURE__ */ React15.createElement(Link, { to: makeUrl(Math.max(1, page - 1)) }, /* @__PURE__ */ React15.createElement(CircleButton, { hidden: !hasPrev, "aria-disabled": !hasPrev, noBackground: true }, /* @__PURE__ */ React15.createElement(WedgeIcon, { size: 16, direction: "left" /* Left */ }))), window2.map(
+    (p) => p === "..." ? /* @__PURE__ */ React15.createElement(Spacer, { key: p }, /* @__PURE__ */ React15.createElement(DotsIcon, { size: 20, subLink: true })) : p === page ? /* @__PURE__ */ React15.createElement(CircleButton, { key: p, type: "button", "aria-current": true }, /* @__PURE__ */ React15.createElement(Text3, null, p)) : /* @__PURE__ */ React15.createElement(Link, { key: p, to: makeUrl(p) }, /* @__PURE__ */ React15.createElement(CircleButton, { type: "button" }, /* @__PURE__ */ React15.createElement(Text3, null, p)))
+  ), /* @__PURE__ */ React15.createElement(Link, { to: makeUrl(Math.min(pageCount, page + 1)) }, /* @__PURE__ */ React15.createElement(CircleButton, { hidden: !hasNext, "aria-disabled": !hasNext, noBackground: true }, /* @__PURE__ */ React15.createElement(WedgeIcon, { size: 16, direction: "right" /* Right */ }))));
+}
+var PagerContainer = styled16.nav`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var CircleButton = styled16.button`
+  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: ${({ theme: theme2 }) => theme2.color.text3};
+
+  &:hover {
+    background: ${({ theme: theme2 }) => theme2.color.surface3};
+    color: ${({ theme: theme2 }) => theme2.color.text2};
+  }
+
+  &[aria-current] {
+    background-color: ${({ theme: theme2 }) => theme2.color.surface6};
+    color: ${({ theme: theme2 }) => theme2.color.text5};
+  }
+
+  &[aria-current]:hover {
+    background-color: ${({ theme: theme2 }) => theme2.color.surface6};
+    color: ${({ theme: theme2 }) => theme2.color.text5};
+  }
+
+  ${({ noBackground = false }) => noBackground && css10`
+      /* stylelint-disable-next-line no-duplicate-selectors */
+      &:hover {
+        background: transparent;
+      }
+    `}
+`;
+var Spacer = styled16(CircleButton).attrs({ type: "button", disabled: true })`
+  && {
+    color: ${({ theme: theme2 }) => theme2.color.text3};
+    background: none;
+  }
+`;
+var Text3 = "span";
+export {
+  CancelLayoutItemBodyPadding,
+  Carousel,
+  ComponentAbstraction,
+  Filter_default as 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,
+  Pager_default as Pager,
+  RESPONSIVE_LEFT_WIDTH,
+  RESPONSIVE_MAIN_MAX_WIDTH,
+  StyledCancelLayoutItemBodyPadding,
+  StyledLayoutItemBody,
+  SwitchCheckbox_default as SwitchCheckbox,
+  TextEllipsis,
+  WithIcon_default as WithIcon,
+  useComponentAbstraction5 as useComponentAbstraction,
+  useElementSize,
+  useLayoutItemBodyPadding,
+  useMedia,
+  useMediaScreen1
+};
+//# sourceMappingURL=index.esm.js.map