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

package/dist/index.cjs.js

@@ -1,1450 +0,0 @@
-"use client";
-"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(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  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: () => 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: () => useComponentAbstraction,
-  useElementSize: () => useElementSize,
-  useLayoutItemBodyPadding: () => useLayoutItemBodyPadding,
-  useMedia: () => useMedia,
-  useMediaScreen1: () => useMediaScreen1
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/components/Filter/index.tsx
-var React2 = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_utils = require("@charcoal-ui/utils");
-
-// src/_lib/ComponentAbstraction.tsx
-var import_react = require("react");
-var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var DefaultLink = React.forwardRef(function DefaultLink2({
-  to,
-  children,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: to, ref, ...rest, children });
-});
-var DefaultValue = {
-  Link: DefaultLink
-};
-var ComponentAbstractionContext = React.createContext(DefaultValue);
-function ComponentAbstraction({
-  children,
-  components
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComponentAbstractionContext.Provider, { value: {
-    ...DefaultValue,
-    ...components
-  }, children });
-}
-function useComponentAbstraction() {
-  return (0, import_react.useContext)(ComponentAbstractionContext);
-}
-
-// src/components/Filter/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FilterButton = React2.forwardRef(function FilterButton2({
-  onClick,
-  children,
-  active = false,
-  hover,
-  reactive = false
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)(PlainElement, { active: true, hover, ref, children });
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Link, { ...props, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlainElement, { active, reactive, hover, ref, children }) });
-  }
-});
-var buttonCss = (0, import_styled_components.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 && (0, import_styled_components.css)(["color:", ";"], ({
-  theme: theme2
-}) => theme2.color.text2), ({
-  active = false
-}) => active && (0, import_styled_components.css)(["background-color:", ";color:", ";"], ({
-  theme: theme2
-}) => theme2.color.surface3, ({
-  theme: theme2
-}) => theme2.color.text2), ({
-  active = false,
-  reactive = false
-}) => active && !reactive && (0, import_styled_components.css)(["cursor:default;"]), ({
-  theme: theme2
-}) => (0, import_utils.maxWidth)(theme2.breakpoint.screen1));
-var padding0Css = (0, import_styled_components.css)(["padding:0;@media ", "{padding:0;}"], ({
-  theme: theme2
-}) => (0, import_utils.maxWidth)(theme2.breakpoint.screen1));
-var ButtonLike = import_styled_components.default.button.withConfig({
-  componentId: "ccl__sc-g0cfzt-0"
-})(["", ""], buttonCss);
-var PlainElement = import_styled_components.default.span.withConfig({
-  componentId: "ccl__sc-g0cfzt-1"
-})(["", ""], buttonCss);
-var StyledButtonLike = (0, import_styled_components.default)(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 = import_styled_components.default.div.withConfig({
-  componentId: "ccl__sc-g0cfzt-3"
-})(["display:flex;"]);
-var Filter_default = Filter;
-
-// src/components/HintText/index.tsx
-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_styled_components4 = __toESM(require("styled-components"));
-
-// src/components/icons/Base.tsx
-var import_styled_components3 = __toESM(require("styled-components"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function IconBase({
-  size: size3 = 24,
-  viewBoxSize,
-  currentColor,
-  path: path2,
-  transform,
-  fillRule,
-  clipRule
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, size: size3, currentColor, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconBasePath, { path: path2, transform, fillRule, clipRule }) });
-}
-var Icon = import_styled_components3.default.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__ */ (0, import_jsx_runtime3.jsx)("path", { d: path2, transform, fillRule, clipRule });
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: path2 });
-  }
-};
-
-// src/components/icons/InfoIcon.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var size = 16;
-function InfoIcon() {
-  const path2 = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime4.jsx)(IconBase, { viewBoxSize: size, size, currentColor: true, path: path2 });
-}
-var Path = import_styled_components4.default.path.withConfig({
-  componentId: "ccl__sc-1yb63qx-0"
-})(["fill:", ";fill-rule:evenodd;"], ({
-  theme: theme2
-}) => theme2.color.surface1);
-
-// src/components/HintText/index.tsx
-var import_utils2 = require("@charcoal-ui/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function HintText({
-  children,
-  context,
-  className
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Container, { className, ...styledProps({
-    children,
-    context,
-    className
-  }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconWrap, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { children })
-  ] });
-}
-var Container = import_styled_components5.default.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
-}) => (0, import_utils2.maxWidth)(t.breakpoint.screen1), (p) => theme((o) => [o.padding.vertical(p.screen1.vertical), o.padding.horizontal(p.screen1.horizontal)]), (p) => p.context === "page" && (0, import_styled_components5.css)(["justify-content:center;"]));
-var IconWrap = import_styled_components5.default.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 = import_styled_components5.default.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
-var import_react3 = require("react");
-var React3 = __toESM(require("react"));
-var import_styled_components7 = __toESM(require("styled-components"));
-
-// src/foundation/constants.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_react2 = 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_react2.useMemo)(() => __TEST__ ? {
-    matches: false,
-    addListener: () => {
-    },
-    removeListener: () => {
-    }
-  } : matchMedia(query), [query]);
-  const [matches, setMatches] = (0, import_react2.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_react2.useLayoutEffect)(() => {
-    matcher.addListener(callback);
-    setMatches(matcher.matches);
-    return () => {
-      matcher.removeListener(callback);
-    };
-  }, [matcher]);
-  (0, import_react2.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_react2.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_react2.useState)(null);
-  (0, import_react2.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_react2.useLayoutEffect)(() => {
-    if (ref.current !== watch) {
-      setWatch(ref.current);
-    }
-  });
-  (0, import_react2.useLayoutEffect)(() => {
-    if (deps.length > 0) {
-      setSize(measure(ref.current));
-    }
-  }, deps);
-  (0, import_react2.useDebugValue)(size3);
-  return size3;
-}
-function useDebounceAnimationState(defaultValue) {
-  const [state, setState] = (0, import_react2.useState)(defaultValue);
-  const timer = (0, import_react2.useRef)(void 0);
-  const setDebounceState = (0, import_react2.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 import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsxs)(LayoutRoot, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(LayoutConfigContext.Provider, { value: config, children: [
-      config.withLeft && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LeftArea, { children: menu }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MainArea, { center, children: [
-        header != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Header, { children: header }),
-        isHeaderTopMenu && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderTopMenuContainer, { children: menu }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Grid, { children })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobalStyle, {})
-  ] });
-}
-var HeaderTopMenuContainer = import_styled_components7.default.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
-}) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.surface2);
-var GlobalStyle = (0, import_styled_components7.createGlobalStyle)([":root{background-color:", ";@media ", "{background-color:", ";}}"], ({
-  theme: theme2
-}) => theme2.color.background2, ({
-  theme: theme2
-}) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.background1);
-var LayoutRoot = import_styled_components7.default.div.withConfig({
-  componentId: "ccl__sc-j6bt5m-1"
-})(["display:flex;background-color:", ";@media ", "{background-color:", ";}"], ({
-  theme: theme2
-}) => theme2.color.background2, ({
-  theme: theme2
-}) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.background1);
-var LeftArea = import_styled_components7.default.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, import_foundation2.GUTTER_UNIT, ({
-  theme: theme2
-}) => theme2.breakpoint.screen3);
-var MainArea = import_styled_components7.default.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 ? (0, import_foundation2.columnSystem)(6, import_foundation2.COLUMN_UNIT, import_foundation2.GUTTER_UNIT) : RESPONSIVE_MAIN_MAX_WIDTH, MAIN_COLUMN_HORIZONTAL_MIN_MARGIN, ({
-  theme: theme2
-}) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1));
-var Header = import_styled_components7.default.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
-}) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.surface2);
-var Grid = import_styled_components7.default.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;}"], import_foundation2.GUTTER_UNIT, ({
-  theme: theme2
-}) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1), ({
-  theme: theme2
-}) => theme2.color.background1);
-var LayoutItem = React3.forwardRef(function LayoutItem2({
-  span,
-  children
-}, ref) {
-  const {
-    withLeft
-  } = (0, import_react3.useContext)(LayoutConfigContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledLayoutItem, { span, withLeft, ref, children });
-});
-var StyledLayoutItem = import_styled_components7.default.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 && (0, import_styled_components7.css)(["grid-column-end:span 2;"]), ({
-  theme: theme2
-}) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1), (p) => p.span > 1 && (0, import_styled_components7.css)(["grid-column-end:span 1;"]));
-function LayoutItemHeader({
-  children
-}) {
-  const {
-    wide,
-    center
-  } = (0, import_react3.useContext)(LayoutConfigContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledLayoutItemHeader, { wide, center, children });
-}
-var StyledLayoutItemHeader = import_styled_components7.default.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 && (0, import_styled_components7.css)(["justify-content:center;"]), ({
-  theme: theme2
-}) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1), (p) => p.wide && (0, 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_react3.useContext)(LayoutConfigContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledLayoutItemBody, { wide, horizontal, narrow, children });
-}
-var StyledLayoutItemBody = import_styled_components7.default.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
-}) => (0, import_utils4.maxWidth)(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
-  } = (0, import_react3.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_react3.useContext)(LayoutConfigContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledCancelLayoutItemBodyPadding, { wide, cancelTop, children });
-}
-var StyledCancelLayoutItemBodyPadding = import_styled_components7.default.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
-}) => (0, import_utils4.maxWidth)(theme2.breakpoint.screen1), LAYOUT_ITEM_BODY_PADDING.column1.x, ({
-  cancelTop = false
-}) => !cancelTop ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x);
-
-// src/components/LeftMenu/index.tsx
-var import_styled_components10 = __toESM(require("styled-components"));
-
-// src/components/MenuListItem/index.tsx
-var import_react5 = require("react");
-var React4 = __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_react4 = require("react");
-var hasChildren = (element) => (0, import_react4.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_react4.isValidElement)(children)) {
-    return childToString(children);
-  }
-  return import_react4.Children.toArray(children).reduce((text, child) => {
-    let newText = "";
-    if ((0, import_react4.isValidElement)(child) && hasChildren(child)) {
-      newText = onlyText(child.props.children);
-    } else if ((0, import_react4.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
-})).withConfig({
-  componentId: "ccl__sc-1pyqrbe-0"
-})(["overflow:hidden;line-height:", "px;overflow-wrap:break-word;", ""], (props) => props.lineHeight, ({
-  lineLimit = 1,
-  lineHeight
-}) => lineLimit === 1 ? (0, import_styled_components8.css)(["text-overflow:ellipsis;white-space:nowrap;"]) : (0, import_styled_components8.css)(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";max-height:", "px;"], lineLimit, lineHeight * lineLimit));
-
-// src/components/MenuListItem/index.tsx
-var import_utils5 = require("@charcoal-ui/utils");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var MenuListItemContext = React4.createContext({
-  padding: 24
-});
-function MenuListItem({
-  primary,
-  secondary,
-  onClick,
-  disabled = false,
-  noHover = false,
-  gtmClass,
-  children
-}) {
-  const {
-    padding
-  } = (0, import_react5.useContext)(MenuListItemContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(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__ */ (0, import_jsx_runtime7.jsxs)(Labels, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PrimaryText, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextEllipsis, { lineHeight: 22, lineLimit: 1, children: primary }) }),
-      secondary !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SecondaryText, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextEllipsis, { lineHeight: 22, lineLimit: 1, children: secondary }) })
-    ] }),
-    children
-  ] });
-}
-var Item = import_styled_components9.default.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 && (0, import_styled_components9.css)(["background-color:", ";"], ({
-  theme: theme2
-}) => theme2.color.surface3), theme((o) => o.disabled), import_utils5.disabledSelector);
-var Labels = import_styled_components9.default.div.withConfig({
-  componentId: "ccl__sc-1sufjh-1"
-})(["display:flex;flex-direction:column;"]);
-var PrimaryText = import_styled_components9.default.div.withConfig({
-  componentId: "ccl__sc-1sufjh-2"
-})(["color:", ";line-height:22px;font-size:14px;display:grid;"], (p) => p.theme.color.text2);
-var SecondaryText = import_styled_components9.default.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__ */ (0, import_jsx_runtime7.jsx)("span", { onClick, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuListItem, { ...props }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(A, { as: Link, to: link, onClick, ...linkProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuListItem, { onClick: () => void 0, ...props }) });
-}
-var A = import_styled_components9.default.a.withConfig({
-  componentId: "ccl__sc-1sufjh-4"
-})(["display:block;"]);
-function MenuListLinkItemWithIcon({
-  icon,
-  primary: text,
-  ...props
-}) {
-  const primary = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(IconContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon2, { children: icon }),
-    text
-  ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuListLinkItem, { primary, ...props });
-}
-function MenuListItemWithIcon({
-  icon,
-  primary: text,
-  ...props
-}) {
-  const primary = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(IconContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon2, { children: icon }),
-    text
-  ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuListItem, { primary, ...props });
-}
-var IconContainer = import_styled_components9.default.div.withConfig({
-  componentId: "ccl__sc-1sufjh-5"
-})(["display:grid;gap:8px;grid-auto-flow:column;align-items:center;"]);
-var Icon2 = import_styled_components9.default.div.withConfig({
-  componentId: "ccl__sc-1sufjh-6"
-})(["color:", ";display:flex;"], ({
-  theme: theme2
-}) => theme2.color.text3);
-var MenuListSpacer = import_styled_components9.default.div.withConfig({
-  componentId: "ccl__sc-1sufjh-7"
-})(["height:24px;"]);
-var MenuListLabel = import_styled_components9.default.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
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function LeftMenu({
-  links,
-  active
-}) {
-  const {
-    Link
-  } = useComponentAbstraction();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Container2, { children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Link, { to: link.to, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LinkItem, { "aria-current": link.id === active || void 0, children: link.text }) }, index)) });
-}
-function LeftMenuContent({
-  links
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuListLinkItem, { link: link.to, primary: link.text }, index)) });
-}
-var Container2 = import_styled_components10.default.div.withConfig({
-  componentId: "ccl__sc-t7vwxn-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;"]);
-var LinkItem = import_styled_components10.default.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
-var React5 = __toESM(require("react"));
-var import_styled_components11 = __toESM(require("styled-components"));
-var import_utils6 = require("@charcoal-ui/utils");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var SwitchCheckbox_default = React5.forwardRef(function SwitchCheckbox({
-  gtmClass,
-  flex = false,
-  rowReverse = false,
-  children,
-  disabled,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Label, { className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "", flex, rowReverse, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SwitchOuter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchInput, { ...props, disabled, ref }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchInner, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchInnerKnob, {}) })
-    ] }),
-    children != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Children2, { rowReverse, children })
-  ] });
-});
-var Children2 = import_styled_components11.default.span.withConfig({
-  componentId: "ccl__sc-vg0z5k-0"
-})(["", ""], (p) => p.rowReverse ? (0, import_styled_components11.css)(["margin-right:8px;"]) : (0, import_styled_components11.css)(["margin-left:8px;"]));
-var Label = import_styled_components11.default.label.withConfig({
-  componentId: "ccl__sc-vg0z5k-1"
-})(["display:inline-flex;align-items:center;", " ", " cursor:pointer;outline:0;&[aria-disabled='true']{cursor:auto;}"], ({
-  flex
-}) => flex && (0, import_styled_components11.css)(["display:flex;justify-content:space-between;"]), ({
-  rowReverse
-}) => (0, import_styled_components11.css)(["flex-direction:", ";"], rowReverse ? "row-reverse" : "row"));
-var SwitchOuter = import_styled_components11.default.span.withConfig({
-  componentId: "ccl__sc-vg0z5k-2"
-})(["display:inline-flex;position:relative;z-index:0;"]);
-var SwitchInner = import_styled_components11.default.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 = import_styled_components11.default.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 = import_styled_components11.default.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
-}) => (0, import_utils6.applyEffect)(theme2.color.brand, theme2.elementEffect.disabled));
-
-// src/components/WithIcon/index.tsx
-var import_react6 = require("react");
-var React6 = __toESM(require("react"));
-var import_styled_components12 = __toESM(require("styled-components"));
-var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)(AutoWidthIconAnchor, { show, pre, children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconAnchor, { width, show, pre, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon3, { children: icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconAnchorNaive, { show, pre, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconNaive, { children: icon }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Root, { children: [
-    pre && node,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text2, { fixed, children }),
-    !pre && node
-  ] });
-});
-var Root = import_styled_components12.default.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-0"
-})(["display:flex;align-items:center;"]);
-var Text2 = import_styled_components12.default.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-1"
-})(["", " white-space:nowrap;text-overflow:ellipsis;"], (p) => !p.fixed && (0, import_styled_components12.css)(["min-width:0;overflow:hidden;"]));
-function AutoWidthIconAnchor({
-  children,
-  show,
-  pre
-}) {
-  const ref = (0, import_react6.useRef)(null);
-  const width = useElementSize(ref, [null])?.width ?? 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconAnchor, { width, show, pre, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon3, { ref, children }) });
-}
-var forceCenteringCss = (0, import_styled_components12.css)(["> svg{display:block;}"]);
-var iconAnchorCss = (0, import_styled_components12.css)(["", ";", ""], (p) => p.show === "collapse" ? (0, import_styled_components12.css)(["display:none;"]) : (0, import_styled_components12.css)(["visibility:", ";"], p.show ? "visible" : "hidden"), (p) => p.pre ? (0, import_styled_components12.css)(["margin-right:4px;"]) : (0, import_styled_components12.css)(["margin-left:4px;"]));
-var IconAnchorNaive = import_styled_components12.default.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-2"
-})(["display:flex;align-items:center;", ""], iconAnchorCss);
-var IconNaive = import_styled_components12.default.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-3"
-})(["display:inline-flex;", ""], forceCenteringCss);
-var IconAnchor = import_styled_components12.default.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-4"
-})(["display:flex;position:relative;height:0;width:", "px;", ""], (p) => p.width, iconAnchorCss);
-var Icon3 = import_styled_components12.default.div.withConfig({
-  componentId: "ccl__sc-12w6fz6-5"
-})(["display:inline-flex;position:absolute;transform:translateY(-50%);", ""], forceCenteringCss);
-
-// src/components/Carousel/index.tsx
-var import_react8 = 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_react7 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react7.useLayoutEffect : import_react7.useEffect;
-
-// src/components/CarouselButton/index.tsx
-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_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsx)(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");
-var import_jsx_runtime12 = require("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__ */ (0, import_jsx_runtime12.jsx)(_StyledButton, { type: "button", onClick, hide: !show, style: offsetStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CarouselButtonIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(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 = 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 && (0, import_styled_components13.css)(["visibility:hidden;opacity:0;pointer-events:none;"])}
-`;
-var _StyledButton = (0, import_styled_components13.default)(Button).withConfig({
-  componentId: "ccl__sc-gjlnt0-0"
-})(["", ""], onlyNonTouchDevice);
-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 = (0, import_styled_components13.css)(["@media (hover:none) and (pointer:coarse){display:none;}"]);
-
-// src/components/Carousel/index.tsx
-var import_jsx_runtime13 = require("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 = (0, import_react8.useRef)(false);
-  const [maxScrollLeft, setMaxScrollLeft] = (0, import_react8.useState)(0);
-  const [leftShow, setLeftShow] = (0, import_react8.useState)(false);
-  const [rightShow, setRightShow] = (0, import_react8.useState)(false);
-  const [styles, set] = (0, import_react_spring.useSpring)(() => ({
-    scroll: 0
-  }));
-  const ref = (0, import_react8.useRef)(null);
-  const visibleAreaRef = (0, import_react8.useRef)(null);
-  const innerRef = (0, import_react8.useRef)(null);
-  const handleRight = (0, import_react8.useCallback)(() => {
-    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 = (0, import_react8.useCallback)(() => {
-    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]);
-  (0, import_react8.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_react8.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_react8.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_react8.useCallback)(() => {
-    if (ref.current === null) {
-      return;
-    }
-    if (onScroll) {
-      onScroll(ref.current.scrollLeft);
-    }
-  }, [onScroll]);
-  const [disableGradient, setDisableGradient] = (0, import_react8.useState)(false);
-  useIsomorphicLayoutEffect(() => {
-    if (isEdge()) {
-      setDisableGradient(true);
-    }
-  }, []);
-  if (!disableGradient && options.hasGradient === true) {
-    const fadeInGradient = options.fadeInGradient ?? false;
-    const overflowGradient = !fadeInGradient;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Container3, { ref: visibleAreaRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GradientContainer, { fadeInGradient, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RightGradient, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LeftGradient, { show: overflowGradient || scrollLeft > 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollArea, { ref, scrollLeft: styles.scroll, onScroll: handleScrollMove, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CarouselContainer, { ref: innerRef, centerItems, children }) }) }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ButtonsContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CarouselButton, { direction: "left" /* Left */, show: leftShow, offset: buttonOffset, bottomOffset, padding: buttonPadding, gradient: overflowGradient, onClick: handleLeft }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CarouselButton, { direction: "right" /* Right */, show: rightShow, offset: buttonOffset, bottomOffset, padding: buttonPadding, gradient: true, onClick: handleRight })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Container3, { ref: visibleAreaRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollArea, { ref, scrollLeft: styles.scroll, onScroll: handleScrollMove, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CarouselContainer, { ref: innerRef, centerItems, children }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ButtonsContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CarouselButton, { direction: "left" /* Left */, show: leftShow, offset: buttonOffset, bottomOffset, padding: buttonPadding, onClick: handleLeft }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CarouselButton, { direction: "right" /* Right */, show: rightShow, offset: buttonOffset, bottomOffset, padding: buttonPadding, onClick: handleRight })
-    ] })
-  ] });
-}
-var CarouselContainer = import_styled_components14.default.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 ? (0, import_styled_components14.css)(["display:flex;width:max-content;margin:0 auto;"]) : (0, import_styled_components14.css)(["display:inline-flex;margin:0;"]));
-var ButtonsContainer = import_styled_components14.default.div.withConfig({
-  componentId: "ccl__sc-1qkjnfo-1"
-})(["opacity:0;transition:0.4s opacity;"]);
-var Container3 = import_styled_components14.default.div.withConfig({
-  componentId: "ccl__sc-1qkjnfo-2"
-})(["&:hover ", "{opacity:1;}position:relative;z-index:0;"], ButtonsContainer);
-var ScrollArea = (0, import_styled_components14.default)(import_react_spring.animated.div).withConfig({
-  componentId: "ccl__sc-1qkjnfo-3"
-})(["overflow-x:auto;padding:0;margin:0;&::-webkit-scrollbar{display:none;}scrollbar-width:none;"]);
-var GradientContainer = import_styled_components14.default.div.withConfig({
-  componentId: "ccl__sc-1qkjnfo-4"
-})(["overflow:hidden;", " margin-right:", "px;", "{padding-right:", "px;}"], (p) => !p.fadeInGradient && (0, import_styled_components14.css)(["margin-left:", "px;", "{padding-left:", "px;}"], -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
-var RightGradient = import_styled_components14.default.div.withConfig({
-  componentId: "ccl__sc-1qkjnfo-5"
-})(["mask-image:linear-gradient( to right,#000 calc(100% - ", "px),transparent );"], GRADIENT_WIDTH);
-var LeftGradient = import_styled_components14.default.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
-var import_react9 = require("react");
-var import_styled_components17 = __toESM(require("styled-components"));
-var import_warning = __toESM(require("warning"));
-
-// src/components/icons/DotsIcon.tsx
-var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function DotsIcon({
-  size: size3 = 16
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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 = import_styled_components15.default.svg.withConfig({
-  componentId: "ccl__sc-1ma336a-0"
-})(["fill:currentColor;"]);
-
-// src/components/icons/WedgeIcon.tsx
-var import_styled_components16 = __toESM(require("styled-components"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function WedgeIcon({
-  size: size3 = 16,
-  direction
-}) {
-  return (
-    // NOTE: directionToTransform depends on the value of viewBox
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 10 8", width: size3, height: size3, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(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 = import_styled_components16.default.polyline.withConfig({
-  componentId: "ccl__sc-617sjj-0"
-})(["fill:none;stroke-linejoin:round;stroke-linecap:round;stroke:currentColor;"]);
-
-// src/components/Pager/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function usePagerWindow(page, pageCount, pageRangeDisplayed = 7) {
-  if (process.env.NODE_ENV !== "production") {
-    (0, import_warning.default)((page | 0) === page, `\`page\` must be integer (${page})`);
-    (0, import_warning.default)((pageCount | 0) === pageCount, `\`pageCount\` must be integer (${pageCount})`);
-    (0, import_warning.default)((pageRangeDisplayed | 0) === pageRangeDisplayed, `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`);
-    (0, import_warning.default)(pageRangeDisplayed > 2, `\`windowSize\` must be greater than 2`);
-  }
-  const window2 = (0, import_react9.useMemo)(() => {
-    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]);
-  (0, import_react9.useDebugValue)(window2);
-  return window2;
-}
-var Pager_default = (0, import_react9.memo)(function Pager({
-  page,
-  pageCount,
-  pageRangeDisplayed,
-  onChange
-}) {
-  const window2 = usePagerWindow(page, pageCount, pageRangeDisplayed);
-  const makeClickHandler = (0, import_react9.useCallback)((value) => () => {
-    onChange(value);
-  }, [onChange]);
-  const hasNext = page < pageCount;
-  const hasPrev = page > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PagerContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", hidden: !hasPrev, disabled: !hasPrev, onClick: makeClickHandler(Math.max(1, page - 1)), noBackground: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WedgeIcon, { size: 16, direction: "left" /* Left */ }) }),
-    window2.map((p) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Spacer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text3, { children: p }) }, p)
-    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", onClick: makeClickHandler(p), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text3, { children: p }) }, p)),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", hidden: !hasNext, disabled: !hasNext, onClick: makeClickHandler(Math.min(pageCount, page + 1)), noBackground: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsxs)(PagerContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Link, { to: makeUrl(Math.max(1, page - 1)), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { hidden: !hasPrev, "aria-disabled": !hasPrev, noBackground: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WedgeIcon, { size: 16, direction: "left" /* Left */ }) }) }),
-    window2.map((p) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Spacer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DotsIcon, { size: 20, subLink: true }) }, p) : p === page ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text3, { children: p }) }, p) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Link, { to: makeUrl(p), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text3, { children: p }) }) }, p)),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Link, { to: makeUrl(Math.min(pageCount, page + 1)), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { hidden: !hasNext, "aria-disabled": !hasNext, noBackground: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WedgeIcon, { size: 16, direction: "right" /* Right */ }) }) })
-  ] });
-}
-var PagerContainer = import_styled_components17.default.nav.withConfig({
-  componentId: "ccl__sc-1bh6g9v-0"
-})(["display:flex;justify-content:center;align-items:center;"]);
-var CircleButton = import_styled_components17.default.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 && (0, import_styled_components17.css)(["&:hover{background:transparent;}"]));
-var Spacer = (0, import_styled_components17.default)(CircleButton).attrs({
-  type: "button",
-  disabled: true
-}).withConfig({
-  componentId: "ccl__sc-1bh6g9v-2"
-})(["&&{color:", ";background:none;}"], ({
-  theme: theme2
-}) => theme2.color.text3);
-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