@charcoal-ui/react-sandbox 5.0.0-beta.6 → 5.0.0-rc.0

package/dist/index.cjs

@@ -1,130 +1,4 @@
-"use client";
-//#region rolldown:runtime
-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 = (all) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	return target;
-};
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-let react = require("react");
-react = __toESM(react);
-let styled_components = require("styled-components");
-styled_components = __toESM(styled_components);
-let __charcoal_ui_utils = require("@charcoal-ui/utils");
-__charcoal_ui_utils = __toESM(__charcoal_ui_utils);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = __toESM(react_jsx_runtime);
-let __charcoal_ui_styled = require("@charcoal-ui/styled");
-__charcoal_ui_styled = __toESM(__charcoal_ui_styled);
-let __charcoal_ui_foundation = require("@charcoal-ui/foundation");
-__charcoal_ui_foundation = __toESM(__charcoal_ui_foundation);
-let react_dom = require("react-dom");
-react_dom = __toESM(react_dom);
-let react_spring = require("react-spring");
-react_spring = __toESM(react_spring);
-let warning = require("warning");
-warning = __toESM(warning);
-
-//#region src/styledExportFix.ts
-var styledExportFix_exports = /* @__PURE__ */ __export({ default: () => defaultStyled });
-__reExport(styledExportFix_exports, require("styled-components"));
-const defaultStyled = typeof styled_components.default === "function" ? styled_components.default : styled_components.default.default;
-
-//#endregion
-//#region src/_lib/ComponentAbstraction.tsx
-const DefaultLink = react.forwardRef(function DefaultLink$1({ to, children,...rest }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		href: to,
-		ref,
-		...rest,
-		children
-	});
-});
-const DefaultValue = { Link: DefaultLink };
-const ComponentAbstractionContext = react.createContext(DefaultValue);
-function ComponentAbstraction({ children, components }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentAbstractionContext.Provider, {
-		value: {
-			...DefaultValue,
-			...components
-		},
-		children
-	});
-}
-function useComponentAbstraction() {
-	return (0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(PlainElement, {
-		active: true,
-		hover,
-		ref,
-		children
-	});
-	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link, {
-		...props,
-		onClick,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlainElement, {
-			active,
-			reactive,
-			hover,
-			ref,
-			children
-		})
-	});
-});
-const buttonCss = styledExportFix_exports.css`
+"use client";var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=e=>{let n={};for(var r in e)t(n,r,{get:e[r],enumerable:!0});return n},s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(e,t,n)=>(s(e,t,`default`),n&&s(n,t,`default`)),l=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let u=require(`react`);u=l(u);let d=require(`styled-components`);d=l(d);let f=require(`@charcoal-ui/utils`);f=l(f);let p=require(`react/jsx-runtime`);p=l(p);let m=require(`@charcoal-ui/styled`);m=l(m);let h=require(`@charcoal-ui/foundation`);h=l(h);let g=require(`react-dom`);g=l(g);let _=require(`react-spring`);_=l(_);let v=require(`warning`);v=l(v);var y=o({default:()=>b});c(y,require(`styled-components`));const b=typeof d.default==`function`?d.default:d.default.default,ee=u.forwardRef(function({to:e,children:t,...n},r){return(0,p.jsx)(`a`,{href:e,ref:r,...n,children:t})}),x={Link:ee},S=u.createContext(x);function C({children:e,components:t}){return(0,p.jsx)(S.Provider,{value:{...x,...t},children:e})}function w(){return(0,u.useContext)(S)}const T=u.forwardRef(function({onClick:e,children:t,active:n=!1,hover:r,reactive:i=!1},a){return(0,p.jsx)(A,{active:n,reactive:i,hover:r,onClick:n&&!i?void 0:e,ref:a,children:t})}),E=u.forwardRef(function({onClick:e,children:t,active:n=!1,hover:r,reactive:i=!1,width:a,height:o},s){return(0,p.jsx)(M,{active:n,reactive:i,hover:r,onClick:n&&!i?void 0:e,ref:s,buttonWidth:a,buttonHeight:o,children:t})}),D=u.forwardRef(function({onClick:e,children:t,active:n=!1,hover:r,reactive:i=!1,...a},o){let{Link:s}=w();return n&&!i?(0,p.jsx)(j,{active:!0,hover:r,ref:o,children:t}):(0,p.jsx)(s,{...a,onClick:e,children:(0,p.jsx)(j,{active:n,reactive:i,hover:r,ref:o,children:t})})}),O=y.css`
   display: block;
   outline: none;
   border: none;
@@ -134,614 +8,263 @@ const buttonCss = styledExportFix_exports.css`
   font-weight: bold;
   border-radius: /* absurd radius, but ensures rounded corners */ 2000px;
   transition: color 0.2s;
-  color: ${({ theme: theme$1 }) => theme$1.color.text3};
+  color: ${({theme:e})=>e.color.text3};
   cursor: pointer;
   user-select: none;
   background-color: transparent;
 
   &:hover {
-    color: ${({ theme: theme$1 }) => theme$1.color.text2};
+    color: ${({theme:e})=>e.color.text2};
   }
 
-  ${({ hover = false }) => hover && styledExportFix_exports.css`
-      color: ${({ theme: theme$1 }) => theme$1.color.text2};
+  ${({hover:e=!1})=>e&&y.css`
+      color: ${({theme:e})=>e.color.text2};
     `}
 
-  ${({ active = false }) => active && styledExportFix_exports.css`
-      background-color: ${({ theme: theme$1 }) => theme$1.color.surface3};
-      color: ${({ theme: theme$1 }) => theme$1.color.text2};
+  ${({active:e=!1})=>e&&y.css`
+      background-color: ${({theme:e})=>e.color.surface3};
+      color: ${({theme:e})=>e.color.text2};
     `}
 
-  ${({ active = false, reactive = false }) => active && !reactive && styledExportFix_exports.css`
+  ${({active:e=!1,reactive:t=!1})=>e&&!t&&y.css`
       cursor: default;
     `}
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     padding: 5px 16px;
   }
-`;
-const padding0Css = styledExportFix_exports.css`
+`,k=y.css`
   padding: 0;
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     padding: 0;
   }
-`;
-const ButtonLike = defaultStyled.button`
-  ${buttonCss}
-`;
-const PlainElement = defaultStyled.span`
-  ${buttonCss}
-`;
-const StyledButtonLike = defaultStyled(ButtonLike)`
-  ${padding0Css};
-  ${(p) => p.buttonWidth !== void 0 && `width: ${p.buttonWidth}px;`}
-  ${(p) => p.buttonHeight !== void 0 && `height: ${p.buttonHeight}px;`}
-`;
-const Filter = defaultStyled.div`
+`,A=b.button`
+  ${O}
+`,j=b.span`
+  ${O}
+`,M=b(A)`
+  ${k};
+  ${e=>e.buttonWidth!==void 0&&`width: ${e.buttonWidth}px;`}
+  ${e=>e.buttonHeight!==void 0&&`height: ${e.buttonHeight}px;`}
+`,te=b.div`
   display: flex;
-`;
-var Filter_default = Filter;
-
-//#endregion
-//#region src/styled.ts
-const theme = (0, __charcoal_ui_styled.createTheme)(defaultStyled);
-
-//#endregion
-//#region src/components/icons/Base.tsx
-function IconBase({ size: size$2 = 24, viewBoxSize, currentColor, path: path$1, transform, fillRule, clipRule }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$2, {
-		viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
-		size: size$2,
-		currentColor,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconBasePath, {
-			path: path$1,
-			transform,
-			fillRule,
-			clipRule
-		})
-	});
-}
-const Icon$2 = defaultStyled.svg`
+`;var ne=te;const N=(0,m.createTheme)(b);function re({size:e=24,viewBoxSize:t,currentColor:n,path:r,transform:i,fillRule:a,clipRule:o}){return(0,p.jsx)(ie,{viewBox:`0 0 ${t} ${t}`,size:e,currentColor:n,children:(0,p.jsx)(ae,{path:r,transform:i,fillRule:a,clipRule:o})})}const ie=b.svg`
   stroke: none;
-  fill: ${({ currentColor = false, theme: theme$1 }) => currentColor ? "currentColor" : theme$1.color.text2};
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  fill: ${({currentColor:e=!1,theme:t})=>e?`currentColor`:t.color.text2};
+  width: ${e=>e.size}px;
+  height: ${e=>e.size}px;
   line-height: 0;
   font-size: 0;
   vertical-align: middle;
-`;
-const IconBasePath = ({ path: path$1, transform, fillRule, clipRule }) => {
-	if (typeof path$1 === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-		d: path$1,
-		transform,
-		fillRule,
-		clipRule
-	});
-	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: path$1 });
-};
-
-//#endregion
-//#region src/components/icons/InfoIcon.tsx
-const size$1 = 16;
-function InfoIcon() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconBase, {
-		viewBoxSize: size$1,
-		size: size$1,
-		currentColor: true,
-		path: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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, react_jsx_runtime.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 = defaultStyled.path`
-  fill: ${({ theme: theme$1 }) => theme$1.color.surface1};
+`,ae=({path:e,transform:t,fillRule:n,clipRule:r})=>typeof e==`string`?(0,p.jsx)(`path`,{d:e,transform:t,fillRule:n,clipRule:r}):(0,p.jsx)(p.Fragment,{children:e}),oe=16;function se(){return(0,p.jsx)(re,{viewBoxSize:16,size:16,currentColor:!0,path:(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(`path`,{d:`M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183
+           0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z`}),(0,p.jsx)(ce,{d:`M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629
+           4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036
+           9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75
+           5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25
+           8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8
+           6.75C7.44772 6.75 7 7.19772 7 7.75Z`})]})})}const ce=b.path`
+  fill: ${({theme:e})=>e.color.surface1};
   fill-rule: evenodd;
