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

package/dist/index.js

@@ -0,0 +1,1256 @@
+"use client";
+import * as React from "react";
+import { Children, isValidElement, memo, useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import styled, { createGlobalStyle, css, useTheme } from "styled-components";
+import { applyEffect, disabledSelector, maxWidth } from "@charcoal-ui/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createTheme } from "@charcoal-ui/styled";
+import { COLUMN_UNIT, GUTTER_UNIT, columnSystem } from "@charcoal-ui/foundation";
+import ReactDOM from "react-dom";
+import { animated, useSpring } from "react-spring";
+import warning from "warning";
+
+//#region src/_lib/ComponentAbstraction.tsx
+const DefaultLink = React.forwardRef(function DefaultLink$1({ to, children,...rest }, ref) {
+	return /* @__PURE__ */ jsx("a", {
+		href: to,
+		ref,
+		...rest,
+		children
+	});
+});
+const DefaultValue = { Link: DefaultLink };
+const ComponentAbstractionContext = React.createContext(DefaultValue);
+function ComponentAbstraction({ children, components }) {
+	return /* @__PURE__ */ jsx(ComponentAbstractionContext.Provider, {
+		value: {
+			...DefaultValue,
+			...components
+		},
+		children
+	});
+}
+function useComponentAbstraction() {
+	return useContext(ComponentAbstractionContext);
+}
+
+//#endregion
+//#region src/components/Filter/index.tsx
+const FilterButton = React.forwardRef(function FilterButton$1({ onClick, children, active = false, hover, reactive = false }, ref) {
+	return /* @__PURE__ */ jsx(ButtonLike, {
+		active,
+		reactive,
+		hover,
+		onClick: active && !reactive ? void 0 : onClick,
+		ref,
+		children
+	});
+});
+const FilterIconButton = React.forwardRef(function FilterIconButton$1({ onClick, children, active = false, hover, reactive = false, width, height }, ref) {
+	return /* @__PURE__ */ jsx(StyledButtonLike, {
+		active,
+		reactive,
+		hover,
+		onClick: active && !reactive ? void 0 : onClick,
+		ref,
+		buttonWidth: width,
+		buttonHeight: height,
+		children
+	});
+});
+const FilterLink = React.forwardRef(function FilterLink$1({ onClick, children, active = false, hover, reactive = false,...props }, ref) {
+	const { Link } = useComponentAbstraction();
+	if (active && !reactive) return /* @__PURE__ */ jsx(PlainElement, {
+		active: true,
+		hover,
+		ref,
+		children
+	});
+	else return /* @__PURE__ */ jsx(Link, {
+		...props,
+		onClick,
+		children: /* @__PURE__ */ jsx(PlainElement, {
+			active,
+			reactive,
+			hover,
+			ref,
+			children
+		})
+	});
+});
+const 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: theme$1 }) => theme$1.color.text3, ({ theme: theme$1 }) => theme$1.color.text2, ({ hover = false }) => hover && css(["color:", ";"], ({ theme: theme$1 }) => theme$1.color.text2), ({ active = false }) => active && css([
+	"background-color:",
+	";color:",
+	";"
+], ({ theme: theme$1 }) => theme$1.color.surface3, ({ theme: theme$1 }) => theme$1.color.text2), ({ active = false, reactive = false }) => active && !reactive && css(["cursor:default;"]), ({ theme: theme$1 }) => maxWidth(theme$1.breakpoint.screen1));
+const padding0Css = css(["padding:0;@media ", "{padding:0;}"], ({ theme: theme$1 }) => maxWidth(theme$1.breakpoint.screen1));
+const ButtonLike = styled.button.withConfig({ componentId: "ccl__sc-g0cfzt-0" })(["", ""], buttonCss);
+const PlainElement = styled.span.withConfig({ componentId: "ccl__sc-g0cfzt-1" })(["", ""], buttonCss);
+const 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;`);
+const Filter = styled.div.withConfig({ componentId: "ccl__sc-g0cfzt-3" })(["display:flex;"]);
+var Filter_default = Filter;
+
+//#endregion
+//#region src/styled.ts
+const theme = createTheme(styled);
+
+//#endregion
+//#region src/components/icons/Base.tsx
+function IconBase({ size: size$2 = 24, viewBoxSize, currentColor, path: path$1, transform, fillRule, clipRule }) {
+	return /* @__PURE__ */ jsx(Icon$2, {
+		viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+		size: size$2,
+		currentColor,
+		children: /* @__PURE__ */ jsx(IconBasePath, {
+			path: path$1,
+			transform,
+			fillRule,
+			clipRule
+		})
+	});
+}
+const Icon$2 = styled.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: theme$1 }) => currentColor ? "currentColor" : theme$1.color.text2, (props) => props.size, (props) => props.size);
+const IconBasePath = ({ path: path$1, transform, fillRule, clipRule }) => {
+	if (typeof path$1 === "string") return /* @__PURE__ */ jsx("path", {
+		d: path$1,
+		transform,
+		fillRule,
+		clipRule
+	});
+	else return /* @__PURE__ */ jsx(Fragment, { children: path$1 });
+};
+
+//#endregion
+//#region src/components/icons/InfoIcon.tsx
+const size$1 = 16;
+function InfoIcon() {
+	return /* @__PURE__ */ jsx(IconBase, {
+		viewBoxSize: size$1,
+		size: size$1,
+		currentColor: true,
+		path: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ 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__ */ 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" })] })
+	});
+}
+const Path = styled.path.withConfig({ componentId: "ccl__sc-1yb63qx-0" })(["fill:", ";fill-rule:evenodd;"], ({ theme: theme$1 }) => theme$1.color.surface1);
+
+//#endregion
+//#region src/components/HintText/index.tsx
+/**
+* @deprecated use HintText from @charcoal-ui/react
+*/
+function HintText({ children, context, className }) {
+	return /* @__PURE__ */ jsxs(Container$2, {
+		className,
+		...styledProps({
+			children,
+			context,
+			className
+		}),
+		children: [/* @__PURE__ */ jsx(IconWrap, { children: /* @__PURE__ */ jsx(InfoIcon, {}) }), /* @__PURE__ */ jsx(Text$2, { children })]
+	});
+}
+const Container$2 = styled.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 }) => maxWidth(t.breakpoint.screen1), (p) => theme((o) => [o.padding.vertical(p.screen1.vertical), o.padding.horizontal(p.screen1.horizontal)]), (p) => p.context === "page" && css(["justify-content:center;"]));
+const IconWrap = styled.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);
+const Text$2 = styled.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
+			}
+		};
+	}
+}
+
+//#endregion
+//#region src/foundation/constants.ts
+const MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72;
+const RESPONSIVE_LEFT_WIDTH = columnSystem(2, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT;
+const RESPONSIVE_MAIN_MAX_WIDTH = columnSystem(12, COLUMN_UNIT, GUTTER_UNIT);
+
+//#endregion
+//#region src/foundation/hooks.ts
+/**
+* 現在の画面幅がモバイル幅かどうかを返す
+*/
+function useMediaScreen1() {
+	return useMedia(maxWidth(useTheme().breakpoint.screen1));
+}
+/**
+* Returns a dynamically-updating media query result.
+*
+* When the media query's matching state changes, this hook's result
+* will update with sync priority.
+*
+* @param query A full media query (the string written between `@media` and the `{` in CSS)
+* @returns true if the query matches, false if it doesn't
+*/
+function useMedia(query) {
+	const matcher = useMemo(() => __TEST__ ? {
+		matches: false,
+		addListener: () => {},
+		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 [size$2, 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(() => {
+			setSize(measure(watch));
+		});
+		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(size$2);
+	return size$2;
+}
+/**
+* Debounce version of setState with `requestAnimationFrame`
+*
+* @param defaultValue Default value for `useState`
+*/
+function useDebounceAnimationState(defaultValue) {
+	const [state, setState] = useState(defaultValue);
+	const timer = useRef(void 0);
+	return [state, 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;
+		});
+	}, [])];
+}
+
+//#endregion
+//#region src/components/Layout/index.tsx
+const LayoutConfigContext = React.createContext({
+	wide: false,
+	center: false,
+	withLeft: false
+});
+function Layout({ menu, children, header, center = false, wide, isHeaderTopMenu = false }) {
+	const config = {
+		center,
+		wide: center ? true : wide ?? false,
+		withLeft: menu != null && !isHeaderTopMenu
+	};
+	return /* @__PURE__ */ jsxs(LayoutRoot, { children: [/* @__PURE__ */ jsxs(LayoutConfigContext.Provider, {
+		value: config,
+		children: [config.withLeft && /* @__PURE__ */ jsx(LeftArea, { children: menu }), /* @__PURE__ */ jsxs(MainArea, {
+			center,
+			children: [
+				header != null && /* @__PURE__ */ jsx(Header, { children: header }),
+				isHeaderTopMenu && /* @__PURE__ */ jsx(HeaderTopMenuContainer, { children: menu }),
+				/* @__PURE__ */ jsx(Grid, { children })
+			]
+		})]
+	}), /* @__PURE__ */ jsx(GlobalStyle, {})] });
+}
+const HeaderTopMenuContainer = styled.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: theme$1 }) => maxWidth(theme$1.breakpoint.screen1), ({ theme: theme$1 }) => theme$1.color.surface2);
+const GlobalStyle = createGlobalStyle([
+	":root{background-color:",
+	";@media ",
+	"{background-color:",
+	";}}"
+], ({ theme: theme$1 }) => theme$1.color.background2, ({ theme: theme$1 }) => maxWidth(theme$1.breakpoint.screen1), ({ theme: theme$1 }) => theme$1.color.background1);
+const LayoutRoot = styled.div.withConfig({ componentId: "ccl__sc-j6bt5m-1" })([
+	"display:flex;background-color:",
+	";@media ",
+	"{background-color:",
+	";}"
+], ({ theme: theme$1 }) => theme$1.color.background2, ({ theme: theme$1 }) => maxWidth(theme$1.breakpoint.screen1), ({ theme: theme$1 }) => theme$1.color.background1);
+const LeftArea = styled.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_UNIT, ({ theme: theme$1 }) => theme$1.breakpoint.screen3);
+const MainArea = styled.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 ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) : RESPONSIVE_MAIN_MAX_WIDTH, MAIN_COLUMN_HORIZONTAL_MIN_MARGIN, ({ theme: theme$1 }) => maxWidth(theme$1.breakpoint.screen1));
+const Header = styled.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: theme$1 }) => theme$1.color.text2, ({ theme: theme$1 }) => maxWidth(theme$1.breakpoint.screen1), ({ theme: theme$1 }) => theme$1.color.surface2);
+const Grid = styled.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_UNIT, ({ theme: theme$1 }) => maxWidth(theme$1.breakpoint.screen1), ({ theme: theme$1 }) => theme$1.color.background1);
+const LayoutItem = React.forwardRef(function LayoutItem$1({ span, children }, ref) {
+	const { withLeft } = useContext(LayoutConfigContext);
+	return /* @__PURE__ */ jsx(StyledLayoutItem, {
+		span,
+		withLeft,
+		ref,
+		children
+	});
+});
+const StyledLayoutItem = styled.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: theme$1 }) => theme$1.color.text2, ({ theme: theme$1 }) => theme$1.color.background1, (p) => p.withLeft ? p.theme.breakpoint.screen4 : p.theme.breakpoint.screen3, (p) => p.span > 2 && css(["grid-column-end:span 2;"]), ({ theme: theme$1 }) => maxWidth(theme$1.breakpoint.screen1), (p) => p.span > 1 && css(["grid-column-end:span 1;"]));
+function LayoutItemHeader({ children }) {
+	const { wide, center } = useContext(LayoutConfigContext);
+	return /* @__PURE__ */ jsx(StyledLayoutItemHeader, {
+		wide,
+		center,
+		children
+	});
+}
+const StyledLayoutItemHeader = styled.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: theme$1 }) => theme$1.color.surface2, ({ theme: theme$1 }) => theme$1.color.text2, (p) => p.center && css(["justify-content:center;"]), ({ theme: theme$1 }) => maxWidth(theme$1.breakpoint.screen1), (p) => p.wide && css(["height:48px;margin-top:0;"]));
+const LAYOUT_ITEM_BODY_PADDING = {
+	wide: {
+		x: 40,
+		y: 40
+	},
+	default: {
+		x: 24,
+		y: 24
+	},
+	column1: {
+		x: 16,
+		y: 16
+	},
+	narrow: {
+		x: 24,
+		yTop: 12,
+		yBottom: 20
+	},
+	narrowColumn1: {
+		x: 16,
+		yTop: 4,
+		yBottom: 0
+	}
+};
+function LayoutItemBody({ children, horizontal = false, narrow = false }) {
+	const { wide } = useContext(LayoutConfigContext);
+	return /* @__PURE__ */ jsx(StyledLayoutItemBody, {
+		wide,
+		horizontal,
+		narrow,
+		children
+	});
+}
+const StyledLayoutItemBody = styled.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: theme$1 }) => maxWidth(theme$1.breakpoint.screen1), (p) => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrowColumn1.x}px ${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yBottom}px` : `${LAYOUT_ITEM_BODY_PADDING.column1.y}px ${LAYOUT_ITEM_BODY_PADDING.column1.x}px 0`);
+function useLayoutItemBodyPadding() {
+	const { wide } = useContext(LayoutConfigContext);
+	return useMediaScreen1() ? LAYOUT_ITEM_BODY_PADDING.column1 : wide ? LAYOUT_ITEM_BODY_PADDING.wide : LAYOUT_ITEM_BODY_PADDING.default;
+}
+function CancelLayoutItemBodyPadding({ children, cancelTop }) {
+	const { wide } = useContext(LayoutConfigContext);
+	return /* @__PURE__ */ jsx(StyledCancelLayoutItemBodyPadding, {
+		wide,
+		cancelTop,
+		children
+	});
+}
+const StyledCancelLayoutItemBodyPadding = styled.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: theme$1 }) => maxWidth(theme$1.breakpoint.screen1), LAYOUT_ITEM_BODY_PADDING.column1.x, ({ cancelTop = false }) => !cancelTop ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x);
+
+//#endregion
+//#region src/components/TextEllipsis/helper.ts
+const hasChildren = (element) => isValidElement(element) && Boolean(element.props.children);
+const childToString = (child) => {
+	if (typeof child === "undefined" || child === null || typeof child === "boolean") return "";
+	if (JSON.stringify(child) === "{}") return "";
+	return child.toString();
+};
+const onlyText = (children) => {
+	if (!Array.isArray(children) && !isValidElement(children)) return childToString(children);
+	return Children.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);
+	}, "");
+};
+
+//#endregion
+//#region src/components/TextEllipsis/index.tsx
+/**
+* 複数行のテキストに表示行数制限を設けて`...`で省略する
+*/
+const TextEllipsis = styled.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 ? css(["text-overflow:ellipsis;white-space:nowrap;"]) : css([
+	"display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:",
+	";max-height:",
+	"px;"
+], lineLimit, lineHeight * lineLimit));
+
+//#endregion
+//#region src/components/MenuListItem/index.tsx
+const MenuListItemContext = React.createContext({ padding: 24 });
+function MenuListItem({ primary, secondary, onClick, disabled = false, noHover = false, gtmClass, children }) {
+	const { padding } = useContext(MenuListItemContext);
+	return /* @__PURE__ */ 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__ */ jsxs(Labels, { children: [/* @__PURE__ */ jsx(PrimaryText, { children: /* @__PURE__ */ jsx(TextEllipsis, {
+			lineHeight: 22,
+			lineLimit: 1,
+			children: primary
+		}) }), secondary !== void 0 && /* @__PURE__ */ jsx(SecondaryText, { children: /* @__PURE__ */ jsx(TextEllipsis, {
+			lineHeight: 22,
+			lineLimit: 1,
+			children: secondary
+		}) })] }), children]
+	});
+}
+const Item = styled.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 && css(["background-color:", ";"], ({ theme: theme$1 }) => theme$1.color.surface3), theme((o) => o.disabled), disabledSelector);
+const Labels = styled.div.withConfig({ componentId: "ccl__sc-1sufjh-1" })(["display:flex;flex-direction:column;"]);
+const PrimaryText = styled.div.withConfig({ componentId: "ccl__sc-1sufjh-2" })(["color:", ";line-height:22px;font-size:14px;display:grid;"], (p) => p.theme.color.text2);
+const SecondaryText = styled.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__ */ jsx("span", {
+		onClick,
+		children: /* @__PURE__ */ jsx(MenuListItem, { ...props })
+	}) : /* @__PURE__ */ jsx(A, {
+		as: Link,
+		to: link,
+		onClick,
+		...linkProps,
+		children: /* @__PURE__ */ jsx(MenuListItem, {
+			onClick: () => void 0,
+			...props
+		})
+	});
+}
+const A = styled.a.withConfig({ componentId: "ccl__sc-1sufjh-4" })(["display:block;"]);
+function MenuListLinkItemWithIcon({ icon, primary: text,...props }) {
+	return /* @__PURE__ */ jsx(MenuListLinkItem, {
+		primary: /* @__PURE__ */ jsxs(IconContainer, { children: [/* @__PURE__ */ jsx(Icon$1, { children: icon }), text] }),
+		...props
+	});
+}
+function MenuListItemWithIcon({ icon, primary: text,...props }) {
+	return /* @__PURE__ */ jsx(MenuListItem, {
+		primary: /* @__PURE__ */ jsxs(IconContainer, { children: [/* @__PURE__ */ jsx(Icon$1, { children: icon }), text] }),
+		...props
+	});
+}
+const IconContainer = styled.div.withConfig({ componentId: "ccl__sc-1sufjh-5" })(["display:grid;gap:8px;grid-auto-flow:column;align-items:center;"]);
+const Icon$1 = styled.div.withConfig({ componentId: "ccl__sc-1sufjh-6" })(["color:", ";display:flex;"], ({ theme: theme$1 }) => theme$1.color.text3);
+const MenuListSpacer = styled.div.withConfig({ componentId: "ccl__sc-1sufjh-7" })(["height:24px;"]);
+const MenuListLabel = styled.div.withConfig({ componentId: "ccl__sc-1sufjh-8" })(["padding:0 16px;font-size:12px;line-height:16px;color:", ";margin-top:-2px;margin-bottom:6px;"], ({ theme: theme$1 }) => theme$1.color.text3);
+
+//#endregion
+//#region src/components/LeftMenu/index.tsx
+function LeftMenu({ links, active }) {
+	const { Link } = useComponentAbstraction();
+	return /* @__PURE__ */ jsx(Container$1, { children: links.map((link, index) => /* @__PURE__ */ jsx(Link, {
+		to: link.to,
+		children: /* @__PURE__ */ jsx(LinkItem, {
+			"aria-current": link.id === active || void 0,
+			children: link.text
+		})
+	}, index)) });
+}
+function LeftMenuContent({ links }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: links.map((link, index) => /* @__PURE__ */ jsx(MenuListLinkItem, {
+		link: link.to,
+		primary: link.text
+	}, index)) });
+}
+const Container$1 = styled.div.withConfig({ componentId: "ccl__sc-t7vwxn-0" })(["display:flex;flex-direction:column;align-items:flex-start;"]);
+const LinkItem = styled.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: theme$1 }) => theme$1.color.text3, ({ theme: theme$1 }) => theme$1.color.text2, ({ theme: theme$1 }) => theme$1.color.text2, ({ theme: theme$1 }) => theme$1.color.surface3);
+
+//#endregion
+//#region src/components/SwitchCheckbox/index.tsx
+var SwitchCheckbox_default = React.forwardRef(function SwitchCheckbox({ gtmClass, flex = false, rowReverse = false, children, disabled,...props }, ref) {
+	return /* @__PURE__ */ jsxs(Label, {
+		className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "",
+		flex,
+		rowReverse,
+		"aria-disabled": disabled,
+		children: [/* @__PURE__ */ jsxs(SwitchOuter, { children: [/* @__PURE__ */ jsx(SwitchInput, {
+			...props,
+			disabled,
+			ref
+		}), /* @__PURE__ */ jsx(SwitchInner, { children: /* @__PURE__ */ jsx(SwitchInnerKnob, {}) })] }), children != null && /* @__PURE__ */ jsx(Children$1, {
+			rowReverse,
+			children
+		})]
+	});
+});
+const Children$1 = styled.span.withConfig({ componentId: "ccl__sc-vg0z5k-0" })(["", ""], (p) => p.rowReverse ? css(["margin-right:8px;"]) : css(["margin-left:8px;"]));
+const Label = styled.label.withConfig({ componentId: "ccl__sc-vg0z5k-1" })([
+	"display:inline-flex;align-items:center;",
+	" ",
+	" cursor:pointer;outline:0;&[aria-disabled='true']{cursor:auto;}"
+], ({ flex }) => flex && css(["display:flex;justify-content:space-between;"]), ({ rowReverse }) => css(["flex-direction:", ";"], rowReverse ? "row-reverse" : "row"));
+const SwitchOuter = styled.span.withConfig({ componentId: "ccl__sc-vg0z5k-2" })(["display:inline-flex;position:relative;z-index:0;"]);
+const SwitchInner = styled.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: theme$1 }) => theme$1.color.text4);
+const SwitchInnerKnob = styled.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: theme$1 }) => theme$1.color.text5);
+const SwitchInput = styled.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: theme$1 }) => theme$1.color.brand, SwitchInnerKnob, SwitchInner, ({ theme: theme$1 }) => theme$1.elementEffect.disabled.opacity, SwitchInner, ({ theme: theme$1 }) => applyEffect(theme$1.color.brand, theme$1.elementEffect.disabled));
+
+//#endregion
+//#region src/components/WithIcon/index.tsx
+var WithIcon_default = React.memo(function WithIcon({ children, icon, show = true, prefix: pre = false, width, fit = false, fixed = false }) {
+	const node = fit ? width === void 0 ? /* @__PURE__ */ jsx(AutoWidthIconAnchor, {
+		show,
+		pre,
+		children: icon
+	}) : /* @__PURE__ */ jsx(IconAnchor, {
+		width,
+		show,
+		pre,
+		children: /* @__PURE__ */ jsx(Icon, { children: icon })
+	}) : /* @__PURE__ */ jsx(IconAnchorNaive, {
+		show,
+		pre,
+		children: /* @__PURE__ */ jsx(IconNaive, { children: icon })
+	});
+	return /* @__PURE__ */ jsxs(Root, { children: [
+		pre && node,
+		/* @__PURE__ */ jsx(Text$1, {
+			fixed,
+			children
+		}),
+		!pre && node
+	] });
+});
+const Root = styled.div.withConfig({ componentId: "ccl__sc-12w6fz6-0" })(["display:flex;align-items:center;"]);
+const Text$1 = styled.div.withConfig({ componentId: "ccl__sc-12w6fz6-1" })(["", " white-space:nowrap;text-overflow:ellipsis;"], (p) => !p.fixed && css(["min-width:0;overflow:hidden;"]));
+function AutoWidthIconAnchor({ children, show, pre }) {
+	const ref = useRef(null);
+	return /* @__PURE__ */ jsx(IconAnchor, {
+		width: useElementSize(ref, [null])?.width ?? 0,
+		show,
+		pre,
+		children: /* @__PURE__ */ jsx(Icon, {
+			ref,
+			children
+		})
+	});
+}
+const forceCenteringCss = css(["> svg{display:block;}"]);
+const iconAnchorCss = css([
+	"",
+	";",
+	""
+], (p) => p.show === "collapse" ? css(["display:none;"]) : css(["visibility:", ";"], p.show ? "visible" : "hidden"), (p) => p.pre ? css(["margin-right:4px;"]) : css(["margin-left:4px;"]));
+const IconAnchorNaive = styled.div.withConfig({ componentId: "ccl__sc-12w6fz6-2" })(["display:flex;align-items:center;", ""], iconAnchorCss);
+const IconNaive = styled.div.withConfig({ componentId: "ccl__sc-12w6fz6-3" })(["display:inline-flex;", ""], forceCenteringCss);
+const IconAnchor = styled.div.withConfig({ componentId: "ccl__sc-12w6fz6-4" })([
+	"display:flex;position:relative;height:0;width:",
+	"px;",
+	""
+], (p) => p.width, iconAnchorCss);
+const Icon = styled.div.withConfig({ componentId: "ccl__sc-12w6fz6-5" })(["display:inline-flex;position:absolute;transform:translateY(-50%);", ""], forceCenteringCss);
+
+//#endregion
+//#region 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() {}
+}
+const isEdge = () => navigator.userAgent.includes("Edge/");
+
+//#endregion
+//#region src/hooks/index.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+//#endregion
+//#region src/foundation/utils.ts
+function unreachable(value) {
+	throw new Error(arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`);
+}
+
+//#endregion
+//#region src/components/icons/NextIcon.tsx
+let WedgeDirection$1 = /* @__PURE__ */ function(WedgeDirection$2) {
+	WedgeDirection$2["Up"] = "up";
+	WedgeDirection$2["Down"] = "down";
+	WedgeDirection$2["Left"] = "left";
+	WedgeDirection$2["Right"] = "right";
+	return WedgeDirection$2;
+}({});
+const path = `M8.08579 16.5858C7.30474 17.3668 7.30474 18.6332 8.08579 19.4142C8.86684 20.1953 10.1332 20.1953 10.9142 19.4142L18.3284 12L10.9142 4.58579C10.1332 3.80474 8.86684 3.80474 8.08579 4.58579C7.30474 5.36684 7.30474 6.63317 8.08579 7.41421L12.6716 12L8.08579 16.5858Z`;
+const size = 24;
+function NextIcon({ direction }) {
+	return /* @__PURE__ */ jsx(IconBase, {
+		viewBoxSize: size,
+		size,
+		currentColor: true,
+		path,
+		transform: directionToTransform$1(direction)
+	});
+}
+function directionToTransform$1(direction) {
+	switch (direction) {
+		case WedgeDirection$1.Up: return "rotate(270 12 12)";
+		case WedgeDirection$1.Down: return "rotate(90 12 12)";
+		case WedgeDirection$1.Left: return "rotate(180 12 12)";
+		case WedgeDirection$1.Right: return;
+		default: return unreachable(direction);
+	}
+}
+
+//#endregion
+//#region src/components/CarouselButton/index.tsx
+let Direction = /* @__PURE__ */ function(Direction$1) {
+	Direction$1["Right"] = "right";
+	Direction$1["Left"] = "left";
+	return Direction$1;
+}({});
+function CarouselButton({ direction, show, offset = 0, padding = 0, bottomOffset: bottom = 0, gradient = false, onClick }) {
+	const offsetStyle = direction === Direction.Left ? {
+		left: gradient ? offset - 72 : offset,
+		paddingLeft: Math.max(padding, 0),
+		paddingBottom: bottom
+	} : {
+		right: gradient ? offset - 72 : offset,
+		paddingRight: Math.max(padding, 0),
+		paddingBottom: bottom
+	};
+	return /* @__PURE__ */ jsx(_StyledButton, {
+		type: "button",
+		onClick,
+		hide: !show,
+		style: offsetStyle,
+		children: /* @__PURE__ */ jsx(CarouselButtonIcon, { children: /* @__PURE__ */ jsx(NextIcon, { direction: direction === Direction.Right ? WedgeDirection$1.Right : direction === Direction.Left ? WedgeDirection$1.Left : unreachable() }) })
+	});
+}
+const CAROUSEL_BUTTON_SIZE = 40;
+const CarouselButtonIcon = styled.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: theme$1 }) => theme$1.color.surface4};
+  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;
+  color: ${({ theme: theme$1 }) => theme$1.color.text5};
+`;
+var _StyledButton = styled(styled.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: theme$1 }) => applyEffect(theme$1.color.surface4, theme$1.effect.hover)};
+    color: ${({ theme: theme$1 }) => applyEffect(theme$1.color.text5, theme$1.effect.hover)};
+  }
+
+  &:active ${CarouselButtonIcon} {
+    background-color: ${({ theme: theme$1 }) => applyEffect(theme$1.color.surface4, theme$1.effect.press)};
+    color: ${({ theme: theme$1 }) => applyEffect(theme$1.color.text5, theme$1.effect.press)};
+  }
+
+  ${(p) => p.hide && css(["visibility:hidden;opacity:0;pointer-events:none;"])}
+`).withConfig({ componentId: "ccl__sc-gjlnt0-0" })(["", ""], onlyNonTouchDevice);
+const ScrollHintIcon = styled(CarouselButtonIcon)`
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme: theme$1 }) => applyEffect(theme$1.color.surface4, theme$1.effect.hover)};
+    color: ${({ theme: theme$1 }) => applyEffect(theme$1.color.text5, theme$1.effect.hover)};
+  }
+
+  &:active {
+    background-color: ${({ theme: theme$1 }) => applyEffect(theme$1.color.surface4, theme$1.effect.press)};
+    color: ${({ theme: theme$1 }) => applyEffect(theme$1.color.text5, theme$1.effect.press)};
+  }
+`;
+const onlyNonTouchDevice = css(["@media (hover:none) and (pointer:coarse){display:none;}"]);
+
+//#endregion
+//#region src/components/Carousel/index.tsx
+const GRADIENT_WIDTH = 72;
+/**
+* カルーセル系のスクロール量の定数
+*
+* @example
+* const scrollAmount = containerElm.clientWidth * SCROLL_AMOUNT_COEF
+*/
+const SCROLL_AMOUNT_COEF = .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 = useRef(false);
+	const [maxScrollLeft, setMaxScrollLeft] = useState(0);
+	const [leftShow, setLeftShow] = useState(false);
+	const [rightShow, setRightShow] = useState(false);
+	const [styles, set] = useSpring(() => ({ scroll: 0 }));
+	const ref = useRef(null);
+	const visibleAreaRef = useRef(null);
+	const innerRef = useRef(null);
+	const handleRight = useCallback(() => {
+		if (visibleAreaRef.current === null) return;
+		const { clientWidth } = visibleAreaRef.current;
+		const scroll = Math.min(scrollLeft + clientWidth * scrollAmountCoef, maxScrollLeft);
+		setScrollLeft(scroll, true);
+		set({
+			scroll,
+			from: { scroll: scrollLeft },
+			reset: !animation.current
+		});
+		animation.current = true;
+	}, [
+		animation,
+		maxScrollLeft,
+		scrollLeft,
+		set,
+		scrollAmountCoef,
+		setScrollLeft
+	]);
+	const handleLeft = useCallback(() => {
+		if (visibleAreaRef.current === null) return;
+		const { clientWidth } = visibleAreaRef.current;
+		const scroll = Math.max(scrollLeft - clientWidth * scrollAmountCoef, 0);
+		setScrollLeft(scroll, true);
+		set({
+			scroll,
+			from: { scroll: scrollLeft },
+			reset: !animation.current
+		});
+		animation.current = true;
+	}, [
+		animation,
+		scrollLeft,
+		set,
+		scrollAmountCoef,
+		setScrollLeft
+	]);
+	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 = 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 = useCallback(() => {
+		if (ref.current === null) return;
+		const { clientWidth, scrollWidth } = ref.current;
+		setMaxScrollLeft(scrollWidth - clientWidth);
+		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 = useCallback(() => {
+		if (ref.current === null) return;
+		if (onScroll) onScroll(ref.current.scrollLeft);
+	}, [onScroll]);
+	const [disableGradient, setDisableGradient] = useState(false);
+	useIsomorphicLayoutEffect(() => {
+		if (isEdge()) setDisableGradient(true);
+	}, []);
+	if (!disableGradient && options.hasGradient === true) {
+		const fadeInGradient = options.fadeInGradient ?? false;
+		const overflowGradient = !fadeInGradient;
+		return /* @__PURE__ */ jsxs(Container, {
+			ref: visibleAreaRef,
+			children: [/* @__PURE__ */ jsx(GradientContainer, {
+				fadeInGradient,
+				children: /* @__PURE__ */ jsx(RightGradient, { children: /* @__PURE__ */ jsx(LeftGradient, {
+					show: overflowGradient || scrollLeft > 0,
+					children: /* @__PURE__ */ jsx(ScrollArea, {
+						ref,
+						scrollLeft: styles.scroll,
+						onScroll: handleScrollMove,
+						children: /* @__PURE__ */ jsx(CarouselContainer, {
+							ref: innerRef,
+							centerItems,
+							children
+						})
+					})
+				}) })
+			}), /* @__PURE__ */ jsxs(ButtonsContainer, { children: [/* @__PURE__ */ jsx(CarouselButton, {
+				direction: Direction.Left,
+				show: leftShow,
+				offset: buttonOffset,
+				bottomOffset,
+				padding: buttonPadding,
+				gradient: overflowGradient,
+				onClick: handleLeft
+			}), /* @__PURE__ */ jsx(CarouselButton, {
+				direction: Direction.Right,
+				show: rightShow,
+				offset: buttonOffset,
+				bottomOffset,
+				padding: buttonPadding,
+				gradient: true,
+				onClick: handleRight
+			})] })]
+		});
+	}
+	return /* @__PURE__ */ jsxs(Container, {
+		ref: visibleAreaRef,
+		children: [/* @__PURE__ */ jsx(ScrollArea, {
+			ref,
+			scrollLeft: styles.scroll,
+			onScroll: handleScrollMove,
+			children: /* @__PURE__ */ jsx(CarouselContainer, {
+				ref: innerRef,
+				centerItems,
+				children
+			})
+		}), /* @__PURE__ */ jsxs(ButtonsContainer, { children: [/* @__PURE__ */ jsx(CarouselButton, {
+			direction: Direction.Left,
+			show: leftShow,
+			offset: buttonOffset,
+			bottomOffset,
+			padding: buttonPadding,
+			onClick: handleLeft
+		}), /* @__PURE__ */ jsx(CarouselButton, {
+			direction: Direction.Right,
+			show: rightShow,
+			offset: buttonOffset,
+			bottomOffset,
+			padding: buttonPadding,
+			onClick: handleRight
+		})] })]
+	});
+}
+const CarouselContainer = styled.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 ? css(["display:flex;width:max-content;margin:0 auto;"]) : css(["display:inline-flex;margin:0;"]));
+const ButtonsContainer = styled.div.withConfig({ componentId: "ccl__sc-1qkjnfo-1" })(["opacity:0;transition:0.4s opacity;"]);
+const Container = styled.div.withConfig({ componentId: "ccl__sc-1qkjnfo-2" })(["&:hover ", "{opacity:1;}position:relative;z-index:0;"], ButtonsContainer);
+const ScrollArea = styled(animated.div).withConfig({ componentId: "ccl__sc-1qkjnfo-3" })(["overflow-x:auto;padding:0;margin:0;&::-webkit-scrollbar{display:none;}scrollbar-width:none;"]);
+const GradientContainer = styled.div.withConfig({ componentId: "ccl__sc-1qkjnfo-4" })([
+	"overflow:hidden;",
+	" margin-right:",
+	"px;",
+	"{padding-right:",
+	"px;}"
+], (p) => !p.fadeInGradient && css([
+	"margin-left:",
+	"px;",
+	"{padding-left:",
+	"px;}"
+], -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
+const RightGradient = styled.div.withConfig({ componentId: "ccl__sc-1qkjnfo-5" })(["mask-image:linear-gradient( to right,#000 calc(100% - ", "px),transparent );"], GRADIENT_WIDTH);
+const LeftGradient = styled.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);
+
+//#endregion
+//#region src/components/icons/DotsIcon.tsx
+function DotsIcon({ size: size$2 = 16 }) {
+	return /* @__PURE__ */ jsx(StyledSVG, {
+		viewBox: "0 0 20 6",
+		width: size$2,
+		height: size$2,
+		children: /* @__PURE__ */ 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)"
+		})
+	});
+}
+const StyledSVG = styled.svg.withConfig({ componentId: "ccl__sc-1ma336a-0" })(["fill:currentColor;"]);
+
+//#endregion
+//#region src/components/icons/WedgeIcon.tsx
+let WedgeDirection = /* @__PURE__ */ function(WedgeDirection$2) {
+	WedgeDirection$2["Up"] = "up";
+	WedgeDirection$2["Down"] = "down";
+	WedgeDirection$2["Left"] = "left";
+	WedgeDirection$2["Right"] = "right";
+	return WedgeDirection$2;
+}({});
+function WedgeIcon({ size: size$2 = 16, direction }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 10 8",
+		width: size$2,
+		height: size$2,
+		children: /* @__PURE__ */ jsx(StyledPolyline, {
+			strokeWidth: "2",
+			points: "1,2 5,6 9,2",
+			transform: directionToTransform(direction)
+		})
+	});
+}
+function directionToTransform(direction) {
+	switch (direction) {
+		case WedgeDirection.Up: return "rotate(180 5 4)";
+		case WedgeDirection.Down: return;
+		case WedgeDirection.Left: return "rotate(90 5 4)";
+		case WedgeDirection.Right: return "rotate(-90 5 4)";
+		default: return unreachable(direction);
+	}
+}
+const StyledPolyline = styled.polyline.withConfig({ componentId: "ccl__sc-617sjj-0" })(["fill:none;stroke-linejoin:round;stroke-linecap:round;stroke:currentColor;"]);
+
+//#endregion
+//#region src/components/Pager/index.tsx
+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 window$1 = 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 [
+				visibleFirstPage,
+				"...",
+				...Array.from({ length: 1 + visibleLastPage - start }, (_, i) => start + i)
+			];
+		}
+	}, [
+		page,
+		pageCount,
+		pageRangeDisplayed
+	]);
+	useDebugValue(window$1);
+	return window$1;
+}
+var Pager_default = memo(function Pager({ page, pageCount, pageRangeDisplayed, onChange }) {
+	const window$1 = usePagerWindow(page, pageCount, pageRangeDisplayed);
+	const makeClickHandler = useCallback((value) => () => {
+		onChange(value);
+	}, [onChange]);
+	const hasNext = page < pageCount;
+	const hasPrev = page > 1;
+	return /* @__PURE__ */ jsxs(PagerContainer, { children: [
+		/* @__PURE__ */ jsx(CircleButton, {
+			type: "button",
+			hidden: !hasPrev,
+			disabled: !hasPrev,
+			onClick: makeClickHandler(Math.max(1, page - 1)),
+			noBackground: true,
+			children: /* @__PURE__ */ jsx(WedgeIcon, {
+				size: 16,
+				direction: WedgeDirection.Left
+			})
+		}),
+		window$1.map((p) => p === "..." ? /* @__PURE__ */ jsx(Spacer, { children: /* @__PURE__ */ jsx(DotsIcon, { size: 20 }) }, p) : p === page ? /* @__PURE__ */ jsx(CircleButton, {
+			type: "button",
+			"aria-current": true,
+			children: /* @__PURE__ */ jsx(Text, { children: p })
+		}, p) : /* @__PURE__ */ jsx(CircleButton, {
+			type: "button",
+			onClick: makeClickHandler(p),
+			children: /* @__PURE__ */ jsx(Text, { children: p })
+		}, p)),
+		/* @__PURE__ */ jsx(CircleButton, {
+			type: "button",
+			hidden: !hasNext,
+			disabled: !hasNext,
+			onClick: makeClickHandler(Math.min(pageCount, page + 1)),
+			noBackground: true,
+			children: /* @__PURE__ */ jsx(WedgeIcon, {
+				size: 16,
+				direction: WedgeDirection.Right
+			})
+		})
+	] });
+});
+function LinkPager({ page, pageCount, pageRangeDisplayed, makeUrl }) {
+	const { Link } = useComponentAbstraction();
+	const window$1 = usePagerWindow(page, pageCount, pageRangeDisplayed);
+	const hasNext = page < pageCount;
+	const hasPrev = page > 1;
+	return /* @__PURE__ */ jsxs(PagerContainer, { children: [
+		/* @__PURE__ */ jsx(Link, {
+			to: makeUrl(Math.max(1, page - 1)),
+			children: /* @__PURE__ */ jsx(CircleButton, {
+				hidden: !hasPrev,
+				"aria-disabled": !hasPrev,
+				noBackground: true,
+				children: /* @__PURE__ */ jsx(WedgeIcon, {
+					size: 16,
+					direction: WedgeDirection.Left
+				})
+			})
+		}),
+		window$1.map((p) => p === "..." ? /* @__PURE__ */ jsx(Spacer, { children: /* @__PURE__ */ jsx(DotsIcon, {
+			size: 20,
+			subLink: true
+		}) }, p) : p === page ? /* @__PURE__ */ jsx(CircleButton, {
+			type: "button",
+			"aria-current": true,
+			children: /* @__PURE__ */ jsx(Text, { children: p })
+		}, p) : /* @__PURE__ */ jsx(Link, {
+			to: makeUrl(p),
+			children: /* @__PURE__ */ jsx(CircleButton, {
+				type: "button",
+				children: /* @__PURE__ */ jsx(Text, { children: p })
+			})
+		}, p)),
+		/* @__PURE__ */ jsx(Link, {
+			to: makeUrl(Math.min(pageCount, page + 1)),
+			children: /* @__PURE__ */ jsx(CircleButton, {
+				hidden: !hasNext,
+				"aria-disabled": !hasNext,
+				noBackground: true,
+				children: /* @__PURE__ */ jsx(WedgeIcon, {
+					size: 16,
+					direction: WedgeDirection.Right
+				})
+			})
+		})
+	] });
+}
+const PagerContainer = styled.nav.withConfig({ componentId: "ccl__sc-1bh6g9v-0" })(["display:flex;justify-content:center;align-items:center;"]);
+const CircleButton = styled.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: theme$1 }) => theme$1.color.text3, ({ theme: theme$1 }) => theme$1.color.surface3, ({ theme: theme$1 }) => theme$1.color.text2, ({ theme: theme$1 }) => theme$1.color.surface6, ({ theme: theme$1 }) => theme$1.color.text5, ({ theme: theme$1 }) => theme$1.color.surface6, ({ theme: theme$1 }) => theme$1.color.text5, ({ noBackground = false }) => noBackground && css(["&:hover{background:transparent;}"]));
+const Spacer = styled(CircleButton).attrs({
+	type: "button",
+	disabled: true
+}).withConfig({ componentId: "ccl__sc-1bh6g9v-2" })(["&&{color:", ";background:none;}"], ({ theme: theme$1 }) => theme$1.color.text3);
+const Text = "span";
+
+//#endregion
+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.js.map