@charcoal-ui/react-sandbox 5.0.0-beta.2 → 5.0.0-beta.3

package/dist/index.esm.js

@@ -1,1378 +0,0 @@
-"use client";
-
-// src/components/Filter/index.tsx
-import * as React2 from "react";
-import styled, { css } from "styled-components";
-import { maxWidth } from "@charcoal-ui/utils";
-
-// src/_lib/ComponentAbstraction.tsx
-import { useContext } from "react";
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var DefaultLink = React.forwardRef(function DefaultLink2({
-  to,
-  children,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx("a", { href: to, ref, ...rest, children });
-});
-var DefaultValue = {
-  Link: DefaultLink
-};
-var ComponentAbstractionContext = React.createContext(DefaultValue);
-function ComponentAbstraction({
-  children,
-  components
-}) {
-  return /* @__PURE__ */ jsx(ComponentAbstractionContext.Provider, { value: {
-    ...DefaultValue,
-    ...components
-  }, children });
-}
-function useComponentAbstraction() {
-  return useContext(ComponentAbstractionContext);
-}
-
-// src/components/Filter/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var FilterButton = React2.forwardRef(function FilterButton2({
-  onClick,
-  children,
-  active = false,
-  hover,
-  reactive = false
-}, ref) {
-  return /* @__PURE__ */ jsx2(ButtonLike, { active, reactive, hover, onClick: active && !reactive ? void 0 : onClick, ref, children });
-});
-var FilterIconButton = React2.forwardRef(function FilterIconButton2({
-  onClick,
-  children,
-  active = false,
-  hover,
-  reactive = false,
-  width,
-  height
-}, ref) {
-  return /* @__PURE__ */ jsx2(StyledButtonLike, { active, reactive, hover, onClick: active && !reactive ? void 0 : onClick, ref, buttonWidth: width, buttonHeight: height, children });
-});
-var FilterLink = React2.forwardRef(function FilterLink2({
-  onClick,
-  children,
-  active = false,
-  hover,
-  reactive = false,
-  ...props
-}, ref) {
-  const {
-    Link
-  } = useComponentAbstraction();
-  if (active && !reactive) {
-    return /* @__PURE__ */ jsx2(PlainElement, { active: true, hover, ref, children });
-  } else {
-    return /* @__PURE__ */ jsx2(Link, { ...props, onClick, children: /* @__PURE__ */ jsx2(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:2000px;transition:color 0.2s;color:", ";cursor:pointer;user-select:none;background-color:transparent;&:hover{color:", ";}", " ", " ", " @media ", "{padding:5px 16px;}"], ({
-  theme: theme2
-}) => theme2.color.text3, ({
-  theme: theme2
-}) => theme2.color.text2, ({
-  hover = false
-}) => hover && css(["color:", ";"], ({
-  theme: theme2
-}) => theme2.color.text2), ({
-  active = false
-}) => active && css(["background-color:", ";color:", ";"], ({
-  theme: theme2
-}) => theme2.color.surface3, ({
-  theme: theme2
-}) => theme2.color.text2), ({
-  active = false,
-  reactive = false
-}) => active && !reactive && css(["cursor:default;"]), ({
-  theme: theme2
-}) => maxWidth(theme2.breakpoint.screen1));
-var padding0Css = css(["padding:0;@media ", "{padding:0;}"], ({
-  theme: theme2
-}) => maxWidth(theme2.breakpoint.screen1));
-var ButtonLike = styled.button.withConfig({
-  componentId: "ccl__sc-g0cfzt-0"
-})(["", ""], buttonCss);
-var PlainElement = styled.span.withConfig({
-  componentId: "ccl__sc-g0cfzt-1"
-})(["", ""], buttonCss);
-var StyledButtonLike = styled(ButtonLike).withConfig({
-  componentId: "ccl__sc-g0cfzt-2"
-})(["", ";", " ", ""], padding0Css, (p) => p.buttonWidth !== void 0 && `width: ${p.buttonWidth}px;`, (p) => p.buttonHeight !== void 0 && `height: ${p.buttonHeight}px;`);
-var Filter = styled.div.withConfig({
-  componentId: "ccl__sc-g0cfzt-3"
-})(["display:flex;"]);
-var Filter_default = Filter;
-
-// src/components/HintText/index.tsx
-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 styled4 from "styled-components";
-
-// src/components/icons/Base.tsx
-import styled3 from "styled-components";
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
-function IconBase({
-  size: size3 = 24,
-  viewBoxSize,
-  currentColor,
-  path: path2,
-  transform,
-  fillRule,
-  clipRule
-}) {
-  return /* @__PURE__ */ jsx3(Icon, { viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, size: size3, currentColor, children: /* @__PURE__ */ jsx3(IconBasePath, { path: path2, transform, fillRule, clipRule }) });
-}
-var Icon = styled3.svg.withConfig({
-  componentId: "ccl__sc-ifc22c-0"
-})(["stroke:none;fill:", ";width:", "px;height:", "px;line-height:0;font-size:0;vertical-align:middle;"], ({
-  currentColor = false,
-  theme: theme2
-}) => currentColor ? "currentColor" : theme2.color.text2, (props) => props.size, (props) => props.size);
-var IconBasePath = ({
-  path: path2,
-  transform,
-  fillRule,
-  clipRule
-}) => {
-  if (typeof path2 === "string") {
-    return /* @__PURE__ */ jsx3("path", { d: path2, transform, fillRule, clipRule });
-  } else {
-    return /* @__PURE__ */ jsx3(Fragment, { children: path2 });
-  }
-};
-
-// src/components/icons/InfoIcon.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs } from "react/jsx-runtime";
-var size = 16;
-function InfoIcon() {
-  const path2 = /* @__PURE__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("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__ */ jsx4(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__ */ jsx4(IconBase, { viewBoxSize: size, size, currentColor: true, path: path2 });
-}
-var Path = styled4.path.withConfig({
-  componentId: "ccl__sc-1yb63qx-0"
-})(["fill:", ";fill-rule:evenodd;"], ({
-  theme: theme2
-}) => theme2.color.surface1);
-
-// src/components/HintText/index.tsx
-import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-function HintText({
-  children,
-  context,
-  className
-}) {
-  return /* @__PURE__ */ jsxs2(Container, { className, ...styledProps({
-    children,
-    context,
-    className
-  }), children: [
-    /* @__PURE__ */ jsx5(IconWrap, { children: /* @__PURE__ */ jsx5(InfoIcon, {}) }),
-    /* @__PURE__ */ jsx5(Text, { children })
-  ] });
-}
-var Container = styled5.div.withConfig({
-  componentId: "ccl__sc-nb0aj3-0"
-})(["", " @media ", "{", "}display:flex;align-items:flex-start;", ""], (p) => theme((o) => [o.bg.surface3, o.borderRadius(8), o.padding.vertical(p.default.vertical), o.padding.horizontal(p.default.horizontal)]), ({
-  theme: t
-}) => maxWidth2(t.breakpoint.screen1), (p) => theme((o) => [o.padding.vertical(p.screen1.vertical), o.padding.horizontal(p.screen1.horizontal)]), (p) => p.context === "page" && css2(["justify-content:center;"]));
-var IconWrap = styled5.div.withConfig({
-  componentId: "ccl__sc-nb0aj3-1"
-})(["display:flex;align-items:center;color:", ";height:22px;margin:-4px 4px -4px 0;"], (p) => p.theme.color.text4);
-var Text = styled5.p.withConfig({
-  componentId: "ccl__sc-nb0aj3-2"
-})(["", " margin:0;min-width:0;overflow-wrap:break-word;"], theme((o) => [o.font.text2, o.typography(14)]));
-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 { useContext as useContext2 } from "react";
-import * as React3 from "react";
-import styled6, { createGlobalStyle, css as css3 } from "styled-components";
-
-// src/foundation/constants.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(void 0);
-  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";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var LayoutConfigContext = React3.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__ */ jsxs3(LayoutRoot, { children: [
-    /* @__PURE__ */ jsxs3(LayoutConfigContext.Provider, { value: config, children: [
-      config.withLeft && /* @__PURE__ */ jsx6(LeftArea, { children: menu }),
-      /* @__PURE__ */ jsxs3(MainArea, { center, children: [
-        header != null && /* @__PURE__ */ jsx6(Header, { children: header }),
-        isHeaderTopMenu && /* @__PURE__ */ jsx6(HeaderTopMenuContainer, { children: menu }),
-        /* @__PURE__ */ jsx6(Grid, { children })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx6(GlobalStyle, {})
-  ] });
-}
-var HeaderTopMenuContainer = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-0"
-})(["margin-bottom:40px;overflow-x:auto;word-break:keep-all;@media ", "{margin-bottom:0;padding-left:16px;padding-bottom:16px;background-color:", ";}"], ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.surface2);
-var GlobalStyle = createGlobalStyle([":root{background-color:", ";@media ", "{background-color:", ";}}"], ({
-  theme: theme2
-}) => theme2.color.background2, ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.background1);
-var LayoutRoot = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-1"
-})(["display:flex;background-color:", ";@media ", "{background-color:", ";}"], ({
-  theme: theme2
-}) => theme2.color.background2, ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.background1);
-var LeftArea = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-2"
-})(["min-width:", "px;padding:40px 0 40px ", "px;box-sizing:border-box;@media ", "{display:none;}"], RESPONSIVE_LEFT_WIDTH, GUTTER_UNIT2, ({
-  theme: theme2
-}) => theme2.breakpoint.screen3);
-var MainArea = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-3"
-})(["flex-grow:1;min-width:0;max-width:", "px;padding:40px ", "px;margin:0 auto;display:flex;flex-direction:column;@media ", "{padding:0;}"], (p) => p.center ? columnSystem2(6, COLUMN_UNIT2, GUTTER_UNIT2) : RESPONSIVE_MAIN_MAX_WIDTH, MAIN_COLUMN_HORIZONTAL_MIN_MARGIN, ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1));
-var Header = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-4"
-})(["font-weight:bold;margin-bottom:12px;font-size:20px;line-height:28px;color:", ";@media ", "{margin-bottom:0;padding:12px;font-size:16px;line-height:24px;display:flex;justify-content:center;background-color:", ";}"], ({
-  theme: theme2
-}) => theme2.color.text2, ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.surface2);
-var Grid = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-5"
-})(["display:grid;gap:", "px;grid-template-columns:1fr;grid-auto-columns:1fr;grid-auto-rows:auto;@media ", "{gap:0;background-color:", ";padding-bottom:60px;}"], GUTTER_UNIT2, ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.background1);
-var LayoutItem = React3.forwardRef(function LayoutItem2({
-  span,
-  children
-}, ref) {
-  const {
-    withLeft
-  } = useContext2(LayoutConfigContext);
-  return /* @__PURE__ */ jsx6(StyledLayoutItem, { span, withLeft, ref, children });
-});
-var StyledLayoutItem = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-6"
-})(["grid-column-start:auto;grid-column-end:span ", ";border-radius:24px;color:", ";background-color:", ";min-width:0;@media ", "{", "}@media ", "{", " border-radius:0;padding-bottom:40px;}"], (p) => p.span, ({
-  theme: theme2
-}) => theme2.color.text2, ({
-  theme: theme2
-}) => theme2.color.background1, (p) => p.withLeft ? p.theme.breakpoint.screen4 : p.theme.breakpoint.screen3, (p) => p.span > 2 && css3(["grid-column-end:span 2;"]), ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1), (p) => p.span > 1 && css3(["grid-column-end:span 1;"]));
-function LayoutItemHeader({
-  children
-}) {
-  const {
-    wide,
-    center
-  } = useContext2(LayoutConfigContext);
-  return /* @__PURE__ */ jsx6(StyledLayoutItemHeader, { wide, center, children });
-}
-var StyledLayoutItemHeader = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-7"
-})(["padding:0 ", "px;height:", "px;display:grid;align-items:center;font-size:16px;line-height:24px;font-weight:bold;background-color:", ";color:", ";border-radius:24px 24px 0 0;", " @media ", "{margin-top:4px;padding:0 16px;background:none;overflow-x:auto;border-radius:unset;", "}"], (p) => p.wide ? 40 : 24, (p) => p.wide ? 64 : 48, ({
-  theme: theme2
-}) => theme2.color.surface2, ({
-  theme: theme2
-}) => theme2.color.text2, (p) => p.center && css3(["justify-content:center;"]), ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1), (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
-  } = useContext2(LayoutConfigContext);
-  return /* @__PURE__ */ jsx6(StyledLayoutItemBody, { wide, horizontal, narrow, children });
-}
-var StyledLayoutItemBody = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-8"
-})(["padding:", ";@media ", "{padding:", ";}width:100%;box-sizing:border-box;"], (p) => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrow.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrow.x}px ${LAYOUT_ITEM_BODY_PADDING.narrow.yBottom}px` : p.wide ? `${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.wide.y}px ${LAYOUT_ITEM_BODY_PADDING.wide.x}px` : `${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.default.y}px ${LAYOUT_ITEM_BODY_PADDING.default.x}px`, ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1), (p) => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrowColumn1.x}px ${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yBottom}px` : `${LAYOUT_ITEM_BODY_PADDING.column1.y}px ${LAYOUT_ITEM_BODY_PADDING.column1.x}px ${0}`);
-function useLayoutItemBodyPadding() {
-  const {
-    wide
-  } = useContext2(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
-  } = useContext2(LayoutConfigContext);
-  return /* @__PURE__ */ jsx6(StyledCancelLayoutItemBodyPadding, { wide, cancelTop, children });
-}
-var StyledCancelLayoutItemBodyPadding = styled6.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-9"
-})(["margin:0 -", "px;margin-top:-", "px;@media ", "{margin:0 -", "px;margin-top:-", "px;}"], (p) => p.wide ? LAYOUT_ITEM_BODY_PADDING.wide.x : LAYOUT_ITEM_BODY_PADDING.default.x, ({
-  cancelTop = false,
-  wide
-}) => !cancelTop ? 0 : wide ? LAYOUT_ITEM_BODY_PADDING.wide.y : LAYOUT_ITEM_BODY_PADDING.default.y, ({
-  theme: theme2
-}) => maxWidth4(theme2.breakpoint.screen1), LAYOUT_ITEM_BODY_PADDING.column1.x, ({
-  cancelTop = false
-}) => !cancelTop ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x);
-
-// src/components/LeftMenu/index.tsx
-import styled9 from "styled-components";
-
-// src/components/MenuListItem/index.tsx
-import { useContext as useContext3 } from "react";
-import * as React4 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
-})).withConfig({
-  componentId: "ccl__sc-1pyqrbe-0"
-})(["overflow:hidden;line-height:", "px;overflow-wrap:break-word;", ""], (props) => props.lineHeight, ({
-  lineLimit = 1,
-  lineHeight
-}) => lineLimit === 1 ? css4(["text-overflow:ellipsis;white-space:nowrap;"]) : css4(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";max-height:", "px;"], lineLimit, lineHeight * lineLimit));
-
-// src/components/MenuListItem/index.tsx
-import { disabledSelector } from "@charcoal-ui/utils";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var MenuListItemContext = React4.createContext({
-  padding: 24
-});
-function MenuListItem({
-  primary,
-  secondary,
-  onClick,
-  disabled = false,
-  noHover = false,
-  gtmClass,
-  children
-}) {
-  const {
-    padding
-  } = useContext3(MenuListItemContext);
-  return /* @__PURE__ */ jsxs4(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, children: [
-    /* @__PURE__ */ jsxs4(Labels, { children: [
-      /* @__PURE__ */ jsx7(PrimaryText, { children: /* @__PURE__ */ jsx7(TextEllipsis, { lineHeight: 22, lineLimit: 1, children: primary }) }),
-      secondary !== void 0 && /* @__PURE__ */ jsx7(SecondaryText, { children: /* @__PURE__ */ jsx7(TextEllipsis, { lineHeight: 22, lineLimit: 1, children: secondary }) })
-    ] }),
-    children
-  ] });
-}
-var Item = styled8.div.withConfig({
-  componentId: "ccl__sc-1sufjh-0"
-})(["display:flex;height:", "px;align-items:center;justify-content:space-between;padding:0 ", "px;user-select:none;cursor:", ";transition:0.2s background-color;&:hover{", "}", " ", "{cursor:default;pointer-events:none;&:hover{background-color:unset;}}"], (p) => p.hasSubLabel ? 56 : 40, (p) => p.sidePadding, (p) => p.noClick ? "default" : "pointer", (p) => !p.noHover && css5(["background-color:", ";"], ({
-  theme: theme2
-}) => theme2.color.surface3), theme((o) => o.disabled), disabledSelector);
-var Labels = styled8.div.withConfig({
-  componentId: "ccl__sc-1sufjh-1"
-})(["display:flex;flex-direction:column;"]);
-var PrimaryText = styled8.div.withConfig({
-  componentId: "ccl__sc-1sufjh-2"
-})(["color:", ";line-height:22px;font-size:14px;display:grid;"], (p) => p.theme.color.text2);
-var SecondaryText = styled8.div.withConfig({
-  componentId: "ccl__sc-1sufjh-3"
-})(["color:", ";line-height:18px;font-size:10px;"], (p) => p.theme.color.text3);
-function MenuListLinkItem({
-  link,
-  onClick,
-  disabled = false,
-  primary,
-  secondary,
-  gtmClass,
-  noHover,
-  children,
-  ...linkProps
-}) {
-  const {
-    Link
-  } = useComponentAbstraction();
-  const props = {
-    disabled,
-    primary,
-    secondary,
-    gtmClass,
-    noHover,
-    children
-  };
-  return disabled ? /* @__PURE__ */ jsx7("span", { onClick, children: /* @__PURE__ */ jsx7(MenuListItem, { ...props }) }) : /* @__PURE__ */ jsx7(A, { as: Link, to: link, onClick, ...linkProps, children: /* @__PURE__ */ jsx7(MenuListItem, { onClick: () => void 0, ...props }) });
-}
-var A = styled8.a.withConfig({
-  componentId: "ccl__sc-1sufjh-4"
-})(["display:block;"]);
-function MenuListLinkItemWithIcon({
-  icon,
-  primary: text,
-  ...props
-}) {
-  const primary = /* @__PURE__ */ jsxs4(IconContainer, { children: [
-    /* @__PURE__ */ jsx7(Icon2, { children: icon }),
-    text
-  ] });
-  return /* @__PURE__ */ jsx7(MenuListLinkItem, { primary, ...props });
-}
-function MenuListItemWithIcon({
-  icon,
-  primary: text,
-  ...props
-}) {
-  const primary = /* @__PURE__ */ jsxs4(IconContainer, { children: [
-    /* @__PURE__ */ jsx7(Icon2, { children: icon }),
-    text
-  ] });
-  return /* @__PURE__ */ jsx7(MenuListItem, { primary, ...props });
-}
-var IconContainer = styled8.div.withConfig({
-  componentId: "ccl__sc-1sufjh-5"
-})(["display:grid;gap:8px;grid-auto-flow:column;align-items:center;"]);
-var Icon2 = styled8.div.withConfig({
-  componentId: "ccl__sc-1sufjh-6"
-})(["color:", ";display:flex;"], ({
-  theme: theme2
-}) => theme2.color.text3);
-var MenuListSpacer = styled8.div.withConfig({
-  componentId: "ccl__sc-1sufjh-7"
-})(["height:24px;"]);
-var MenuListLabel = styled8.div.withConfig({
-  componentId: "ccl__sc-1sufjh-8"
-})(["padding:0 16px;font-size:12px;line-height:16px;color:", ";margin-top:-2px;margin-bottom:6px;"], ({
-  theme: theme2
-}) => theme2.color.text3);
-
-// src/components/LeftMenu/index.tsx
-import { Fragment as Fragment3, jsx as jsx8 } from "react/jsx-runtime";
-function LeftMenu({
-  links,
-  active
-}) {
-  const {
-    Link
-  } = useComponentAbstraction();
-  return /* @__PURE__ */ jsx8(Container2, { children: links.map((link, index) => /* @__PURE__ */ jsx8(Link, { to: link.to, children: /* @__PURE__ */ jsx8(LinkItem, { "aria-current": link.id === active || void 0, children: link.text }) }, index)) });
-}
-function LeftMenuContent({
-  links
-}) {
-  return /* @__PURE__ */ jsx8(Fragment3, { children: links.map((link, index) => /* @__PURE__ */ jsx8(MenuListLinkItem, { link: link.to, primary: link.text }, index)) });
-}
-var Container2 = styled9.div.withConfig({
-  componentId: "ccl__sc-t7vwxn-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;"]);
-var LinkItem = styled9.div.withConfig({
-  componentId: "ccl__sc-t7vwxn-1"
-})(["display:flex;align-items:center;color:", ";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:", ";}&[aria-current]{color:", ";background-color:", ";}"], ({
-  theme: theme2
-}) => theme2.color.text3, ({
-  theme: theme2
-}) => theme2.color.text2, ({
-  theme: theme2
-}) => theme2.color.text2, ({
-  theme: theme2
-}) => theme2.color.surface3);
-
-// src/components/SwitchCheckbox/index.tsx
-import * as React5 from "react";
-import styled10, { css as css6 } from "styled-components";
-import { applyEffect } from "@charcoal-ui/utils";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var SwitchCheckbox_default = React5.forwardRef(function SwitchCheckbox({
-  gtmClass,
-  flex = false,
-  rowReverse = false,
-  children,
-  disabled,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxs5(Label, { className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "", flex, rowReverse, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsxs5(SwitchOuter, { children: [
-      /* @__PURE__ */ jsx9(SwitchInput, { ...props, disabled, ref }),
-      /* @__PURE__ */ jsx9(SwitchInner, { children: /* @__PURE__ */ jsx9(SwitchInnerKnob, {}) })
-    ] }),
-    children != null && /* @__PURE__ */ jsx9(Children2, { rowReverse, children })
-  ] });
-});
-var Children2 = styled10.span.withConfig({
-  componentId: "ccl__sc-vg0z5k-0"
-})(["", ""], (p) => p.rowReverse ? css6(["margin-right:8px;"]) : css6(["margin-left:8px;"]));
-var Label = styled10.label.withConfig({
-  componentId: "ccl__sc-vg0z5k-1"
-})(["display:inline-flex;align-items:center;", " ", " cursor:pointer;outline:0;&[aria-disabled='true']{cursor:auto;}"], ({
-  flex
-}) => flex && css6(["display:flex;justify-content:space-between;"]), ({
-  rowReverse
-}) => css6(["flex-direction:", ";"], rowReverse ? "row-reverse" : "row"));
-var SwitchOuter = styled10.span.withConfig({
-  componentId: "ccl__sc-vg0z5k-2"
-})(["display:inline-flex;position:relative;z-index:0;"]);
-var SwitchInner = styled10.div.withConfig({
-  componentId: "ccl__sc-vg0z5k-3"
-})(["position:relative;box-sizing:border-box;width:28px;height:16px;border-radius:16px;border:2px solid transparent;background:", ";transition:box-shadow 0.2s,background-color 0.2s;"], ({
-  theme: theme2
-}) => theme2.color.text4);
-var SwitchInnerKnob = styled10.div.withConfig({
-  componentId: "ccl__sc-vg0z5k-4"
-})(["position:absolute;display:block;top:0;left:0;width:12px;height:12px;background-color:", ";border-radius:50%;transform:translateX(0);transition:transform 0.2s;"], ({
-  theme: theme2
-}) => theme2.color.text5);
-var SwitchInput = styled10.input.attrs({
-  type: "checkbox"
-}).withConfig({
-  componentId: "ccl__sc-vg0z5k-5"
-})(["position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:16px;opacity:0;appearance:none;outline:none;cursor:pointer;&:checked{~ ", "{background-color:", ";", "{transform:translateX(12px);}}}&:disabled{cursor:auto;~ ", "{opacity:", ";}}&:not(:disabled):focus{~ ", "{box-shadow:0 0 0 4px ", ";}}"], SwitchInner, ({
-  theme: theme2
-}) => theme2.color.brand, SwitchInnerKnob, SwitchInner, ({
-  theme: theme2
-}) => theme2.elementEffect.disabled.opacity, SwitchInner, ({
-  theme: theme2
-}) => applyEffect(theme2.color.brand, theme2.elementEffect.disabled));
-
-// src/components/WithIcon/index.tsx
-import { useRef as useRef2 } from "react";
-import * as React6 from "react";
-import styled11, { css as css7 } from "styled-components";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var WithIcon_default = React6.memo(function WithIcon({
-  children,
-  icon,
-  show = true,
-  prefix: pre = false,
-  width,
-  fit = false,
-  fixed = false
-}) {
-  const node = fit ? width === void 0 ? /* @__PURE__ */ jsx10(AutoWidthIconAnchor, { show, pre, children: icon }) : /* @__PURE__ */ jsx10(IconAnchor, { width, show, pre, children: /* @__PURE__ */ jsx10(Icon3, { children: icon }) }) : /* @__PURE__ */ jsx10(IconAnchorNaive, { show, pre, children: /* @__PURE__ */ jsx10(IconNaive, { children: icon }) });
-  return /* @__PURE__ */ jsxs6(Root, { children: [
-    pre && node,
-    /* @__PURE__ */ jsx10(Text2, { fixed, children }),
-    !pre && node
-  ] });
-});
-var Root = styled11.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-0"
-})(["display:flex;align-items:center;"]);
-var Text2 = styled11.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-1"
-})(["", " white-space:nowrap;text-overflow:ellipsis;"], (p) => !p.fixed && css7(["min-width:0;overflow:hidden;"]));
-function AutoWidthIconAnchor({
-  children,
-  show,
-  pre
-}) {
-  const ref = useRef2(null);
-  const width = useElementSize(ref, [null])?.width ?? 0;
-  return /* @__PURE__ */ jsx10(IconAnchor, { width, show, pre, children: /* @__PURE__ */ jsx10(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.withConfig({
-  componentId: "ccl__sc-12w6fz6-2"
-})(["display:flex;align-items:center;", ""], iconAnchorCss);
-var IconNaive = styled11.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-3"
-})(["display:inline-flex;", ""], forceCenteringCss);
-var IconAnchor = styled11.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-4"
-})(["display:flex;position:relative;height:0;width:", "px;", ""], (p) => p.width, iconAnchorCss);
-var Icon3 = styled11.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-5"
-})(["display:inline-flex;position:absolute;transform:translateY(-50%);", ""], forceCenteringCss);
-
-// src/components/Carousel/index.tsx
-import { 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 styled12, { css as css8, default as _styled } 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 { jsx as jsx11 } from "react/jsx-runtime";
-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__ */ jsx11(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";
-import { jsx as jsx12 } from "react/jsx-runtime";
-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__ */ jsx12(_StyledButton, { type: "button", onClick, hide: !show, style: offsetStyle, children: /* @__PURE__ */ jsx12(CarouselButtonIcon, { children: /* @__PURE__ */ jsx12(NextIcon, { direction: direction === "right" /* Right */ ? "right" /* Right */ : (
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    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 _StyledButton = _styled(Button).withConfig({
-  componentId: "ccl__sc-gjlnt0-0"
-})(["", ""], onlyNonTouchDevice);
-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
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-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);
-    void 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);
-    void 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__ */ jsxs7(Container3, { ref: visibleAreaRef, children: [
-      /* @__PURE__ */ jsx13(GradientContainer, { fadeInGradient, children: /* @__PURE__ */ jsx13(RightGradient, { children: /* @__PURE__ */ jsx13(LeftGradient, { show: overflowGradient || scrollLeft > 0, children: /* @__PURE__ */ jsx13(ScrollArea, { ref, scrollLeft: styles.scroll, onScroll: handleScrollMove, children: /* @__PURE__ */ jsx13(CarouselContainer, { ref: innerRef, centerItems, children }) }) }) }) }),
-      /* @__PURE__ */ jsxs7(ButtonsContainer, { children: [
-        /* @__PURE__ */ jsx13(CarouselButton, { direction: "left" /* Left */, show: leftShow, offset: buttonOffset, bottomOffset, padding: buttonPadding, gradient: overflowGradient, onClick: handleLeft }),
-        /* @__PURE__ */ jsx13(CarouselButton, { direction: "right" /* Right */, show: rightShow, offset: buttonOffset, bottomOffset, padding: buttonPadding, gradient: true, onClick: handleRight })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs7(Container3, { ref: visibleAreaRef, children: [
-    /* @__PURE__ */ jsx13(ScrollArea, { ref, scrollLeft: styles.scroll, onScroll: handleScrollMove, children: /* @__PURE__ */ jsx13(CarouselContainer, { ref: innerRef, centerItems, children }) }),
-    /* @__PURE__ */ jsxs7(ButtonsContainer, { children: [
-      /* @__PURE__ */ jsx13(CarouselButton, { direction: "left" /* Left */, show: leftShow, offset: buttonOffset, bottomOffset, padding: buttonPadding, onClick: handleLeft }),
-      /* @__PURE__ */ jsx13(CarouselButton, { direction: "right" /* Right */, show: rightShow, offset: buttonOffset, bottomOffset, padding: buttonPadding, onClick: handleRight })
-    ] })
-  ] });
-}
-var CarouselContainer = styled13.ul.withConfig({
-  componentId: "ccl__sc-1qkjnfo-0"
-})(["vertical-align:top;overflow:hidden;list-style:none;padding:0;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.withConfig({
-  componentId: "ccl__sc-1qkjnfo-1"
-})(["opacity:0;transition:0.4s opacity;"]);
-var Container3 = styled13.div.withConfig({
-  componentId: "ccl__sc-1qkjnfo-2"
-})(["&:hover ", "{opacity:1;}position:relative;z-index:0;"], ButtonsContainer);
-var ScrollArea = styled13(animated.div).withConfig({
-  componentId: "ccl__sc-1qkjnfo-3"
-})(["overflow-x:auto;padding:0;margin:0;&::-webkit-scrollbar{display:none;}scrollbar-width:none;"]);
-var GradientContainer = styled13.div.withConfig({
-  componentId: "ccl__sc-1qkjnfo-4"
-})(["overflow:hidden;", " margin-right:", "px;", "{padding-right:", "px;}"], (p) => !p.fadeInGradient && css9(["margin-left:", "px;", "{padding-left:", "px;}"], -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
-var RightGradient = styled13.div.withConfig({
-  componentId: "ccl__sc-1qkjnfo-5"
-})(["mask-image:linear-gradient( to right,#000 calc(100% - ", "px),transparent );"], GRADIENT_WIDTH);
-var LeftGradient = styled13.div.withConfig({
-  componentId: "ccl__sc-1qkjnfo-6"
-})(["margin-right:", "px;padding-right:", "px;transition:0.2s all ease-in;mask:linear-gradient(to right,transparent,#000 ", "px) ", "px 0;"], -GRADIENT_WIDTH, GRADIENT_WIDTH, GRADIENT_WIDTH, (p) => p.show ? 0 : -GRADIENT_WIDTH);
-
-// src/components/Pager/index.tsx
-import { memo as memo2, 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 styled14 from "styled-components";
-import { jsx as jsx14 } from "react/jsx-runtime";
-function DotsIcon({
-  size: size3 = 16
-}) {
-  return /* @__PURE__ */ jsx14(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3, children: /* @__PURE__ */ jsx14("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)" }) });
-}
-var StyledSVG = styled14.svg.withConfig({
-  componentId: "ccl__sc-1ma336a-0"
-})(["fill:currentColor;"]);
-
-// src/components/icons/WedgeIcon.tsx
-import styled15 from "styled-components";
-import { jsx as jsx15 } from "react/jsx-runtime";
-function WedgeIcon({
-  size: size3 = 16,
-  direction
-}) {
-  return (
-    // NOTE: directionToTransform depends on the value of viewBox
-    /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 10 8", width: size3, height: size3, children: /* @__PURE__ */ jsx15(StyledPolyline, { strokeWidth: "2", points: "1,2 5,6 9,2", transform: directionToTransform2(direction) }) })
-  );
-}
-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.withConfig({
-  componentId: "ccl__sc-617sjj-0"
-})(["fill:none;stroke-linejoin:round;stroke-linecap:round;stroke:currentColor;"]);
-
-// src/components/Pager/index.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-function usePagerWindow(page, pageCount, pageRangeDisplayed = 7) {
-  if (process.env.NODE_ENV !== "production") {
-    warning((page | 0) === page, `\`page\` must be integer (${page})`);
-    warning((pageCount | 0) === pageCount, `\`pageCount\` must be integer (${pageCount})`);
-    warning((pageRangeDisplayed | 0) === pageRangeDisplayed, `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`);
-    warning(pageRangeDisplayed > 2, `\`windowSize\` must be greater than 2`);
-  }
-  const window2 = useMemo2(() => {
-    const visibleFirstPage = 1;
-    const visibleLastPage = Math.min(pageCount, Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed));
-    if (visibleLastPage <= pageRangeDisplayed) {
-      return Array.from({
-        length: 1 + visibleLastPage - visibleFirstPage
-      }, (_, i) => visibleFirstPage + i);
-    } else {
-      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2;
-      return [
-        // 表示範囲が1-7ページを超えるなら、
-        // - 1ページ目は固定で表示する
-        visibleFirstPage,
-        // - 2ページ目から現在のページの直前までは省略する
-        "...",
-        ...Array.from({
-          length: 1 + visibleLastPage - start
-        }, (_, i) => start + i)
-      ];
-    }
-  }, [page, pageCount, pageRangeDisplayed]);
-  useDebugValue2(window2);
-  return window2;
-}
-var Pager_default = memo2(function Pager({
-  page,
-  pageCount,
-  pageRangeDisplayed,
-  onChange
-}) {
-  const window2 = usePagerWindow(page, pageCount, pageRangeDisplayed);
-  const makeClickHandler = useCallback3((value) => () => {
-    onChange(value);
-  }, [onChange]);
-  const hasNext = page < pageCount;
-  const hasPrev = page > 1;
-  return /* @__PURE__ */ jsxs8(PagerContainer, { children: [
-    /* @__PURE__ */ jsx16(CircleButton, { type: "button", hidden: !hasPrev, disabled: !hasPrev, onClick: makeClickHandler(Math.max(1, page - 1)), noBackground: true, children: /* @__PURE__ */ jsx16(WedgeIcon, { size: 16, direction: "left" /* Left */ }) }),
-    window2.map((p) => p === "..." ? /* @__PURE__ */ jsx16(Spacer, { children: /* @__PURE__ */ jsx16(DotsIcon, { size: 20 }) }, p) : p === page ? (
-      // we remove the onClick but don't mark it as disabled to preserve keyboard focus
-      // not doing so causes the focus ring to flicker in and out of existence
-      /* @__PURE__ */ jsx16(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ jsx16(Text3, { children: p }) }, p)
-    ) : /* @__PURE__ */ jsx16(CircleButton, { type: "button", onClick: makeClickHandler(p), children: /* @__PURE__ */ jsx16(Text3, { children: p }) }, p)),
-    /* @__PURE__ */ jsx16(CircleButton, { type: "button", hidden: !hasNext, disabled: !hasNext, onClick: makeClickHandler(Math.min(pageCount, page + 1)), noBackground: true, children: /* @__PURE__ */ jsx16(WedgeIcon, { size: 16, direction: "right" /* Right */ }) })
-  ] });
-});
-function LinkPager({
-  page,
-  pageCount,
-  pageRangeDisplayed,
-  makeUrl
-}) {
-  const {
-    Link
-  } = useComponentAbstraction();
-  const window2 = usePagerWindow(page, pageCount, pageRangeDisplayed);
-  const hasNext = page < pageCount;
-  const hasPrev = page > 1;
-  return /* @__PURE__ */ jsxs8(PagerContainer, { children: [
-    /* @__PURE__ */ jsx16(Link, { to: makeUrl(Math.max(1, page - 1)), children: /* @__PURE__ */ jsx16(CircleButton, { hidden: !hasPrev, "aria-disabled": !hasPrev, noBackground: true, children: /* @__PURE__ */ jsx16(WedgeIcon, { size: 16, direction: "left" /* Left */ }) }) }),
-    window2.map((p) => p === "..." ? /* @__PURE__ */ jsx16(Spacer, { children: /* @__PURE__ */ jsx16(DotsIcon, { size: 20, subLink: true }) }, p) : p === page ? /* @__PURE__ */ jsx16(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ jsx16(Text3, { children: p }) }, p) : /* @__PURE__ */ jsx16(Link, { to: makeUrl(p), children: /* @__PURE__ */ jsx16(CircleButton, { type: "button", children: /* @__PURE__ */ jsx16(Text3, { children: p }) }) }, p)),
-    /* @__PURE__ */ jsx16(Link, { to: makeUrl(Math.min(pageCount, page + 1)), children: /* @__PURE__ */ jsx16(CircleButton, { hidden: !hasNext, "aria-disabled": !hasNext, noBackground: true, children: /* @__PURE__ */ jsx16(WedgeIcon, { size: 16, direction: "right" /* Right */ }) }) })
-  ] });
-}
-var PagerContainer = styled16.nav.withConfig({
-  componentId: "ccl__sc-1bh6g9v-0"
-})(["display:flex;justify-content:center;align-items:center;"]);
-var CircleButton = styled16.button.withConfig({
-  componentId: "ccl__sc-1bh6g9v-1"
-})(["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;-webkit-transform:translateZ(0);&[hidden]{visibility:hidden;display:block;}border-radius:48px;background:transparent;color:", ";&:hover{background:", ";color:", ";}&[aria-current]{background-color:", ";color:", ";}&[aria-current]:hover{background-color:", ";color:", ";}", ""], ({
-  theme: theme2
-}) => theme2.color.text3, ({
-  theme: theme2
-}) => theme2.color.surface3, ({
-  theme: theme2
-}) => theme2.color.text2, ({
-  theme: theme2
-}) => theme2.color.surface6, ({
-  theme: theme2
-}) => theme2.color.text5, ({
-  theme: theme2
-}) => theme2.color.surface6, ({
-  theme: theme2
-}) => theme2.color.text5, ({
-  noBackground = false
-}) => noBackground && css10(["&:hover{background:transparent;}"]));
-var Spacer = styled16(CircleButton).attrs({
-  type: "button",
-  disabled: true
-}).withConfig({
-  componentId: "ccl__sc-1bh6g9v-2"
-})(["&&{color:", ";background:none;}"], ({
-  theme: theme2
-}) => theme2.color.text3);
-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,
-  useComponentAbstraction,
-  useElementSize,
-  useLayoutItemBodyPadding,
-  useMedia,
-  useMediaScreen1
-};
-//# sourceMappingURL=index.esm.js.map