-`;
+`;function le({children:e,context:t,className:n}){return(0,p.jsxs)(ue,{className:n,...pe({children:e,context:t,className:n}),children:[(0,p.jsx)(de,{children:(0,p.jsx)(se,{})}),(0,p.jsx)(fe,{children:e})]})}const ue=b.div`
+  ${e=>N(t=>[t.bg.surface3,t.borderRadius(8),t.padding.vertical(e.default.vertical),t.padding.horizontal(e.default.horizontal)])}
 
-//#endregion
-//#region src/components/HintText/index.tsx
-/**
-* @deprecated use HintText from @charcoal-ui/react
-*/
-function HintText({ children, context, className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$2, {
-		className,
-		...styledProps({
-			children,
-			context,
-			className
-		}),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconWrap, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoIcon, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text$2, { children })]
-	});
-}
-const Container$2 = defaultStyled.div`
-  ${(p) => theme((o) => [
-	o.bg.surface3,
-	o.borderRadius(8),
-	o.padding.vertical(p.default.vertical),
-	o.padding.horizontal(p.default.horizontal)
-])}
-
-  @media ${({ theme: t }) => (0, __charcoal_ui_utils.maxWidth)(t.breakpoint.screen1)} {
-    ${(p) => theme((o) => [o.padding.vertical(p.screen1.vertical), o.padding.horizontal(p.screen1.horizontal)])}
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
+    ${e=>N(t=>[t.padding.vertical(e.screen1.vertical),t.padding.horizontal(e.screen1.horizontal)])}
   }
 
   display: flex;
   align-items: flex-start;
-  ${(p) => p.context === "page" && styledExportFix_exports.css`
+  ${e=>e.context===`page`&&y.css`
       justify-content: center;
     `}
-`;
-const IconWrap = defaultStyled.div`
+`,de=b.div`
   display: flex;
   align-items: center;
-  color: ${(p) => p.theme.color.text4};
+  color: ${e=>e.theme.color.text4};
   height: 22px;
   margin: -4px 4px -4px 0;
-`;
-const Text$2 = defaultStyled.p`
-  ${theme((o) => [o.font.text2, o.typography(14)])}
+`,fe=b.p`
+  ${N(e=>[e.font.text2,e.typography(14)])}
   margin: 0;
   min-width: 0;
   overflow-wrap: break-word;
-`;
-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 = (0, __charcoal_ui_foundation.columnSystem)(2, __charcoal_ui_foundation.COLUMN_UNIT, __charcoal_ui_foundation.GUTTER_UNIT) + __charcoal_ui_foundation.GUTTER_UNIT;
-const RESPONSIVE_MAIN_MAX_WIDTH = (0, __charcoal_ui_foundation.columnSystem)(12, __charcoal_ui_foundation.COLUMN_UNIT, __charcoal_ui_foundation.GUTTER_UNIT);
-
-//#endregion
-//#region src/foundation/hooks.ts
-/**
-* 現在の画面幅がモバイル幅かどうかを返す
-*/
-function useMediaScreen1() {
-	return useMedia((0, __charcoal_ui_utils.maxWidth)((0, styled_components.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 = (0, react.useMemo)(() => __TEST__ ? {
-		matches: false,
-		addListener: () => {},
-		removeListener: () => {}
-	} : matchMedia(query), [query]);
-	const [matches, setMatches] = (0, react.useState)(matcher.matches);
-	if (matcher.matches !== matches) setMatches(matcher.matches);
-	const callback = (e) => {
-		try {
-			react_dom.default.flushSync(() => {
-				setMatches(e.matches);
-			});
-		} catch {
-			setMatches(e.matches);
-		}
-	};
-	(0, react.useLayoutEffect)(() => {
-		matcher.addListener(callback);
-		setMatches(matcher.matches);
-		return () => {
-			matcher.removeListener(callback);
-		};
-	}, [matcher]);
-	(0, react.useDebugValue)(`${query}: ${matches.toString()}`);
-	return matches;
-}
-function measure(ref) {
-	return ref !== null ? ref.getBoundingClientRect() : void 0;
-}
-function useElementSize(ref, deps = []) {
-	const [size$2, setSize] = (0, react.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, react.useState)(null);
-	(0, react.useLayoutEffect)(() => {
-		if (watch === null) return;
-		const observer = new ResizeObserver(() => {
-			setSize(measure(watch));
-		});
-		observer.observe(watch);
-		return () => {
-			observer.unobserve(watch);
-			setSize(void 0);
-		};
-	}, [watch]);
-	(0, react.useLayoutEffect)(() => {
-		if (ref.current !== watch) setWatch(ref.current);
-	});
-	(0, react.useLayoutEffect)(() => {
-		if (deps.length > 0) setSize(measure(ref.current));
-	}, deps);
-	(0, react.useDebugValue)(size$2);
-	return size$2;
-}
-/**
-* Debounce version of setState with `requestAnimationFrame`
-*
-* @param defaultValue Default value for `useState`
-*/
-function useDebounceAnimationState(defaultValue) {
-	const [state, setState] = (0, react.useState)(defaultValue);
-	const timer = (0, react.useRef)(void 0);
-	return [state, (0, react.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__ */ (0, react_jsx_runtime.jsxs)(LayoutRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LayoutConfigContext.Provider, {
-		value: config,
-		children: [config.withLeft && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeftArea, { children: menu }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MainArea, {
-			center,
-			children: [
-				header != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, { children: header }),
-				isHeaderTopMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderTopMenuContainer, { children: menu }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid, { children })
-			]
-		})]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalStyle, {})] });
-}
-const HeaderTopMenuContainer = defaultStyled.div`
+`;function pe(e){return{...e,...me(e.context)}}function me(e){switch(e){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}}}}const he=72,ge=(0,h.columnSystem)(2,h.COLUMN_UNIT,h.GUTTER_UNIT)+h.GUTTER_UNIT,_e=(0,h.columnSystem)(12,h.COLUMN_UNIT,h.GUTTER_UNIT);function ve(){return ye((0,f.maxWidth)((0,y.useTheme)().breakpoint.screen1))}function ye(e){let t=(0,u.useMemo)(()=>__TEST__?{matches:!1,addListener:()=>{},removeListener:()=>{}}:matchMedia(e),[e]),[n,r]=(0,u.useState)(t.matches);t.matches!==n&&r(t.matches);let i=e=>{try{g.default.flushSync(()=>{r(e.matches)})}catch{r(e.matches)}};return(0,u.useLayoutEffect)(()=>(t.addListener(i),r(t.matches),()=>{t.removeListener(i)}),[t]),(0,u.useDebugValue)(`${e}: ${n.toString()}`),n}function be(e){return e===null?void 0:e.getBoundingClientRect()}function xe(e,t=[]){let[n,r]=(0,u.useReducer)((e,t)=>e===void 0||t===void 0?t:e.height===t.height&&e.width===t.width?e:t,void 0),[i,a]=(0,u.useState)(null);return(0,u.useLayoutEffect)(()=>{if(i===null)return;let e=new ResizeObserver(()=>{r(be(i))});return e.observe(i),()=>{e.unobserve(i),r(void 0)}},[i]),(0,u.useLayoutEffect)(()=>{e.current!==i&&a(e.current)}),(0,u.useLayoutEffect)(()=>{t.length>0&&r(be(e.current))},t),(0,u.useDebugValue)(n),n}function Se(e){let[t,n]=(0,u.useState)(e),r=(0,u.useRef)(void 0);return[t,(0,u.useCallback)((e,t=!1)=>{if(t){n(e);return}r.current===void 0&&(r.current=requestAnimationFrame(()=>{n(e),r.current!==void 0&&(r.current=void 0)}))},[])]}const P=u.createContext({wide:!1,center:!1,withLeft:!1});function Ce({menu:e,children:t,header:n,center:r=!1,wide:i,isHeaderTopMenu:a=!1}){let o={center:r,wide:r?!0:i??!1,withLeft:e!=null&&!a};return(0,p.jsxs)(Ee,{children:[(0,p.jsxs)(P.Provider,{value:o,children:[o.withLeft&&(0,p.jsx)(De,{children:e}),(0,p.jsxs)(Oe,{center:r,children:[n!=null&&(0,p.jsx)(ke,{children:n}),a&&(0,p.jsx)(we,{children:e}),(0,p.jsx)(Ae,{children:t})]})]}),(0,p.jsx)(Te,{})]})}const we=b.div`
   margin-bottom: 40px;
   overflow-x: auto;
   word-break: keep-all;
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     margin-bottom: 0;
     padding-left: 16px;
     padding-bottom: 16px;
-    background-color: ${({ theme: theme$1 }) => theme$1.color.surface2};
+    background-color: ${({theme:e})=>e.color.surface2};
   }
-`;
-const GlobalStyle = styledExportFix_exports.createGlobalStyle`
+`,Te=y.createGlobalStyle`
   :root {
-    background-color: ${({ theme: theme$1 }) => theme$1.color.background2};
+    background-color: ${({theme:e})=>e.color.background2};
 
-    @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
-      background-color: ${({ theme: theme$1 }) => theme$1.color.background1};
+    @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
+      background-color: ${({theme:e})=>e.color.background1};
     }
   }
-`;
-const LayoutRoot = defaultStyled.div`
+`,Ee=b.div`
   display: flex;
-  background-color: ${({ theme: theme$1 }) => theme$1.color.background2};
+  background-color: ${({theme:e})=>e.color.background2};
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
-    background-color: ${({ theme: theme$1 }) => theme$1.color.background1};
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
+    background-color: ${({theme:e})=>e.color.background1};
   }
-`;
-const LeftArea = defaultStyled.div`
-  min-width: ${RESPONSIVE_LEFT_WIDTH}px;
-  padding: 40px 0 40px ${__charcoal_ui_foundation.GUTTER_UNIT}px;
+`,De=b.div`
+  min-width: ${ge}px;
+  padding: 40px 0 40px ${h.GUTTER_UNIT}px;
   box-sizing: border-box;
 
-  @media ${({ theme: theme$1 }) => theme$1.breakpoint.screen3} {
+  @media ${({theme:e})=>e.breakpoint.screen3} {
     display: none;
   }
-`;
-const MainArea = defaultStyled.div`
+`,Oe=b.div`
   flex-grow: 1;
   /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
   min-width: 0;
-  max-width: ${(p) => p.center ? (0, __charcoal_ui_foundation.columnSystem)(6, __charcoal_ui_foundation.COLUMN_UNIT, __charcoal_ui_foundation.GUTTER_UNIT) : RESPONSIVE_MAIN_MAX_WIDTH}px;
-  padding: 40px ${MAIN_COLUMN_HORIZONTAL_MIN_MARGIN}px;
+  max-width: ${e=>e.center?(0,h.columnSystem)(6,h.COLUMN_UNIT,h.GUTTER_UNIT):_e}px;
+  padding: 40px ${72}px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     padding: 0;
   }
-`;
-const Header = defaultStyled.div`
+`,ke=b.div`
   font-weight: bold;
   margin-bottom: 12px;
   font-size: 20px;
   line-height: 28px;
-  color: ${({ theme: theme$1 }) => theme$1.color.text2};
+  color: ${({theme:e})=>e.color.text2};
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     margin-bottom: 0;
     padding: 12px;
     font-size: 16px;
     line-height: 24px;
     display: flex;
     justify-content: center;
-    background-color: ${({ theme: theme$1 }) => theme$1.color.surface2};
+    background-color: ${({theme:e})=>e.color.surface2};
   }
-`;
-const Grid = defaultStyled.div`
+`,Ae=b.div`
   display: grid;
-  gap: ${__charcoal_ui_foundation.GUTTER_UNIT}px;
+  gap: ${h.GUTTER_UNIT}px;
   grid-template-columns: 1fr;
   grid-auto-columns: 1fr;
   grid-auto-rows: auto;
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     gap: 0;
-    background-color: ${({ theme: theme$1 }) => theme$1.color.background1};
+    background-color: ${({theme:e})=>e.color.background1};
     padding-bottom: 60px;
   }
-`;
-const LayoutItem = react.forwardRef(function LayoutItem$1({ span, children }, ref) {
-	const { withLeft } = (0, react.useContext)(LayoutConfigContext);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLayoutItem, {
-		span,
-		withLeft,
-		ref,
-		children
-	});
-});
-const StyledLayoutItem = defaultStyled.div`
+`,je=u.forwardRef(function({span:e,children:t},n){let{withLeft:r}=(0,u.useContext)(P);return(0,p.jsx)(Me,{span:e,withLeft:r,ref:n,children:t})}),Me=b.div`
   grid-column-start: auto;
-  grid-column-end: span ${(p) => p.span};
+  grid-column-end: span ${e=>e.span};
   border-radius: 24px;
-  color: ${({ theme: theme$1 }) => theme$1.color.text2};
-  background-color: ${({ theme: theme$1 }) => theme$1.color.background1};
+  color: ${({theme:e})=>e.color.text2};
+  background-color: ${({theme:e})=>e.color.background1};
   /* https://www.w3.org/TR/css-grid-1/#min-size-auto */
   min-width: 0;
 
-  @media ${(p) => p.withLeft ? p.theme.breakpoint.screen4 : p.theme.breakpoint.screen3} {
-    ${(p) => p.span > 2 && styledExportFix_exports.css`
+  @media ${e=>e.withLeft?e.theme.breakpoint.screen4:e.theme.breakpoint.screen3} {
+    ${e=>e.span>2&&y.css`
         grid-column-end: span 2;
       `}
   }
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
-    ${(p) => p.span > 1 && styledExportFix_exports.css`
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
+    ${e=>e.span>1&&y.css`
         grid-column-end: span 1;
       `}
 
     border-radius: 0;
     padding-bottom: 40px;
   }
-`;
-function LayoutItemHeader({ children }) {
-	const { wide, center } = (0, react.useContext)(LayoutConfigContext);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLayoutItemHeader, {
-		wide,
-		center,
-		children
-	});
-}
-const StyledLayoutItemHeader = defaultStyled.div`
-  padding: 0 ${(p) => p.wide ? 40 : 24}px;
-  height: ${(p) => p.wide ? 64 : 48}px;
+`;function Ne({children:e}){let{wide:t,center:n}=(0,u.useContext)(P);return(0,p.jsx)(Pe,{wide:t,center:n,children:e})}const Pe=b.div`
+  padding: 0 ${e=>e.wide?40:24}px;
+  height: ${e=>e.wide?64:48}px;
   display: grid;
   align-items: center;
   font-size: 16px;
   line-height: 24px;
   font-weight: bold;
-  background-color: ${({ theme: theme$1 }) => theme$1.color.surface2};
-  color: ${({ theme: theme$1 }) => theme$1.color.text2};
+  background-color: ${({theme:e})=>e.color.surface2};
+  color: ${({theme:e})=>e.color.text2};
   border-radius: 24px 24px 0 0;
-  ${(p) => p.center && styledExportFix_exports.css`
+  ${e=>e.center&&y.css`
       justify-content: center;
     `}
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     margin-top: 4px;
     padding: 0 16px;
     background: none;
     overflow-x: auto;
     border-radius: unset;
