@charcoal-ui/react-sandbox 2.5.0 → 2.7.0

package/dist/index.cjs.js

@@ -0,0 +1,1871 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CancelLayoutItemBodyPadding: () => CancelLayoutItemBodyPadding,
+  Carousel: () => Carousel,
+  ComponentAbstraction: () => import_react23.ComponentAbstraction,
+  Filter: () => Filter_default,
+  FilterButton: () => FilterButton,
+  FilterIconButton: () => FilterIconButton,
+  FilterLink: () => FilterLink,
+  HintText: () => HintText,
+  LAYOUT_ITEM_BODY_PADDING: () => LAYOUT_ITEM_BODY_PADDING,
+  Layout: () => Layout,
+  LayoutItem: () => LayoutItem,
+  LayoutItemBody: () => LayoutItemBody,
+  LayoutItemHeader: () => LayoutItemHeader,
+  LeftMenu: () => LeftMenu,
+  LeftMenuContent: () => LeftMenuContent,
+  LinkPager: () => LinkPager,
+  MAIN_COLUMN_HORIZONTAL_MIN_MARGIN: () => MAIN_COLUMN_HORIZONTAL_MIN_MARGIN,
+  MenuListItem: () => MenuListItem,
+  MenuListItemContext: () => MenuListItemContext,
+  MenuListItemWithIcon: () => MenuListItemWithIcon,
+  MenuListLabel: () => MenuListLabel,
+  MenuListLinkItem: () => MenuListLinkItem,
+  MenuListLinkItemWithIcon: () => MenuListLinkItemWithIcon,
+  MenuListSpacer: () => MenuListSpacer,
+  Pager: () => Pager_default,
+  RESPONSIVE_LEFT_WIDTH: () => RESPONSIVE_LEFT_WIDTH,
+  RESPONSIVE_MAIN_MAX_WIDTH: () => RESPONSIVE_MAIN_MAX_WIDTH,
+  StyledCancelLayoutItemBodyPadding: () => StyledCancelLayoutItemBodyPadding,
+  StyledLayoutItemBody: () => StyledLayoutItemBody,
+  SwitchCheckbox: () => SwitchCheckbox_default,
+  TextEllipsis: () => TextEllipsis,
+  WithIcon: () => WithIcon_default,
+  useComponentAbstraction: () => import_react23.useComponentAbstraction,
+  useElementSize: () => useElementSize,
+  useLayoutItemBodyPadding: () => useLayoutItemBodyPadding,
+  useMedia: () => useMedia,
+  useMediaScreen1: () => useMediaScreen1
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Filter/index.tsx
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_react2 = require("@charcoal-ui/react");
+var import_utils = require("@charcoal-ui/utils");
+var FilterButton = import_react.default.forwardRef(function FilterButton2({
+  onClick,
+  children,
+  active = false,
+  hover,
+  reactive = false
+}, ref) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    ButtonLike,
+    {
+      active,
+      reactive,
+      hover,
+      onClick: active && !reactive ? void 0 : onClick,
+      ref
+    },
+    children
+  );
+});
+var FilterIconButton = import_react.default.forwardRef(function FilterIconButton2({
+  onClick,
+  children,
+  active = false,
+  hover,
+  reactive = false,
+  width,
+  height
+}, ref) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    StyledButtonLike,
+    {
+      active,
+      reactive,
+      hover,
+      onClick: active && !reactive ? void 0 : onClick,
+      ref,
+      buttonWidth: width,
+      buttonHeight: height
+    },
+    children
+  );
+});
+var FilterLink = import_react.default.forwardRef(function FilterLink2({
+  onClick,
+  children,
+  active = false,
+  hover,
+  reactive = false,
+  ...props
+}, ref) {
+  const { Link } = (0, import_react2.useComponentAbstraction)();
+  if (active && !reactive) {
+    return /* @__PURE__ */ import_react.default.createElement(PlainElement, { active: true, hover, ref }, children);
+  } else {
+    return /* @__PURE__ */ import_react.default.createElement(Link, { ...props, onClick }, /* @__PURE__ */ import_react.default.createElement(
+      PlainElement,
+      {
+        active,
+        reactive,
+        hover,
+        ref
+      },
+      children
+    ));
+  }
+});
+var buttonCss = import_styled_components.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 && import_styled_components.css`
+      color: ${({ theme: theme2 }) => theme2.color.text2};
+    `}
+
+  ${({ active = false }) => active && import_styled_components.css`
+      background-color: ${({ theme: theme2 }) => theme2.color.surface3};
+      color: ${({ theme: theme2 }) => theme2.color.text2};
+    `}
+
+  ${({ active = false, reactive = false }) => active && !reactive && import_styled_components.css`
+      cursor: default;
+    `}
+
+  @media ${({ theme: theme2 }) => (0, import_utils.maxWidth)(theme2.breakpoint.screen1)} {
+    padding: 5px 16px;
+  }
+`;
+var padding0Css = import_styled_components.css`
+  padding: 0;
+
+  @media ${({ theme: theme2 }) => (0, import_utils.maxWidth)(theme2.breakpoint.screen1)} {
+    padding: 0;
+  }
+`;
+var ButtonLike = import_styled_components.default.button`
+  ${buttonCss}
+`;
+var PlainElement = import_styled_components.default.span`
+  ${buttonCss}
+`;
+var StyledButtonLike = (0, import_styled_components.default)(ButtonLike)`
+  ${padding0Css};
+  ${(p) => p.buttonWidth !== void 0 && `width: ${p.buttonWidth}px;`}
+  ${(p) => p.buttonHeight !== void 0 && `height: ${p.buttonHeight}px;`}
+`;
+var Filter = import_styled_components.default.div`
+  display: flex;
+`;
+var Filter_default = Filter;
+
+// src/components/HintText/index.tsx
+var import_react5 = __toESM(require("react"));
+var import_styled_components5 = __toESM(require("styled-components"));
+
+// src/styled.ts
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_styled = require("@charcoal-ui/styled");
+var theme = (0, import_styled.createTheme)(import_styled_components2.default);
+
+// src/components/icons/InfoIcon.tsx
+var import_react4 = __toESM(require("react"));
+var import_styled_components4 = __toESM(require("styled-components"));
+
+// src/components/icons/Base.tsx
+var import_react3 = __toESM(require("react"));
+var import_styled_components3 = __toESM(require("styled-components"));
+function IconBase({
+  size: size3 = 24,
+  viewBoxSize,
+  currentColor,
+  path: path2,
+  transform,
+  fillRule,
+  clipRule
+}) {
+  return /* @__PURE__ */ import_react3.default.createElement(
+    Icon,
+    {
+      viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+      size: size3,
+      currentColor
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      IconBasePath,
+      {
+        path: path2,
+        transform,
+        fillRule,
+        clipRule
+      }
+    )
+  );
+}
+var Icon = import_styled_components3.default.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__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: path2,
+        transform,
+        fillRule,
+        clipRule
+      }
+    );
+  } else {
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, path2);
+  }
+};
+
+// src/components/icons/InfoIcon.tsx
+var size = 16;
+function InfoIcon() {
+  const path2 = /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(IconBase, { viewBoxSize: size, size, currentColor: true, path: path2 });
+}
+var Path = import_styled_components4.default.path`
+  fill: ${({ theme: theme2 }) => theme2.color.surface1};
+  fill-rule: evenodd;
+`;
+
+// src/components/HintText/index.tsx
+var import_utils2 = require("@charcoal-ui/utils");
+function HintText({ children, context, className }) {
+  return /* @__PURE__ */ import_react5.default.createElement(Container, { className, context }, /* @__PURE__ */ import_react5.default.createElement(IconWrap, null, /* @__PURE__ */ import_react5.default.createElement(InfoIcon, null)), /* @__PURE__ */ import_react5.default.createElement(Text, null, children));
+}
+var Container = import_styled_components5.default.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 }) => (0, import_utils2.maxWidth)(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" && import_styled_components5.css`
+      justify-content: center;
+    `}
+`;
+var IconWrap = import_styled_components5.default.div`
+  display: flex;
+  align-items: center;
+  color: ${(p) => p.theme.color.text4};
+  height: 22px;
+  margin: -4px 4px -4px 0;
+`;
+var Text = import_styled_components5.default.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
+var import_react7 = __toESM(require("react"));
+var import_styled_components7 = __toESM(require("styled-components"));
+
+// src/foundation/contants.ts
+var import_foundation = require("@charcoal-ui/foundation");
+var MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72;
+var RESPONSIVE_LEFT_WIDTH = (0, import_foundation.columnSystem)(2, import_foundation.COLUMN_UNIT, import_foundation.GUTTER_UNIT) + import_foundation.GUTTER_UNIT;
+var RESPONSIVE_MAIN_MAX_WIDTH = (0, import_foundation.columnSystem)(
+  12,
+  import_foundation.COLUMN_UNIT,
+  import_foundation.GUTTER_UNIT
+);
+
+// src/foundation/hooks.ts
+var import_react6 = require("react");
+var import_react_dom = __toESM(require("react-dom"));
+var import_styled_components6 = require("styled-components");
+var import_utils3 = require("@charcoal-ui/utils");
+function useMediaScreen1() {
+  return useMedia((0, import_utils3.maxWidth)((0, import_styled_components6.useTheme)().breakpoint.screen1));
+}
+function useMedia(query) {
+  const matcher = (0, import_react6.useMemo)(
+    () => __TEST__ ? {
+      matches: false,
+      addListener: () => {
+      },
+      removeListener: () => {
+      }
+    } : matchMedia(query),
+    [query]
+  );
+  const [matches, setMatches] = (0, import_react6.useState)(matcher.matches);
+  if (matcher.matches !== matches) {
+    setMatches(matcher.matches);
+  }
+  const callback = (e) => {
+    try {
+      import_react_dom.default.flushSync(() => {
+        setMatches(e.matches);
+      });
+    } catch {
+      setMatches(e.matches);
+    }
+  };
+  (0, import_react6.useLayoutEffect)(() => {
+    matcher.addListener(callback);
+    setMatches(matcher.matches);
+    return () => {
+      matcher.removeListener(callback);
+    };
+  }, [matcher]);
+  (0, import_react6.useDebugValue)(`${query}: ${matches.toString()}`);
+  return matches;
+}
+function measure(ref) {
+  return ref !== null ? ref.getBoundingClientRect() : void 0;
+}
+function useElementSize(ref, deps = []) {
+  const [size3, setSize] = (0, import_react6.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] = (0, import_react6.useState)(null);
+  (0, import_react6.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]);
+  (0, import_react6.useLayoutEffect)(() => {
+    if (ref.current !== watch) {
+      setWatch(ref.current);
+    }
+  });
+  (0, import_react6.useLayoutEffect)(() => {
+    if (deps.length > 0) {
+      setSize(measure(ref.current));
+    }
+  }, deps);
+  (0, import_react6.useDebugValue)(size3);
+  return size3;
+}
+function useDebounceAnimationState(defaultValue) {
+  const [state, setState] = (0, import_react6.useState)(defaultValue);
+  const timer = (0, import_react6.useRef)();
+  const setDebounceState = (0, import_react6.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
+var import_foundation2 = require("@charcoal-ui/foundation");
+var import_utils4 = require("@charcoal-ui/utils");
+var LayoutConfigContext = import_react7.default.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__ */ import_react7.default.createElement(LayoutRoot, null, /* @__PURE__ */ import_react7.default.createElement(LayoutConfigContext.Provider, { value: config }, config.withLeft && /* @__PURE__ */ import_react7.default.createElement(LeftArea, null, menu), /* @__PURE__ */ import_react7.default.createElement(MainArea, { center }, header != null && /* @__PURE__ */ import_react7.default.createElement(Header, null, header), isHeaderTopMenu && /* @__PURE__ */ import_react7.default.createElement(HeaderTopMenuContainer, null, menu), /* @__PURE__ */ import_react7.default.createElement(Grid, null, children))), /* @__PURE__ */ import_react7.default.createElement(GlobalStyle, null));
+}
+var HeaderTopMenuContainer = import_styled_components7.default.div`
+  margin-bottom: 40px;
+  overflow-x: auto;
+  word-break: keep-all;
+
+  @media ${({ theme: theme2 }) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1)} {
+    margin-bottom: 0;
+    padding-left: 16px;
+    padding-bottom: 16px;
+    background-color: ${({ theme: theme2 }) => theme2.color.surface2};
+  }
+`;
+var GlobalStyle = import_styled_components7.createGlobalStyle`
+  :root {
+    background-color: ${({ theme: theme2 }) => theme2.color.background2};
+
+    @media ${({ theme: theme2 }) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1)} {
+      background-color: ${({ theme: theme2 }) => theme2.color.background1};
+    }
+  }
+`;
+var LayoutRoot = import_styled_components7.default.div`
+  display: flex;
+  background-color: ${({ theme: theme2 }) => theme2.color.background2};
+
+  @media ${({ theme: theme2 }) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1)} {
+    background-color: ${({ theme: theme2 }) => theme2.color.background1};
+  }
+`;
+var LeftArea = import_styled_components7.default.div`
+  min-width: ${RESPONSIVE_LEFT_WIDTH}px;
+  padding: 40px 0 40px ${import_foundation2.GUTTER_UNIT}px;
+  box-sizing: border-box;
+
+  @media ${({ theme: theme2 }) => theme2.breakpoint.screen3} {
+    display: none;
+  }
+`;
+var MainArea = import_styled_components7.default.div`
+  flex-grow: 1;
+  /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
+  min-width: 0;
+  max-width: ${(p) => p.center ? (0, import_foundation2.columnSystem)(6, import_foundation2.COLUMN_UNIT, import_foundation2.GUTTER_UNIT) : RESPONSIVE_MAIN_MAX_WIDTH}px;
+  padding: 40px ${MAIN_COLUMN_HORIZONTAL_MIN_MARGIN}px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+
+  @media ${({ theme: theme2 }) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1)} {
+    padding: 0;
+  }
+`;
+var Header = import_styled_components7.default.div`
+  font-weight: bold;
+  margin-bottom: 12px;
+  font-size: 20px;
+  line-height: 28px;
+  color: ${({ theme: theme2 }) => theme2.color.text2};
+
+  @media ${({ theme: theme2 }) => (0, import_utils4.maxWidth)(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 = import_styled_components7.default.div`
+  display: grid;
+  gap: ${import_foundation2.GUTTER_UNIT}px;
+  grid-template-columns: 1fr;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: auto;
+
+  @media ${({ theme: theme2 }) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1)} {
+    gap: 0;
+    background-color: ${({ theme: theme2 }) => theme2.color.background1};
+    padding-bottom: 60px;
+  }
+`;
+var LayoutItem = import_react7.default.forwardRef(
+  function LayoutItem2({ span, children }, ref) {
+    const { withLeft } = (0, import_react7.useContext)(LayoutConfigContext);
+    return /* @__PURE__ */ import_react7.default.createElement(StyledLayoutItem, { span, withLeft, ref }, children);
+  }
+);
+var StyledLayoutItem = import_styled_components7.default.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 && import_styled_components7.css`
+        grid-column-end: span 2;
+      `}
+  }
+
+  @media ${({ theme: theme2 }) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1)} {
+    ${(p) => p.span > 1 && import_styled_components7.css`
+        grid-column-end: span 1;
+      `}
+
+    border-radius: 0;
+    padding-bottom: 40px;
+  }
+`;
+function LayoutItemHeader({ children }) {
+  const { wide, center } = (0, import_react7.useContext)(LayoutConfigContext);
+  return /* @__PURE__ */ import_react7.default.createElement(StyledLayoutItemHeader, { wide, center }, children);
+}
+var StyledLayoutItemHeader = import_styled_components7.default.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 && import_styled_components7.css`
+      justify-content: center;
+    `}
+
+  @media ${({ theme: theme2 }) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1)} {
+    margin-top: 4px;
+    padding: 0 16px;
+    background: none;
+    overflow-x: auto;
+    border-radius: unset;
+    ${(p) => p.wide && import_styled_components7.css`
+        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 } = (0, import_react7.useContext)(LayoutConfigContext);
+  return /* @__PURE__ */ import_react7.default.createElement(StyledLayoutItemBody, { wide, horizontal, narrow }, children);
+}
+var StyledLayoutItemBody = import_styled_components7.default.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 }) => (0, import_utils4.maxWidth)(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 } = (0, import_react7.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 } = (0, import_react7.useContext)(LayoutConfigContext);
+  return /* @__PURE__ */ import_react7.default.createElement(StyledCancelLayoutItemBodyPadding, { wide, cancelTop }, children);
+}
+var StyledCancelLayoutItemBodyPadding = import_styled_components7.default.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 }) => (0, import_utils4.maxWidth)(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
+var import_react11 = __toESM(require("react"));
+var import_styled_components10 = __toESM(require("styled-components"));
+
+// src/components/MenuListItem/index.tsx
+var import_react9 = __toESM(require("react"));
+var import_styled_components9 = __toESM(require("styled-components"));
+
+// src/components/TextEllipsis/index.tsx
+var import_styled_components8 = __toESM(require("styled-components"));
+
+// src/components/TextEllipsis/helper.ts
+var import_react8 = require("react");
+var hasChildren = (element) => (0, import_react8.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) && !(0, import_react8.isValidElement)(children)) {
+    return childToString(children);
+  }
+  return import_react8.Children.toArray(children).reduce(
+    (text, child) => {
+      let newText = "";
+      if ((0, import_react8.isValidElement)(child) && hasChildren(child)) {
+        newText = onlyText(child.props.children);
+      } else if ((0, import_react8.isValidElement)(child) && !hasChildren(child)) {
+        newText = "";
+      } else {
+        newText = childToString(child);
+      }
+      return text.concat(newText);
+    },
+    ""
+  );
+};
+
+// src/components/TextEllipsis/index.tsx
+var TextEllipsis = import_styled_components8.default.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 ? import_styled_components8.css`
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : import_styled_components8.css`
+          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
+var import_react10 = require("@charcoal-ui/react");
+var import_utils5 = require("@charcoal-ui/utils");
+var MenuListItemContext = import_react9.default.createContext({ padding: 24 });
+function MenuListItem({
+  primary,
+  secondary,
+  onClick,
+  disabled = false,
+  noHover = false,
+  gtmClass,
+  children
+}) {
+  const { padding } = (0, import_react9.useContext)(MenuListItemContext);
+  return /* @__PURE__ */ import_react9.default.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__ */ import_react9.default.createElement(Labels, null, /* @__PURE__ */ import_react9.default.createElement(PrimaryText, null, /* @__PURE__ */ import_react9.default.createElement(TextEllipsis, { lineHeight: 22, lineLimit: 1 }, primary)), secondary !== void 0 && /* @__PURE__ */ import_react9.default.createElement(SecondaryText, null, /* @__PURE__ */ import_react9.default.createElement(TextEllipsis, { lineHeight: 22, lineLimit: 1 }, secondary))),
+    children
+  );
+}
+var Item = import_styled_components9.default.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 && import_styled_components9.css`
+        background-color: ${({ theme: theme2 }) => theme2.color.surface3};
+      `}
+  }
+
+  ${theme((o) => o.disabled)}
+
+  ${import_utils5.disabledSelector} {
+    cursor: default;
+    pointer-events: none;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+`;
+var Labels = import_styled_components9.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+var PrimaryText = import_styled_components9.default.div`
+  color: ${(p) => p.theme.color.text2};
+  line-height: 22px;
+  font-size: 14px;
+  display: grid;
+`;
+var SecondaryText = import_styled_components9.default.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 } = (0, import_react10.useComponentAbstraction)();
+  const props = {
+    disabled,
+    primary,
+    secondary,
+    gtmClass,
+    noHover,
+    children
+  };
+  return disabled ? /* @__PURE__ */ import_react9.default.createElement("span", { onClick }, /* @__PURE__ */ import_react9.default.createElement(MenuListItem, { ...props })) : /* @__PURE__ */ import_react9.default.createElement(A, { as: Link, to: link, onClick, ...linkProps }, /* @__PURE__ */ import_react9.default.createElement(MenuListItem, { onClick: () => void 0, ...props }));
+}
+var A = import_styled_components9.default.a`
+  display: block;
+`;
+function MenuListLinkItemWithIcon({
+  icon,
+  primary: text,
+  ...props
+}) {
+  const primary = /* @__PURE__ */ import_react9.default.createElement(IconContainer, null, /* @__PURE__ */ import_react9.default.createElement(Icon2, null, icon), text);
+  return /* @__PURE__ */ import_react9.default.createElement(MenuListLinkItem, { primary, ...props });
+}
+function MenuListItemWithIcon({
+  icon,
+  primary: text,
+  ...props
+}) {
+  const primary = /* @__PURE__ */ import_react9.default.createElement(IconContainer, null, /* @__PURE__ */ import_react9.default.createElement(Icon2, null, icon), text);
+  return /* @__PURE__ */ import_react9.default.createElement(MenuListItem, { primary, ...props });
+}
+var IconContainer = import_styled_components9.default.div`
+  display: grid;
+  gap: 8px;
+  grid-auto-flow: column;
+  align-items: center;
+`;
+var Icon2 = import_styled_components9.default.div`
+  color: ${({ theme: theme2 }) => theme2.color.text3};
+  display: flex;
+`;
+var MenuListSpacer = import_styled_components9.default.div`
+  height: 24px;
+`;
+var MenuListLabel = import_styled_components9.default.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
+var import_react12 = require("@charcoal-ui/react");
+function LeftMenu({
+  links,
+  active
+}) {
+  const { Link } = (0, import_react12.useComponentAbstraction)();
+  return /* @__PURE__ */ import_react11.default.createElement(Container2, null, links.map((link, index) => /* @__PURE__ */ import_react11.default.createElement(Link, { to: link.to, key: index }, /* @__PURE__ */ import_react11.default.createElement(LinkItem, { "aria-current": link.id === active || void 0 }, link.text))));
+}
+function LeftMenuContent({ links }) {
+  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, links.map((link, index) => /* @__PURE__ */ import_react11.default.createElement(MenuListLinkItem, { link: link.to, key: index, primary: link.text })));
+}
+var Container2 = import_styled_components10.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+var LinkItem = import_styled_components10.default.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
+var import_react13 = __toESM(require("react"));
+var import_styled_components11 = __toESM(require("styled-components"));
+var import_utils6 = require("@charcoal-ui/utils");
+var SwitchCheckbox_default = import_react13.default.forwardRef(function SwitchCheckbox({
+  gtmClass,
+  flex = false,
+  rowReverse = false,
+  children,
+  disabled,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ import_react13.default.createElement(
+    Label,
+    {
+      className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "",
+      flex,
+      rowReverse,
+      "aria-disabled": disabled
+    },
+    /* @__PURE__ */ import_react13.default.createElement(SwitchOuter, null, /* @__PURE__ */ import_react13.default.createElement(SwitchInput, { ...props, disabled, ref }), /* @__PURE__ */ import_react13.default.createElement(SwitchInner, null, /* @__PURE__ */ import_react13.default.createElement(SwitchInnerKnob, null))),
+    children != null && /* @__PURE__ */ import_react13.default.createElement(Children2, { rowReverse }, children)
+  );
+});
+var Children2 = import_styled_components11.default.span`
+  ${(p) => p.rowReverse ? import_styled_components11.css`
+          margin-right: 8px;
+        ` : import_styled_components11.css`
+          margin-left: 8px;
+        `}
+`;
+var Label = import_styled_components11.default.label`
+  display: inline-flex;
+  align-items: center;
+  ${({ flex }) => flex && import_styled_components11.css`
+      display: flex;
+      justify-content: space-between;
+    `}
+  ${({ rowReverse }) => import_styled_components11.css`
+      flex-direction: ${rowReverse ? "row-reverse" : "row"};
+    `}
+  cursor: pointer;
+  outline: 0;
+
+  &[aria-disabled='true'] {
+    cursor: auto;
+  }
+`;
+var SwitchOuter = import_styled_components11.default.span`
+  display: inline-flex;
+  position: relative;
+  z-index: 0;
+`;
+var SwitchInner = import_styled_components11.default.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 = import_styled_components11.default.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 = import_styled_components11.default.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 }) => (0, import_utils6.applyEffect)(theme2.color.brand, theme2.elementEffect.disabled)};
+    }
+  }
+`;
+
+// src/components/WithIcon/index.tsx
+var import_react14 = __toESM(require("react"));
+var import_styled_components12 = __toESM(require("styled-components"));
+var WithIcon_default = import_react14.default.memo(function WithIcon({
+  children,
+  icon,
+  show = true,
+  prefix: pre = false,
+  width,
+  fit = false,
+  fixed = false
+}) {
+  const node = fit ? width === void 0 ? /* @__PURE__ */ import_react14.default.createElement(AutoWidthIconAnchor, { show, pre }, icon) : /* @__PURE__ */ import_react14.default.createElement(IconAnchor, { width, show, pre }, /* @__PURE__ */ import_react14.default.createElement(Icon3, null, icon)) : /* @__PURE__ */ import_react14.default.createElement(IconAnchorNaive, { show, pre }, /* @__PURE__ */ import_react14.default.createElement(IconNaive, null, icon));
+  return /* @__PURE__ */ import_react14.default.createElement(Root, null, pre && node, /* @__PURE__ */ import_react14.default.createElement(Text2, { fixed }, children), !pre && node);
+});
+var Root = import_styled_components12.default.div`
+  display: flex;
+  align-items: center;
+`;
+var Text2 = import_styled_components12.default.div`
+  ${(p) => !p.fixed && import_styled_components12.css`
+      min-width: 0;
+      overflow: hidden;
+    `}
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+function AutoWidthIconAnchor({
+  children,
+  show,
+  pre
+}) {
+  const ref = (0, import_react14.useRef)(null);
+  const width = useElementSize(ref, [null])?.width ?? 0;
+  return /* @__PURE__ */ import_react14.default.createElement(IconAnchor, { width, show, pre }, /* @__PURE__ */ import_react14.default.createElement(Icon3, { ref }, children));
+}
+var forceCenteringCss = import_styled_components12.css`
+  > svg {
+    display: block;
+  }
+`;
+var iconAnchorCss = import_styled_components12.css`
+  ${(p) => p.show === "collapse" ? import_styled_components12.css`
+          display: none;
+        ` : import_styled_components12.css`
+          visibility: ${p.show ? "visible" : "hidden"};
+        `};
+  ${(p) => p.pre ? import_styled_components12.css`
+          margin-right: 4px;
+        ` : import_styled_components12.css`
+          margin-left: 4px;
+        `}
+`;
+var IconAnchorNaive = import_styled_components12.default.div`
+  display: flex;
+  align-items: center;
+
+  ${iconAnchorCss}
+`;
+var IconNaive = import_styled_components12.default.div`
+  display: inline-flex;
+
+  ${forceCenteringCss}
+`;
+var IconAnchor = import_styled_components12.default.div`
+  display: flex;
+  position: relative;
+  /* Iconをline-heightに関与させない */
+  height: 0;
+  /* 横方向の領域は確保する */
+  width: ${(p) => p.width}px;
+
+  ${iconAnchorCss}
+`;
+var Icon3 = import_styled_components12.default.div`
+  display: inline-flex;
+  position: absolute;
+  transform: translateY(-50%);
+
+  ${forceCenteringCss}
+`;
+
+// src/index.ts
+var import_react23 = require("@charcoal-ui/react");
+
+// src/components/Carousel/index.tsx
+var import_react18 = __toESM(require("react"));
+var import_react_spring = require("react-spring");
+var import_styled_components14 = __toESM(require("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
+var import_react15 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react15.useLayoutEffect : import_react15.useEffect;
+
+// src/components/CarouselButton/index.tsx
+var import_react17 = __toESM(require("react"));
+var import_styled_components13 = __toESM(require("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
+var import_react16 = __toESM(require("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__ */ import_react16.default.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
+var import_utils9 = require("@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__ */ import_react17.default.createElement(
+    Button,
+    {
+      type: "button",
+      onClick,
+      hide: !show,
+      style: offsetStyle,
+      css: onlyNonTouchDevice
+    },
+    /* @__PURE__ */ import_react17.default.createElement(CarouselButtonIcon, null, /* @__PURE__ */ import_react17.default.createElement(
+      NextIcon,
+      {
+        direction: direction === "right" /* Right */ ? "right" /* Right */ : direction === "left" /* Left */ ? "left" /* Left */ : unreachable()
+      }
+    ))
+  );
+}
+var CAROUSEL_BUTTON_SIZE = 40;
+var CarouselButtonIcon = import_styled_components13.default.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 = import_styled_components13.default.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 }) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.hover)};
+    color: ${({ theme: theme2 }) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.hover)};
+  }
+
+  &:active ${CarouselButtonIcon} {
+    background-color: ${({ theme: theme2 }) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.press)};
+    color: ${({ theme: theme2 }) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.press)};
+  }
+
+  ${(p) => p.hide && import_styled_components13.css`
+      visibility: hidden;
+      opacity: 0;
+      pointer-events: none;
+    `}
+`;
+var ScrollHintIcon = (0, import_styled_components13.default)(CarouselButtonIcon)`
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme: theme2 }) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.hover)};
+    color: ${({ theme: theme2 }) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.hover)};
+  }
+
+  &:active {
+    background-color: ${({ theme: theme2 }) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.press)};
+    color: ${({ theme: theme2 }) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.press)};
+  }
+`;
+var onlyNonTouchDevice = import_styled_components13.css`
+  @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 = (0, import_react18.useRef)(false);
+  const [maxScrollLeft, setMaxScrollLeft] = (0, import_react18.useState)(0);
+  const [leftShow, setLeftShow] = (0, import_react18.useState)(false);
+  const [rightShow, setRightShow] = (0, import_react18.useState)(false);
+  const [styles, set] = (0, import_react_spring.useSpring)(() => ({ scroll: 0 }));
+  const ref = (0, import_react18.useRef)(null);
+  const visibleAreaRef = (0, import_react18.useRef)(null);
+  const innerRef = (0, import_react18.useRef)(null);
+  const handleRight = (0, import_react18.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 = (0, import_react18.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]);
+  (0, import_react18.useEffect)(() => {
+    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 = (0, import_react18.useCallback)(() => {
+    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 = (0, import_react18.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);
+      }
+    }
+  }, [ref.current]);
+  const handleScrollMove = (0, import_react18.useCallback)(() => {
+    if (ref.current === null) {
+      return;
+    }
+    if (onScroll) {
+      onScroll(ref.current.scrollLeft);
+    }
+  }, [onScroll]);
+  const [disableGradient, setDisableGradient] = (0, import_react18.useState)(false);
+  useIsomorphicLayoutEffect(() => {
+    if (isEdge()) {
+      setDisableGradient(true);
+    }
+  }, []);
+  if (!disableGradient && options.hasGradient === true) {
+    const fadeInGradient = options.fadeInGradient ?? false;
+    const overflowGradient = !fadeInGradient;
+    return /* @__PURE__ */ import_react18.default.createElement(Container3, { ref: visibleAreaRef }, /* @__PURE__ */ import_react18.default.createElement(GradientContainer, { fadeInGradient }, /* @__PURE__ */ import_react18.default.createElement(RightGradient, null, /* @__PURE__ */ import_react18.default.createElement(LeftGradient, { show: overflowGradient || scrollLeft > 0 }, /* @__PURE__ */ import_react18.default.createElement(
+      ScrollArea,
+      {
+        ref,
+        scrollLeft: styles.scroll,
+        onScroll: handleScrollMove
+      },
+      /* @__PURE__ */ import_react18.default.createElement(CarouselContainer, { ref: innerRef, centerItems }, children)
+    )))), /* @__PURE__ */ import_react18.default.createElement(ButtonsContainer, null, /* @__PURE__ */ import_react18.default.createElement(
+      CarouselButton,
+      {
+        direction: "left" /* Left */,
+        show: leftShow,
+        offset: buttonOffset,
+        bottomOffset,
+        padding: buttonPadding,
+        gradient: overflowGradient,
+        onClick: handleLeft
+      }
+    ), /* @__PURE__ */ import_react18.default.createElement(
+      CarouselButton,
+      {
+        direction: "right" /* Right */,
+        show: rightShow,
+        offset: buttonOffset,
+        bottomOffset,
+        padding: buttonPadding,
+        gradient: true,
+        onClick: handleRight
+      }
+    )));
+  }
+  return /* @__PURE__ */ import_react18.default.createElement(Container3, { ref: visibleAreaRef }, /* @__PURE__ */ import_react18.default.createElement(
+    ScrollArea,
+    {
+      ref,
+      scrollLeft: styles.scroll,
+      onScroll: handleScrollMove
+    },
+    /* @__PURE__ */ import_react18.default.createElement(CarouselContainer, { ref: innerRef, centerItems }, children)
+  ), /* @__PURE__ */ import_react18.default.createElement(ButtonsContainer, null, /* @__PURE__ */ import_react18.default.createElement(
+    CarouselButton,
+    {
+      direction: "left" /* Left */,
+      show: leftShow,
+      offset: buttonOffset,
+      bottomOffset,
+      padding: buttonPadding,
+      onClick: handleLeft
+    }
+  ), /* @__PURE__ */ import_react18.default.createElement(
+    CarouselButton,
+    {
+      direction: "right" /* Right */,
+      show: rightShow,
+      offset: buttonOffset,
+      bottomOffset,
+      padding: buttonPadding,
+      onClick: handleRight
+    }
+  )));
+}
+var CarouselContainer = import_styled_components14.default.ul`
+  vertical-align: top;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+
+  /* 最小幅を100%にして親要素にぴったりくっつけることで子要素で要素を均等に割り付けるなどを出来るようにしてある */
+  min-width: 100%;
+  box-sizing: border-box;
+
+  ${({ centerItems = false }) => centerItems ? import_styled_components14.css`
+          display: flex;
+          width: max-content;
+          margin: 0 auto;
+        ` : import_styled_components14.css`
+          display: inline-flex;
+          margin: 0;
+        `}
+`;
+var ButtonsContainer = import_styled_components14.default.div`
+  opacity: 0;
+  transition: 0.4s opacity;
+`;
+var Container3 = import_styled_components14.default.div`
+  &:hover ${ButtonsContainer} {
+    opacity: 1;
+  }
+
+  /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */
+  position: relative;
+  z-index: 0;
+`;
+var ScrollArea = (0, import_styled_components14.default)(import_react_spring.animated.div)`
+  overflow-x: auto;
+  padding: 0;
+  margin: 0;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+`;
+var GradientContainer = import_styled_components14.default.div`
+  /* NOTE: LeftGradientがはみ出るためhidden */
+  overflow: hidden;
+  ${(p) => !p.fadeInGradient && import_styled_components14.css`
+      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 = import_styled_components14.default.div`
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - ${GRADIENT_WIDTH}px),
+    transparent
+  );
+`;
+var LeftGradient = import_styled_components14.default.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
+var import_react21 = __toESM(require("react"));
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_warning = __toESM(require("warning"));
+
+// src/components/icons/DotsIcon.tsx
+var import_react19 = __toESM(require("react"));
+var import_styled_components15 = __toESM(require("styled-components"));
+function DotsIcon({ size: size3 }) {
+  return /* @__PURE__ */ import_react19.default.createElement(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3 }, /* @__PURE__ */ import_react19.default.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 = import_styled_components15.default.svg`
+  fill: currentColor;
+`;
+
+// src/components/icons/WedgeIcon.tsx
+var import_react20 = __toESM(require("react"));
+var import_styled_components16 = __toESM(require("styled-components"));
+function WedgeIcon({ size: size3, direction }) {
+  return /* @__PURE__ */ import_react20.default.createElement("svg", { viewBox: "0 0 10 8", width: size3, height: size3 }, /* @__PURE__ */ import_react20.default.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 = import_styled_components16.default.polyline`
+  fill: none;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  stroke: currentColor;
+`;
+
+// src/components/Pager/index.tsx
+var import_react22 = require("@charcoal-ui/react");
+function usePagerWindow(page, pageCount, windowSize = 7) {
+  if (process.env.NODE_ENV !== "production") {
+    (0, import_warning.default)((page | 0) === page, `\`page\` must be interger (${page})`);
+    (0, import_warning.default)(
+      (pageCount | 0) === pageCount,
+      `\`pageCount\` must be interger (${pageCount})`
+    );
+  }
+  const window2 = (0, import_react21.useMemo)(() => {
+    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]);
+  (0, import_react21.useDebugValue)(window2);
+  return window2;
+}
+var Pager_default = import_react21.default.memo(function Pager({
+  page,
+  pageCount,
+  onChange
+}) {
+  const window2 = usePagerWindow(page, pageCount);
+  const makeClickHandler = (0, import_react21.useCallback)(
+    (value) => () => {
+      onChange(value);
+    },
+    [onChange]
+  );
+  const hasNext = page < pageCount;
+  const hasPrev = page > 1;
+  return /* @__PURE__ */ import_react21.default.createElement(PagerContainer, null, /* @__PURE__ */ import_react21.default.createElement(
+    CircleButton,
+    {
+      type: "button",
+      hidden: !hasPrev,
+      disabled: !hasPrev,
+      onClick: makeClickHandler(Math.max(1, page - 1)),
+      noBackground: true
+    },
+    /* @__PURE__ */ import_react21.default.createElement(WedgeIcon, { size: 16, direction: "left" /* Left */ })
+  ), window2.map(
+    (p) => p === "..." ? /* @__PURE__ */ import_react21.default.createElement(Spacer, { key: p }, /* @__PURE__ */ import_react21.default.createElement(DotsIcon, { size: 20 })) : p === page ? /* @__PURE__ */ import_react21.default.createElement(CircleButton, { key: p, type: "button", "aria-current": true }, /* @__PURE__ */ import_react21.default.createElement(Text3, null, p)) : /* @__PURE__ */ import_react21.default.createElement(CircleButton, { key: p, type: "button", onClick: makeClickHandler(p) }, /* @__PURE__ */ import_react21.default.createElement(Text3, null, p))
+  ), /* @__PURE__ */ import_react21.default.createElement(
+    CircleButton,
+    {
+      type: "button",
+      hidden: !hasNext,
+      disabled: !hasNext,
+      onClick: makeClickHandler(Math.min(pageCount, page + 1)),
+      noBackground: true
+    },
+    /* @__PURE__ */ import_react21.default.createElement(WedgeIcon, { size: 16, direction: "right" /* Right */ })
+  ));
+});
+function LinkPager({ page, pageCount, makeUrl }) {
+  const { Link } = (0, import_react22.useComponentAbstraction)();
+  const window2 = usePagerWindow(page, pageCount);
+  const hasNext = page < pageCount;
+  const hasPrev = page > 1;
+  return /* @__PURE__ */ import_react21.default.createElement(PagerContainer, null, /* @__PURE__ */ import_react21.default.createElement(Link, { to: makeUrl(Math.max(1, page - 1)) }, /* @__PURE__ */ import_react21.default.createElement(CircleButton, { hidden: !hasPrev, "aria-disabled": !hasPrev, noBackground: true }, /* @__PURE__ */ import_react21.default.createElement(WedgeIcon, { size: 16, direction: "left" /* Left */ }))), window2.map(
+    (p) => p === "..." ? /* @__PURE__ */ import_react21.default.createElement(Spacer, { key: p }, /* @__PURE__ */ import_react21.default.createElement(DotsIcon, { size: 20, subLink: true })) : p === page ? /* @__PURE__ */ import_react21.default.createElement(CircleButton, { key: p, type: "button", "aria-current": true }, /* @__PURE__ */ import_react21.default.createElement(Text3, null, p)) : /* @__PURE__ */ import_react21.default.createElement(Link, { key: p, to: makeUrl(p) }, /* @__PURE__ */ import_react21.default.createElement(CircleButton, { type: "button" }, /* @__PURE__ */ import_react21.default.createElement(Text3, null, p)))
+  ), /* @__PURE__ */ import_react21.default.createElement(Link, { to: makeUrl(Math.min(pageCount, page + 1)) }, /* @__PURE__ */ import_react21.default.createElement(CircleButton, { hidden: !hasNext, "aria-disabled": !hasNext, noBackground: true }, /* @__PURE__ */ import_react21.default.createElement(WedgeIcon, { size: 16, direction: "right" /* Right */ }))));
+}
+var PagerContainer = import_styled_components17.default.nav`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var CircleButton = import_styled_components17.default.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 && import_styled_components17.css`
+      /* stylelint-disable-next-line no-duplicate-selectors */
+      &:hover {
+        background: transparent;
+      }
+    `}
+`;
+var Spacer = (0, import_styled_components17.default)(CircleButton).attrs({ type: "button", disabled: true })`
+  && {
+    color: ${({ theme: theme2 }) => theme2.color.text3};
+    background: none;
+  }
+`;
+var Text3 = "span";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CancelLayoutItemBodyPadding,
+  Carousel,
+  ComponentAbstraction,
+  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,
+  RESPONSIVE_LEFT_WIDTH,
+  RESPONSIVE_MAIN_MAX_WIDTH,
+  StyledCancelLayoutItemBodyPadding,
+  StyledLayoutItemBody,
+  SwitchCheckbox,
+  TextEllipsis,
+  WithIcon,
+  useComponentAbstraction,
+  useElementSize,
+  useLayoutItemBodyPadding,
+  useMedia,
+  useMediaScreen1
+});
+//# sourceMappingURL=index.cjs.js.map