-    ${(p) => p.wide && styledExportFix_exports.css`
+    ${e=>e.wide&&y.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 } = (0, react.useContext)(LayoutConfigContext);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLayoutItemBody, {
-		wide,
-		horizontal,
-		narrow,
-		children
-	});
-}
-const StyledLayoutItemBody = defaultStyled.div`
-  padding: ${(p) => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrow.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrow.x}px ${LAYOUT_ITEM_BODY_PADDING.narrow.yBottom}px` : p.wide ? `${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.wide.y}px ${LAYOUT_ITEM_BODY_PADDING.wide.x}px` : `${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.default.y}px ${LAYOUT_ITEM_BODY_PADDING.default.x}px`};
+`,F={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 Fe({children:e,horizontal:t=!1,narrow:n=!1}){let{wide:r}=(0,u.useContext)(P);return(0,p.jsx)(Ie,{wide:r,horizontal:t,narrow:n,children:e})}const Ie=b.div`
+  padding: ${e=>e.narrow?`${F.narrow.yTop}px ${e.horizontal?0:F.narrow.x}px ${F.narrow.yBottom}px`:e.wide?`${e.horizontal?0:F.wide.y}px ${F.wide.x}px`:`${e.horizontal?0:F.default.y}px ${F.default.x}px`};
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
-    padding: ${(p) => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrowColumn1.x}px ${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yBottom}px` : `${LAYOUT_ITEM_BODY_PADDING.column1.y}px ${LAYOUT_ITEM_BODY_PADDING.column1.x}px 0`};
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
+    padding: ${e=>e.narrow?`${F.narrowColumn1.yTop}px ${e.horizontal?0:F.narrowColumn1.x}px ${F.narrowColumn1.yBottom}px`:`${F.column1.y}px ${F.column1.x}px 0`};
   }
 
   width: 100%;
   box-sizing: border-box;
-`;
-function useLayoutItemBodyPadding() {
-	const { wide } = (0, react.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, react.useContext)(LayoutConfigContext);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCancelLayoutItemBodyPadding, {
-		wide,
-		cancelTop,
-		children
-	});
-}
-const StyledCancelLayoutItemBodyPadding = defaultStyled.div`
-  margin: 0 -${(p) => p.wide ? LAYOUT_ITEM_BODY_PADDING.wide.x : LAYOUT_ITEM_BODY_PADDING.default.x}px;
-  margin-top: -${({ cancelTop = false, wide }) => !cancelTop ? 0 : wide ? LAYOUT_ITEM_BODY_PADDING.wide.y : LAYOUT_ITEM_BODY_PADDING.default.y}px;
+`;function Le(){let{wide:e}=(0,u.useContext)(P);return ve()?F.column1:e?F.wide:F.default}function Re({children:e,cancelTop:t}){let{wide:n}=(0,u.useContext)(P);return(0,p.jsx)(ze,{wide:n,cancelTop:t,children:e})}const ze=b.div`
+  margin: 0 -${e=>e.wide?F.wide.x:F.default.x}px;
+  margin-top: -${({cancelTop:e=!1,wide:t})=>e?t?F.wide.y:F.default.y:0}px;
 
-  @media ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.maxWidth)(theme$1.breakpoint.screen1)} {
-    margin: 0 -${LAYOUT_ITEM_BODY_PADDING.column1.x}px;
-    margin-top: -${({ cancelTop = false }) => !cancelTop ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x}px;
+  @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
+    margin: 0 -${F.column1.x}px;
+    margin-top: -${({cancelTop:e=!1})=>e?F.column1.x:0}px;
   }
-`;
-
-//#endregion
-//#region src/components/TextEllipsis/helper.ts
-const hasChildren = (element) => (0, react.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) && !(0, react.isValidElement)(children)) return childToString(children);
-	return react.Children.toArray(children).reduce((text, child) => {
-		let newText = "";
-		if ((0, react.isValidElement)(child) && hasChildren(child)) newText = onlyText(child.props.children);
-		else if ((0, react.isValidElement)(child) && !hasChildren(child)) newText = "";
-		else newText = childToString(child);
-		return text.concat(newText);
-	}, "");
-};
-
-//#endregion
-//#region src/components/TextEllipsis/index.tsx
-/**
-* 複数行のテキストに表示行数制限を設けて`...`で省略する
-*/
-const TextEllipsis = defaultStyled.div.attrs(({ children, title = onlyText(children) }) => ({ title: title !== "" ? title : void 0 }))`
+`,Be=e=>(0,u.isValidElement)(e)&&!!e.props.children,Ve=e=>e==null||typeof e==`boolean`||JSON.stringify(e)===`{}`?``:e.toString(),He=e=>!Array.isArray(e)&&!(0,u.isValidElement)(e)?Ve(e):u.Children.toArray(e).reduce((e,t)=>{let n=``;return n=(0,u.isValidElement)(t)&&Be(t)?He(t.props.children):(0,u.isValidElement)(t)&&!Be(t)?``:Ve(t),e.concat(n)},``),I=b.div.attrs(({children:e,title:t=He(e)})=>({title:t===``?void 0:t}))`
   overflow: hidden;
-  line-height: ${(props) => props.lineHeight}px;
+  line-height: ${e=>e.lineHeight}px;
   /* For english */
   overflow-wrap: break-word;
 
-  ${({ lineLimit = 1, lineHeight }) => lineLimit === 1 ? styledExportFix_exports.css`
+  ${({lineLimit:e=1,lineHeight:t})=>e===1?y.css`
           text-overflow: ellipsis;
           white-space: nowrap;
-        ` : styledExportFix_exports.css`
+        `:y.css`
           display: -webkit-box;
           -webkit-box-orient: vertical;
-          -webkit-line-clamp: ${lineLimit};
+          -webkit-line-clamp: ${e};
           /* Fallback for -webkit-line-clamp */
-          max-height: ${lineHeight * lineLimit}px;
+          max-height: ${t*e}px;
         `}
-`;
-
-//#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 } = (0, react.useContext)(MenuListItemContext);
-	return /* @__PURE__ */ (0, react_jsx_runtime.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, react_jsx_runtime.jsxs)(Labels, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryText, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextEllipsis, {
-			lineHeight: 22,
-			lineLimit: 1,
-			children: primary
-		}) }), secondary !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecondaryText, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextEllipsis, {
-			lineHeight: 22,
-			lineLimit: 1,
-			children: secondary
-		}) })] }), children]
-	});
-}
-const Item = defaultStyled.div`
+`,Ue=u.createContext({padding:24});function L({primary:e,secondary:t,onClick:n,disabled:r=!1,noHover:i=!1,gtmClass:a,children:o}){let{padding:s}=(0,u.useContext)(Ue);return(0,p.jsxs)(We,{hasSubLabel:t!==void 0,onClick:e=>!r&&n&&n(e),sidePadding:s,noHover:i,noClick:n===void 0,"aria-disabled":r,role:n===void 0?void 0:`button`,className:a===void 0?void 0:`gtm-${a}`,children:[(0,p.jsxs)(Ge,{children:[(0,p.jsx)(Ke,{children:(0,p.jsx)(I,{lineHeight:22,lineLimit:1,children:e})}),t!==void 0&&(0,p.jsx)(qe,{children:(0,p.jsx)(I,{lineHeight:22,lineLimit:1,children:t})})]}),o]})}const We=b.div`
   display: flex;
-  height: ${(p) => p.hasSubLabel ? 56 : 40}px;
+  height: ${e=>e.hasSubLabel?56:40}px;
   align-items: center;
   justify-content: space-between;
-  padding: 0 ${(p) => p.sidePadding}px;
+  padding: 0 ${e=>e.sidePadding}px;
   user-select: none;
-  cursor: ${(p) => p.noClick ? "default" : "pointer"};
+  cursor: ${e=>e.noClick?`default`:`pointer`};
   transition: 0.2s background-color;
 
   &:hover {
-    ${(p) => !p.noHover && styledExportFix_exports.css`
-        background-color: ${({ theme: theme$1 }) => theme$1.color.surface3};
+    ${e=>!e.noHover&&y.css`
+        background-color: ${({theme:e})=>e.color.surface3};
       `}
   }
 
-  ${theme((o) => o.disabled)}
+  ${N(e=>e.disabled)}
 
-  ${__charcoal_ui_utils.disabledSelector} {
+  ${f.disabledSelector} {
     cursor: default;
     pointer-events: none;
 
@@ -749,110 +272,45 @@ const Item = defaultStyled.div`
       background-color: unset;
     }
   }
-`;
-const Labels = defaultStyled.div`
+`,Ge=b.div`
   display: flex;
   flex-direction: column;
-`;
-const PrimaryText = defaultStyled.div`
-  color: ${(p) => p.theme.color.text2};
+`,Ke=b.div`
+  color: ${e=>e.theme.color.text2};
   line-height: 22px;
   font-size: 14px;
   display: grid;
-`;
-const SecondaryText = defaultStyled.div`
-  color: ${(p) => p.theme.color.text3};
+`,qe=b.div`
+  color: ${e=>e.theme.color.text3};
   line-height: 18px;
   font-size: 10px;
-`;
-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, react_jsx_runtime.jsx)("span", {
-		onClick,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListItem, { ...props })
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A, {
-		as: Link,
-		to: link,
-		onClick,
-		...linkProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListItem, {
-			onClick: () => void 0,
-			...props
-		})
-	});
-}
-const A = defaultStyled.a`
+`;function R({link:e,onClick:t,disabled:n=!1,primary:r,secondary:i,gtmClass:a,noHover:o,children:s,...c}){let{Link:l}=w(),u={disabled:n,primary:r,secondary:i,gtmClass:a,noHover:o,children:s};return n?(0,p.jsx)(`span`,{onClick:t,children:(0,p.jsx)(L,{...u})}):(0,p.jsx)(Je,{as:l,to:e,onClick:t,...c,children:(0,p.jsx)(L,{onClick:()=>void 0,...u})})}const Je=b.a`
   display: block;
-`;
-function MenuListLinkItemWithIcon({ icon, primary: text,...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListLinkItem, {
-		primary: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(IconContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$1, { children: icon }), text] }),
-		...props
-	});
-}
-function MenuListItemWithIcon({ icon, primary: text,...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListItem, {
-		primary: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(IconContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$1, { children: icon }), text] }),
-		...props
-	});
-}
-const IconContainer = defaultStyled.div`
+`;function Ye({icon:e,primary:t,...n}){return(0,p.jsx)(R,{primary:(0,p.jsxs)(Ze,{children:[(0,p.jsx)(Qe,{children:e}),t]}),...n})}function Xe({icon:e,primary:t,...n}){return(0,p.jsx)(L,{primary:(0,p.jsxs)(Ze,{children:[(0,p.jsx)(Qe,{children:e}),t]}),...n})}const Ze=b.div`
   display: grid;
   gap: 8px;
   grid-auto-flow: column;
   align-items: center;
-`;
-const Icon$1 = defaultStyled.div`
-  color: ${({ theme: theme$1 }) => theme$1.color.text3};
+`,Qe=b.div`
+  color: ${({theme:e})=>e.color.text3};
   display: flex;
-`;
-const MenuListSpacer = defaultStyled.div`
+`,$e=b.div`
   height: 24px;
-`;
-const MenuListLabel = defaultStyled.div`
+`,et=b.div`
   padding: 0 16px;
   font-size: 12px;
   line-height: 16px;
-  color: ${({ theme: theme$1 }) => theme$1.color.text3};
+  color: ${({theme:e})=>e.color.text3};
   margin-top: -2px;
   margin-bottom: 6px;
-`;
-
-//#endregion
-//#region src/components/LeftMenu/index.tsx
-function LeftMenu({ links, active }) {
-	const { Link } = useComponentAbstraction();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$1, { children: links.map((link, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link, {
-		to: link.to,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkItem, {
-			"aria-current": link.id === active || void 0,
-			children: link.text
-		})
-	}, index)) });
-}
-function LeftMenuContent({ links }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: links.map((link, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListLinkItem, {
-		link: link.to,
-		primary: link.text
-	}, index)) });
-}
-const Container$1 = defaultStyled.div`
+`;function tt({links:e,active:t}){let{Link:n}=w();return(0,p.jsx)(rt,{children:e.map((e,r)=>(0,p.jsx)(n,{to:e.to,children:(0,p.jsx)(it,{"aria-current":e.id===t||void 0,children:e.text})},r))})}function nt({links:e}){return(0,p.jsx)(p.Fragment,{children:e.map((e,t)=>(0,p.jsx)(R,{link:e.to,primary:e.text},t))})}const rt=b.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`;
-const LinkItem = defaultStyled.div`
+`,it=b.div`
   display: flex;
   align-items: center;
-  color: ${({ theme: theme$1 }) => theme$1.color.text3};
+  color: ${({theme:e})=>e.color.text3};
   border-radius: 24px;
   font-weight: bold;
   font-size: 14px;
@@ -862,48 +320,27 @@ const LinkItem = defaultStyled.div`
   transition: 0.2s color;
   &:hover {
     transition: 0.2s color;
-    color: ${({ theme: theme$1 }) => theme$1.color.text2};
+    color: ${({theme:e})=>e.color.text2};
   }
   &[aria-current] {
-    color: ${({ theme: theme$1 }) => theme$1.color.text2};
-    background-color: ${({ theme: theme$1 }) => theme$1.color.surface3};
+    color: ${({theme:e})=>e.color.text2};
+    background-color: ${({theme:e})=>e.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__ */ (0, react_jsx_runtime.jsxs)(Label, {
-		className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "",
-		flex,
-		rowReverse,
-		"aria-disabled": disabled,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SwitchOuter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwitchInput, {
-			...props,
-			disabled,
-			ref
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwitchInner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwitchInnerKnob, {}) })] }), children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Children, {
-			rowReverse,
-			children
-		})]
-	});
-});
-const Children = defaultStyled.span`
-  ${(p) => p.rowReverse ? styledExportFix_exports.css`
+`;var at=u.forwardRef(function({gtmClass:e,flex:t=!1,rowReverse:n=!1,children:r,disabled:i,...a},o){return(0,p.jsxs)(st,{className:e===void 0?``:`gtm-${e}`,flex:t,rowReverse:n,"aria-disabled":i,children:[(0,p.jsxs)(ct,{children:[(0,p.jsx)(ut,{...a,disabled:i,ref:o}),(0,p.jsx)(z,{children:(0,p.jsx)(lt,{})})]}),r!=null&&(0,p.jsx)(ot,{rowReverse:n,children:r})]})});const ot=b.span`
+  ${e=>e.rowReverse?y.css`
           margin-right: 8px;
-        ` : styledExportFix_exports.css`
+        `:y.css`
           margin-left: 8px;
         `}
-`;
-const Label = defaultStyled.label`
+`,st=b.label`
   display: inline-flex;
   align-items: center;
-  ${({ flex }) => flex && styledExportFix_exports.css`
+  ${({flex:e})=>e&&y.css`
       display: flex;
       justify-content: space-between;
     `}
-  ${({ rowReverse }) => styledExportFix_exports.css`
-    flex-direction: ${rowReverse ? "row-reverse" : "row"};
+  ${({rowReverse:e})=>y.css`
+    flex-direction: ${e?`row-reverse`:`row`};
   `}
   cursor: pointer;
   outline: 0;
@@ -911,37 +348,33 @@ const Label = defaultStyled.label`
   &[aria-disabled='true'] {
     cursor: auto;
   }
-`;
-const SwitchOuter = defaultStyled.span`
+`,ct=b.span`
   display: inline-flex;
   position: relative;
   z-index: 0;
-`;
-const SwitchInner = defaultStyled.div`
+`,z=b.div`
   position: relative;
   box-sizing: border-box;
   width: 28px;
   height: 16px;
   border-radius: 16px;
   border: 2px solid transparent;
-  background: ${({ theme: theme$1 }) => theme$1.color.text4};
+  background: ${({theme:e})=>e.color.text4};
   transition:
     box-shadow 0.2s,
     background-color 0.2s;
-`;
-const SwitchInnerKnob = defaultStyled.div`
+`,lt=b.div`
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   width: 12px;
   height: 12px;
-  background-color: ${({ theme: theme$1 }) => theme$1.color.text5};
+  background-color: ${({theme:e})=>e.color.text5};
   border-radius: 50%;
   transform: translateX(0);
   transition: transform 0.2s;
-`;
-const SwitchInput = defaultStyled.input.attrs({ type: "checkbox" })`
+`,ut=b.input.attrs({type:`checkbox`})`
   position: absolute;
   /* NOTE: this is contained by the GraphicCheckboxOuter */
   z-index: 1;
@@ -957,10 +390,10 @@ const SwitchInput = defaultStyled.input.attrs({ type: "checkbox" })`
   cursor: pointer;
 
   &:checked {
-    ~ ${SwitchInner} {
-      background-color: ${({ theme: theme$1 }) => theme$1.color.brand};
+    ~ ${z} {
+      background-color: ${({theme:e})=>e.color.brand};
 
-      ${SwitchInnerKnob} {
+      ${lt} {
         transform: translateX(12px);
       }
     }
@@ -969,220 +402,85 @@ const SwitchInput = defaultStyled.input.attrs({ type: "checkbox" })`
   &:disabled {
     cursor: auto;
 
-    ~ ${SwitchInner} {
-      opacity: ${({ theme: theme$1 }) => theme$1.elementEffect.disabled.opacity};
+    ~ ${z} {
+      opacity: ${({theme:e})=>e.elementEffect.disabled.opacity};
     }
   }
 
   &:not(:disabled):focus {
-    ~ ${SwitchInner} {
+    ~ ${z} {
       box-shadow: 0 0 0 4px
-        ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.applyEffect)(theme$1.color.brand, theme$1.elementEffect.disabled)};
+        ${({theme:e})=>(0,f.applyEffect)(e.color.brand,e.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__ */ (0, react_jsx_runtime.jsx)(AutoWidthIconAnchor, {
-		show,
-		pre,
-		children: icon
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAnchor, {
-		width,
-		show,
-		pre,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { children: icon })
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAnchorNaive, {
-		show,
-		pre,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconNaive, { children: icon })
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Root, { children: [
-		pre && node,
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text$1, {
-			fixed,
-			children
-		}),
-		!pre && node
-	] });
-});
-const Root = defaultStyled.div`
+`;var dt=u.memo(function({children:e,icon:t,show:n=!0,prefix:r=!1,width:i,fit:a=!1,fixed:o=!1}){let s=a?i===void 0?(0,p.jsx)(mt,{show:n,pre:r,children:t}):(0,p.jsx)(yt,{width:i,show:n,pre:r,children:(0,p.jsx)(bt,{children:t})}):(0,p.jsx)(_t,{show:n,pre:r,children:(0,p.jsx)(vt,{children:t})});return(0,p.jsxs)(ft,{children:[r&&s,(0,p.jsx)(pt,{fixed:o,children:e}),!r&&s]})});const ft=b.div`
   display: flex;
   align-items: center;
-`;
-const Text$1 = defaultStyled.div`
-  ${(p) => !p.fixed && styledExportFix_exports.css`
+`,pt=b.div`
+  ${e=>!e.fixed&&y.css`
       min-width: 0;
       overflow: hidden;
     `}
   white-space: nowrap;
   text-overflow: ellipsis;
-`;
-function AutoWidthIconAnchor({ children, show, pre }) {
-	const ref = (0, react.useRef)(null);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAnchor, {
-		width: useElementSize(ref, [null])?.width ?? 0,
-		show,
-		pre,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			ref,
-			children
-		})
-	});
-}
-const forceCenteringCss = styledExportFix_exports.css`
+`;function mt({children:e,show:t,pre:n}){let r=(0,u.useRef)(null);return(0,p.jsx)(yt,{width:xe(r,[null])?.width??0,show:t,pre:n,children:(0,p.jsx)(bt,{ref:r,children:e})})}const ht=y.css`
   > svg {
     display: block;
   }
-`;
-const iconAnchorCss = styledExportFix_exports.css`
-  ${(p) => p.show === "collapse" ? styledExportFix_exports.css`
+`,gt=y.css`
+  ${e=>e.show===`collapse`?y.css`
           display: none;
-        ` : styledExportFix_exports.css`
-          visibility: ${p.show ? "visible" : "hidden"};
+        `:y.css`
+          visibility: ${e.show?`visible`:`hidden`};
         `};
-  ${(p) => p.pre ? styledExportFix_exports.css`
+  ${e=>e.pre?y.css`
           margin-right: 4px;
-        ` : styledExportFix_exports.css`
+        `:y.css`
           margin-left: 4px;
         `}
-`;
-const IconAnchorNaive = defaultStyled.div`
+`,_t=b.div`
   display: flex;
   align-items: center;
 
-  ${iconAnchorCss}
-`;
-const IconNaive = defaultStyled.div`
+  ${gt}
+`,vt=b.div`
   display: inline-flex;
 
-  ${forceCenteringCss}
-`;
-const IconAnchor = defaultStyled.div`
+  ${ht}
+`,yt=b.div`
   display: flex;
   position: relative;
   /* Iconをline-heightに関与させない */
   height: 0;
   /* 横方向の領域は確保する */
-  width: ${(p) => p.width}px;
+  width: ${e=>e.width}px;
 
-  ${iconAnchorCss}
-`;
-const Icon = defaultStyled.div`
+  ${gt}
+`,bt=b.div`
   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" ? react.useLayoutEffect : react.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__ */ (0, react_jsx_runtime.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;
-}({});
-const onlyNonTouchDevice = styledExportFix_exports.css`
+  ${ht}
+`;var B;function xt(){if(B!==void 0)return B;B=!1;try{let t=Object.defineProperty({},`passive`,{get(){return B=!0}});window.addEventListener(`test`,e,t),window.removeEventListener(`test`,e)}catch{}return B;function e(){}}const St=()=>navigator.userAgent.includes(`Edge/`),V=typeof window<`u`?u.useLayoutEffect:u.useEffect;function H(e){throw Error(arguments.length===0?`unreachable`:`unreachable (${JSON.stringify(e)})`)}let U=function(e){return e.Up=`up`,e.Down=`down`,e.Left=`left`,e.Right=`right`,e}({});const Ct=`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`,wt=24;function Tt({direction:e}){return(0,p.jsx)(re,{viewBoxSize:24,size:24,currentColor:!0,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`,transform:Et(e)})}function Et(e){switch(e){case U.Up:return`rotate(270 12 12)`;case U.Down:return`rotate(90 12 12)`;case U.Left:return`rotate(180 12 12)`;case U.Right:return;default:return H(e)}}let W=function(e){return e.Right=`right`,e.Left=`left`,e}({});const Dt=y.css`
   @media (hover: none) and (pointer: coarse) {
     display: none;
   }
-`;
-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__ */ (0, react_jsx_runtime.jsx)(_StyledButton, {
-		type: "button",
-		onClick,
-		hide: !show,
-		style: offsetStyle,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselButtonIcon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NextIcon, { direction: direction === Direction.Right ? WedgeDirection$1.Right : direction === Direction.Left ? WedgeDirection$1.Left : unreachable() }) })
-	});
-}
-const CAROUSEL_BUTTON_SIZE = 40;
-const CarouselButtonIcon = defaultStyled.div`
+`;function G({direction:e,show:t,offset:n=0,padding:r=0,bottomOffset:i=0,gradient:a=!1,onClick:o}){let s=e===W.Left?{left:a?n-72:n,paddingLeft:Math.max(r,0),paddingBottom:i}:{right:a?n-72:n,paddingRight:Math.max(r,0),paddingBottom:i};return(0,p.jsx)(kt,{type:`button`,onClick:o,hide:!t,style:s,children:(0,p.jsx)(K,{children:(0,p.jsx)(Tt,{direction:e===W.Right?U.Right:e===W.Left?U.Left:H()})})})}const Ot=40,K=b.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${CAROUSEL_BUTTON_SIZE}px;
-  height: ${CAROUSEL_BUTTON_SIZE}px;
+  width: ${40}px;
+  height: ${40}px;
   border-radius: 50%;
-  background-color: ${({ theme: theme$1 }) => theme$1.color.surface4};
+  background-color: ${({theme:e})=>e.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 = (0, styled_components.default)(defaultStyled.button`
+  color: ${({theme:e})=>e.color.text5};
+`;var kt=b(b.button`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1201,215 +499,22 @@ var _StyledButton = (0, styled_components.default)(defaultStyled.button`
   /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */
   z-index: 1;
 
-  &:hover ${CarouselButtonIcon} {
-    background-color: ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.applyEffect)(theme$1.color.surface4, theme$1.effect.hover)};
-    color: ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.applyEffect)(theme$1.color.text5, theme$1.effect.hover)};
+  &:hover ${K} {
+    background-color: ${({theme:e})=>(0,f.applyEffect)(e.color.surface4,e.effect.hover)};
+    color: ${({theme:e})=>(0,f.applyEffect)(e.color.text5,e.effect.hover)};
   }
 
-  &:active ${CarouselButtonIcon} {
-    background-color: ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.applyEffect)(theme$1.color.surface4, theme$1.effect.press)};
-    color: ${({ theme: theme$1 }) => (0, __charcoal_ui_utils.applyEffect)(theme$1.color.text5, theme$1.effect.press)};
+  &:active ${K} {
+    background-color: ${({theme:e})=>(0,f.applyEffect)(e.color.surface4,e.effect.press)};
+    color: ${({theme:e})=>(0,f.applyEffect)(e.color.text5,e.effect.press)};
   }
 
-  ${(p) => p.hide && styledExportFix_exports.css`
+  ${e=>e.hide&&y.css`
       visibility: hidden;
       opacity: 0;
       pointer-events: none;
     `}
-`).withConfig({ componentId: "ccl__sc-gjlnt0-0" })(["", ""], onlyNonTouchDevice);
-
-//#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 = (0, react.useRef)(false);
-	const [maxScrollLeft, setMaxScrollLeft] = (0, react.useState)(0);
-	const [leftShow, setLeftShow] = (0, react.useState)(false);
-	const [rightShow, setRightShow] = (0, react.useState)(false);
-	const [styles, set] = (0, react_spring.useSpring)(() => ({ scroll: 0 }));
-	const ref = (0, react.useRef)(null);
-	const visibleAreaRef = (0, react.useRef)(null);
-	const innerRef = (0, react.useRef)(null);
-	const handleRight = (0, react.useCallback)(() => {
-		if (visibleAreaRef.current === null) return;
-		const { clientWidth } = visibleAreaRef.current;
-		const scroll = Math.min(scrollLeft + clientWidth * scrollAmountCoef, maxScrollLeft);
-		setScrollLeft(scroll, true);
-		set({
-			scroll,
-			from: { scroll: scrollLeft },
-			reset: !animation.current
-		});
-		animation.current = true;
-	}, [
-		animation,
-		maxScrollLeft,
-		scrollLeft,
-		set,
-		scrollAmountCoef,
-		setScrollLeft
-	]);
-	const handleLeft = (0, react.useCallback)(() => {
-		if (visibleAreaRef.current === null) return;
-		const { clientWidth } = visibleAreaRef.current;
-		const scroll = Math.max(scrollLeft - clientWidth * scrollAmountCoef, 0);
-		setScrollLeft(scroll, true);
-		set({
-			scroll,
-			from: { scroll: scrollLeft },
-			reset: !animation.current
-		});
-		animation.current = true;
-	}, [
-		animation,
-		scrollLeft,
-		set,
-		scrollAmountCoef,
-		setScrollLeft
-	]);
-	(0, react.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, react.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, react.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 = (0, react.useCallback)(() => {
-		if (ref.current === null) return;
-		if (onScroll) onScroll(ref.current.scrollLeft);
-	}, [onScroll]);
-	const [disableGradient, setDisableGradient] = (0, react.useState)(false);
-	useIsomorphicLayoutEffect(() => {
-		if (isEdge()) setDisableGradient(true);
-	}, []);
-	if (!disableGradient && options.hasGradient === true) {
-		const fadeInGradient = options.fadeInGradient ?? false;
-		const overflowGradient = !fadeInGradient;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
-			ref: visibleAreaRef,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GradientContainer, {
-				fadeInGradient,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightGradient, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeftGradient, {
-					show: overflowGradient || scrollLeft > 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollArea, {
-						ref,
-						scrollLeft: styles.scroll,
-						onScroll: handleScrollMove,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselContainer, {
-							ref: innerRef,
-							centerItems,
-							children
-						})
-					})
-				}) })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonsContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselButton, {
-				direction: Direction.Left,
-				show: leftShow,
-				offset: buttonOffset,
-				bottomOffset,
-				padding: buttonPadding,
-				gradient: overflowGradient,
-				onClick: handleLeft
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselButton, {
-				direction: Direction.Right,
-				show: rightShow,
-				offset: buttonOffset,
-				bottomOffset,
-				padding: buttonPadding,
-				gradient: true,
-				onClick: handleRight
-			})] })]
-		});
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
-		ref: visibleAreaRef,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollArea, {
-			ref,
-			scrollLeft: styles.scroll,
-			onScroll: handleScrollMove,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselContainer, {
-				ref: innerRef,
-				centerItems,
-				children
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonsContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselButton, {
-			direction: Direction.Left,
-			show: leftShow,
-			offset: buttonOffset,
-			bottomOffset,
-			padding: buttonPadding,
-			onClick: handleLeft
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselButton, {
-			direction: Direction.Right,
-			show: rightShow,
-			offset: buttonOffset,
-			bottomOffset,
-			padding: buttonPadding,
-			onClick: handleRight
-		})] })]
-	});
-}
-const CarouselContainer = defaultStyled.ul`
+`)`${Dt}`;const At=72,jt=.75;function Mt({buttonOffset:e=0,buttonPadding:t=16,bottomOffset:n=0,defaultScroll:{align:r=`left`,offset:i=0}={},onScroll:a,onResize:o,children:s,centerItems:c,onScrollStateChange:l,scrollAmountCoef:d=.75,...f}){let[m,h]=Se(0),g=(0,u.useRef)(!1),[v,y]=(0,u.useState)(0),[b,ee]=(0,u.useState)(!1),[x,S]=(0,u.useState)(!1),[C,w]=(0,_.useSpring)(()=>({scroll:0})),T=(0,u.useRef)(null),E=(0,u.useRef)(null),D=(0,u.useRef)(null),O=(0,u.useCallback)(()=>{if(E.current===null)return;let{clientWidth:e}=E.current,t=Math.min(m+e*d,v);h(t,!0),w({scroll:t,from:{scroll:m},reset:!g.current}),g.current=!0},[g,v,m,w,d,h]),k=(0,u.useCallback)(()=>{if(E.current===null)return;let{clientWidth:e}=E.current,t=Math.max(m-e*d,0);h(t,!0),w({scroll:t,from:{scroll:m},reset:!g.current}),g.current=!0},[g,m,w,d,h]);(0,u.useEffect)(()=>{let e=m>0,t=m<v&&v>0;(e!==b||t!==x)&&(ee(e),S(t),l?.(e||t))},[b,v,l,x,m]);let A=(0,u.useCallback)(()=>{if(T.current===null)return;g.current&&=(C.scroll.stop(),!1);let e=T.current.scrollLeft;h(e)},[g,h,C]),j=(0,u.useCallback)(()=>{if(T.current===null)return;let{clientWidth:e,scrollWidth:t}=T.current;y(t-e),o&&o(e)},[o]);V(()=>{let e=T.current,t=D.current;if(e===null||t===null)return;e.addEventListener(`wheel`,A,xt()&&{passive:!0});let n=new ResizeObserver(j);n.observe(e);let r=new ResizeObserver(j);return r.observe(t),()=>{e.removeEventListener(`wheel`,A),n.disconnect(),r.disconnect()}},[j,A]),V(()=>{if(r!==`left`||i!==0){let e=T.current;if(e!==null){let t=Math.max(0,Math.min(r===`left`&&i>0?i:r===`center`?v/2+i:r===`right`&&i<=v?v-i/2:0,v));e.scrollLeft=t,h(t,!0)}}},[T.current]);let M=(0,u.useCallback)(()=>{T.current!==null&&a&&a(T.current.scrollLeft)},[a]),[te,ne]=(0,u.useState)(!1);if(V(()=>{St()&&ne(!0)},[]),!te&&f.hasGradient===!0){let r=f.fadeInGradient??!1,i=!r;return(0,p.jsxs)(Nt,{ref:E,children:[(0,p.jsx)(Ft,{fadeInGradient:r,children:(0,p.jsx)(It,{children:(0,p.jsx)(Lt,{show:i||m>0,children:(0,p.jsx)(Pt,{ref:T,scrollLeft:C.scroll,onScroll:M,children:(0,p.jsx)(q,{ref:D,centerItems:c,children:s})})})})}),(0,p.jsxs)(J,{children:[(0,p.jsx)(G,{direction:W.Left,show:b,offset:e,bottomOffset:n,padding:t,gradient:i,onClick:k}),(0,p.jsx)(G,{direction:W.Right,show:x,offset:e,bottomOffset:n,padding:t,gradient:!0,onClick:O})]})]})}return(0,p.jsxs)(Nt,{ref:E,children:[(0,p.jsx)(Pt,{ref:T,scrollLeft:C.scroll,onScroll:M,children:(0,p.jsx)(q,{ref:D,centerItems:c,children:s})}),(0,p.jsxs)(J,{children:[(0,p.jsx)(G,{direction:W.Left,show:b,offset:e,bottomOffset:n,padding:t,onClick:k}),(0,p.jsx)(G,{direction:W.Right,show:x,offset:e,bottomOffset:n,padding:t,onClick:O})]})]})}const q=b.ul`
   vertical-align: top;
   overflow: hidden;
   list-style: none;
@@ -1419,29 +524,26 @@ const CarouselContainer = defaultStyled.ul`
   min-width: 100%;
   box-sizing: border-box;
 
-  ${({ centerItems = false }) => centerItems ? styledExportFix_exports.css`
+  ${({centerItems:e=!1})=>e?y.css`
           display: flex;
           width: max-content;
           margin: 0 auto;
-        ` : styledExportFix_exports.css`
+        `:y.css`
           display: inline-flex;
           margin: 0;
         `}
-`;
-const ButtonsContainer = defaultStyled.div`
+`,J=b.div`
   opacity: 0;
   transition: 0.4s opacity;
-`;
-const Container = defaultStyled.div`
-  &:hover ${ButtonsContainer} {
+`,Nt=b.div`
+  &:hover ${J} {
     opacity: 1;
   }
 
   /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */
   position: relative;
   z-index: 0;
-`;
-const ScrollArea = defaultStyled(react_spring.animated.div)`
+`,Pt=b(_.animated.div)`
   overflow-x: auto;
   padding: 0;
   margin: 0;
@@ -1451,222 +553,52 @@ const ScrollArea = defaultStyled(react_spring.animated.div)`
   }
 
   scrollbar-width: none;
-`;
-const GradientContainer = defaultStyled.div`
+`,Ft=b.div`
   /* NOTE: LeftGradientがはみ出るためhidden */
   overflow: hidden;
-  ${(p) => !p.fadeInGradient && styledExportFix_exports.css`
-      margin-left: ${-GRADIENT_WIDTH}px;
-      ${CarouselContainer} {
-        padding-left: ${GRADIENT_WIDTH}px;
+  ${e=>!e.fadeInGradient&&y.css`
+      margin-left: ${-72}px;
+      ${q} {
+        padding-left: ${72}px;
       }
     `}
 
-  margin-right: ${-GRADIENT_WIDTH}px;
+  margin-right: ${-72}px;
   /* stylelint-disable-next-line no-duplicate-selectors */
-  ${CarouselContainer} {
-    padding-right: ${GRADIENT_WIDTH}px;
+  ${q} {
+    padding-right: ${72}px;
   }
-`;
-const RightGradient = defaultStyled.div`
+`,It=b.div`
   mask-image: linear-gradient(
     to right,
-    #000 calc(100% - ${GRADIENT_WIDTH}px),
+    #000 calc(100% - ${72}px),
     transparent
   );
-`;
-const LeftGradient = defaultStyled.div`
+`,Lt=b.div`
   /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */
-  margin-right: ${-GRADIENT_WIDTH}px;
-  padding-right: ${GRADIENT_WIDTH}px;
+  margin-right: ${-72}px;
+  padding-right: ${72}px;
   /* NOTE: mask-position に transition をつけたいが vender prefixes 対策で all につける */
   transition: 0.2s all ease-in;
-  mask: linear-gradient(to right, transparent, #000 ${GRADIENT_WIDTH}px)
-    ${(p) => p.show ? 0 : -GRADIENT_WIDTH}px 0;
-`;
-
-//#endregion
-//#region src/components/icons/DotsIcon.tsx
-function DotsIcon({ size: size$2 = 16 }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSVG, {
-		viewBox: "0 0 20 6",
-		width: size$2,
-		height: size$2,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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
+  mask: linear-gradient(to right, transparent, #000 ${72}px)
+    ${e=>e.show?0:-72}px 0;
+`;function Y({size:e=16}){return(0,p.jsx)(Rt,{viewBox:`0 0 20 6`,width:e,height:e,children:(0,p.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 = defaultStyled.svg`
+          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 Rt=b.svg`
   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__ */ (0, react_jsx_runtime.jsx)("svg", {
-		viewBox: "0 0 10 8",
-		width: size$2,
-		height: size$2,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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 = defaultStyled.polyline`
+`;let X=function(e){return e.Up=`up`,e.Down=`down`,e.Left=`left`,e.Right=`right`,e}({});function Z({size:e=16,direction:t}){return(0,p.jsx)(`svg`,{viewBox:`0 0 10 8`,width:e,height:e,children:(0,p.jsx)(Bt,{strokeWidth:`2`,points:`1,2 5,6 9,2`,transform:zt(t)})})}function zt(e){switch(e){case X.Up:return`rotate(180 5 4)`;case X.Down:return;case X.Left:return`rotate(90 5 4)`;case X.Right:return`rotate(-90 5 4)`;default:return H(e)}}const Bt=b.polyline`
   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") {
-		(0, warning.default)((page | 0) === page, `\`page\` must be integer (${page})`);
-		(0, warning.default)((pageCount | 0) === pageCount, `\`pageCount\` must be integer (${pageCount})`);
-		(0, warning.default)((pageRangeDisplayed | 0) === pageRangeDisplayed, `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`);
-		(0, warning.default)(pageRangeDisplayed > 2, `\`windowSize\` must be greater than 2`);
-	}
-	const window$1 = (0, react.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
-	]);
-	(0, react.useDebugValue)(window$1);
-	return window$1;
-}
-var Pager_default = (0, react.memo)(function Pager({ page, pageCount, pageRangeDisplayed, onChange }) {
-	const window$1 = usePagerWindow(page, pageCount, pageRangeDisplayed);
-	const makeClickHandler = (0, react.useCallback)((value) => () => {
-		onChange(value);
-	}, [onChange]);
-	const hasNext = page < pageCount;
-	const hasPrev = page > 1;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PagerContainer, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleButton, {
-			type: "button",
-			hidden: !hasPrev,
-			disabled: !hasPrev,
-			onClick: makeClickHandler(Math.max(1, page - 1)),
-			noBackground: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WedgeIcon, {
-				size: 16,
-				direction: WedgeDirection.Left
-			})
-		}),
-		window$1.map((p) => p === "..." ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spacer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DotsIcon, { size: 20 }) }, p) : p === page ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleButton, {
-			type: "button",
-			"aria-current": true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, { children: p })
-		}, p) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleButton, {
-			type: "button",
-			onClick: makeClickHandler(p),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, { children: p })
-		}, p)),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleButton, {
-			type: "button",
-			hidden: !hasNext,
-			disabled: !hasNext,
-			onClick: makeClickHandler(Math.min(pageCount, page + 1)),
-			noBackground: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(PagerContainer, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link, {
-			to: makeUrl(Math.max(1, page - 1)),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleButton, {
-				hidden: !hasPrev,
-				"aria-disabled": !hasPrev,
-				noBackground: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WedgeIcon, {
-					size: 16,
-					direction: WedgeDirection.Left
-				})
-			})
-		}),
-		window$1.map((p) => p === "..." ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spacer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DotsIcon, {
-			size: 20,
-			subLink: true
-		}) }, p) : p === page ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleButton, {
-			type: "button",
-			"aria-current": true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, { children: p })
-		}, p) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link, {
-			to: makeUrl(p),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleButton, {
-				type: "button",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, { children: p })
-			})
-		}, p)),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link, {
-			to: makeUrl(Math.min(pageCount, page + 1)),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleButton, {
-				hidden: !hasNext,
-				"aria-disabled": !hasNext,
-				noBackground: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WedgeIcon, {
-					size: 16,
-					direction: WedgeDirection.Right
-				})
-			})
-		})
-	] });
-}
-const PagerContainer = defaultStyled.nav`
+`;function Vt(e,t,n=7){process.env.NODE_ENV!==`production`&&((0,v.default)((e|0)===e,`\`page\` must be integer (${e})`),(0,v.default)((t|0)===t,`\`pageCount\` must be integer (${t})`),(0,v.default)((n|0)===n,`\`pageRangeDisplayed\` must be integer (${n})`),(0,v.default)(n>2,"`windowSize` must be greater than 2"));let r=(0,u.useMemo)(()=>{let r=Math.min(t,Math.max(e+Math.floor(n/2),n));if(r<=n)return Array.from({length:1+r-1},(e,t)=>1+t);{let e=r-(n-1)+2;return[1,`...`,...Array.from({length:1+r-e},(t,n)=>e+n)]}},[e,t,n]);return(0,u.useDebugValue)(r),r}var Ht=(0,u.memo)(function({page:e,pageCount:t,pageRangeDisplayed:n,onChange:r}){let i=Vt(e,t,n),a=(0,u.useCallback)(e=>()=>{r(e)},[r]),o=e<t,s=e>1;return(0,p.jsxs)(Wt,{children:[(0,p.jsx)(Q,{type:`button`,hidden:!s,disabled:!s,onClick:a(Math.max(1,e-1)),noBackground:!0,children:(0,p.jsx)(Z,{size:16,direction:X.Left})}),i.map(t=>t===`...`?(0,p.jsx)(Gt,{children:(0,p.jsx)(Y,{size:20})},t):t===e?(0,p.jsx)(Q,{type:`button`,"aria-current":!0,children:(0,p.jsx)($,{children:t})},t):(0,p.jsx)(Q,{type:`button`,onClick:a(t),children:(0,p.jsx)($,{children:t})},t)),(0,p.jsx)(Q,{type:`button`,hidden:!o,disabled:!o,onClick:a(Math.min(t,e+1)),noBackground:!0,children:(0,p.jsx)(Z,{size:16,direction:X.Right})})]})});function Ut({page:e,pageCount:t,pageRangeDisplayed:n,makeUrl:r}){let{Link:i}=w(),a=Vt(e,t,n),o=e<t,s=e>1;return(0,p.jsxs)(Wt,{children:[(0,p.jsx)(i,{to:r(Math.max(1,e-1)),children:(0,p.jsx)(Q,{hidden:!s,"aria-disabled":!s,noBackground:!0,children:(0,p.jsx)(Z,{size:16,direction:X.Left})})}),a.map(t=>t===`...`?(0,p.jsx)(Gt,{children:(0,p.jsx)(Y,{size:20,subLink:!0})},t):t===e?(0,p.jsx)(Q,{type:`button`,"aria-current":!0,children:(0,p.jsx)($,{children:t})},t):(0,p.jsx)(i,{to:r(t),children:(0,p.jsx)(Q,{type:`button`,children:(0,p.jsx)($,{children:t})})},t)),(0,p.jsx)(i,{to:r(Math.min(t,e+1)),children:(0,p.jsx)(Q,{hidden:!o,"aria-disabled":!o,noBackground:!0,children:(0,p.jsx)(Z,{size:16,direction:X.Right})})})]})}const Wt=b.nav`
   display: flex;
   justify-content: center;
   align-items: center;
-`;
-const CircleButton = defaultStyled.button`
+`,Q=b.button`
   font-size: 1rem;
   line-height: calc(1em + 8px);
   text-decoration: none;
@@ -1704,76 +636,33 @@ const CircleButton = defaultStyled.button`
   border-radius: 48px;
 
   background: transparent;
-  color: ${({ theme: theme$1 }) => theme$1.color.text3};
+  color: ${({theme:e})=>e.color.text3};
 
   &:hover {
-    background: ${({ theme: theme$1 }) => theme$1.color.surface3};
-    color: ${({ theme: theme$1 }) => theme$1.color.text2};
+    background: ${({theme:e})=>e.color.surface3};
+    color: ${({theme:e})=>e.color.text2};
   }
 
   &[aria-current] {
-    background-color: ${({ theme: theme$1 }) => theme$1.color.surface6};
-    color: ${({ theme: theme$1 }) => theme$1.color.text5};
+    background-color: ${({theme:e})=>e.color.surface6};
+    color: ${({theme:e})=>e.color.text5};
   }
 
   &[aria-current]:hover {
-    background-color: ${({ theme: theme$1 }) => theme$1.color.surface6};
-    color: ${({ theme: theme$1 }) => theme$1.color.text5};
+    background-color: ${({theme:e})=>e.color.surface6};
+    color: ${({theme:e})=>e.color.text5};
   }
 
-  ${({ noBackground = false }) => noBackground && styledExportFix_exports.css`
+  ${({noBackground:e=!1})=>e&&y.css`
+      /* stylelint-disable-next-line no-duplicate-selectors */
       &:hover {
         background: transparent;
       }
     `}
-`;
-const Spacer = defaultStyled(CircleButton).attrs({
-	type: "button",
-	disabled: true
-})`
+`,Gt=b(Q).attrs({type:`button`,disabled:!0})`
   && {
-    color: ${({ theme: theme$1 }) => theme$1.color.text3};
+    color: ${({theme:e})=>e.color.text3};
     background: none;
   }
-`;
-const Text = "span";
-
-//#endregion
-exports.CancelLayoutItemBodyPadding = CancelLayoutItemBodyPadding;
-exports.Carousel = Carousel;
-exports.ComponentAbstraction = ComponentAbstraction;
-exports.Filter = Filter_default;
-exports.FilterButton = FilterButton;
-exports.FilterIconButton = FilterIconButton;
-exports.FilterLink = FilterLink;
-exports.HintText = HintText;
-exports.LAYOUT_ITEM_BODY_PADDING = LAYOUT_ITEM_BODY_PADDING;
-exports.Layout = Layout;
-exports.LayoutItem = LayoutItem;
-exports.LayoutItemBody = LayoutItemBody;
-exports.LayoutItemHeader = LayoutItemHeader;
-exports.LeftMenu = LeftMenu;
-exports.LeftMenuContent = LeftMenuContent;
-exports.LinkPager = LinkPager;
-exports.MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = MAIN_COLUMN_HORIZONTAL_MIN_MARGIN;
-exports.MenuListItem = MenuListItem;
-exports.MenuListItemContext = MenuListItemContext;
-exports.MenuListItemWithIcon = MenuListItemWithIcon;
-exports.MenuListLabel = MenuListLabel;
-exports.MenuListLinkItem = MenuListLinkItem;
-exports.MenuListLinkItemWithIcon = MenuListLinkItemWithIcon;
-exports.MenuListSpacer = MenuListSpacer;
-exports.Pager = Pager_default;
-exports.RESPONSIVE_LEFT_WIDTH = RESPONSIVE_LEFT_WIDTH;
-exports.RESPONSIVE_MAIN_MAX_WIDTH = RESPONSIVE_MAIN_MAX_WIDTH;
-exports.StyledCancelLayoutItemBodyPadding = StyledCancelLayoutItemBodyPadding;
-exports.StyledLayoutItemBody = StyledLayoutItemBody;
-exports.SwitchCheckbox = SwitchCheckbox_default;
-exports.TextEllipsis = TextEllipsis;
-exports.WithIcon = WithIcon_default;
-exports.useComponentAbstraction = useComponentAbstraction;
-exports.useElementSize = useElementSize;
-exports.useLayoutItemBodyPadding = useLayoutItemBodyPadding;
-exports.useMedia = useMedia;
-exports.useMediaScreen1 = useMediaScreen1;
+`,$=`span`;exports.CancelLayoutItemBodyPadding=Re,exports.Carousel=Mt,exports.ComponentAbstraction=C,exports.Filter=ne,exports.FilterButton=T,exports.FilterIconButton=E,exports.FilterLink=D,exports.HintText=le,exports.LAYOUT_ITEM_BODY_PADDING=F,exports.Layout=Ce,exports.LayoutItem=je,exports.LayoutItemBody=Fe,exports.LayoutItemHeader=Ne,exports.LeftMenu=tt,exports.LeftMenuContent=nt,exports.LinkPager=Ut,exports.MAIN_COLUMN_HORIZONTAL_MIN_MARGIN=72,exports.MenuListItem=L,exports.MenuListItemContext=Ue,exports.MenuListItemWithIcon=Xe,exports.MenuListLabel=et,exports.MenuListLinkItem=R,exports.MenuListLinkItemWithIcon=Ye,exports.MenuListSpacer=$e,exports.Pager=Ht,exports.RESPONSIVE_LEFT_WIDTH=ge,exports.RESPONSIVE_MAIN_MAX_WIDTH=_e,exports.StyledCancelLayoutItemBodyPadding=ze,exports.StyledLayoutItemBody=Ie,exports.SwitchCheckbox=at,exports.TextEllipsis=I,exports.WithIcon=dt,exports.useComponentAbstraction=w,exports.useElementSize=xe,exports.useLayoutItemBodyPadding=Le,exports.useMedia=ye,exports.useMediaScreen1=ve;
 //# sourceMappingURL=index.cjs.map