@charcoal-ui/react-sandbox 5.11.0-beta.0 → 5.11.0-beta.2

package/dist/index.cjs

@@ -1,5 +1,5 @@
 "use client";
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,n)=>{let r={};for(var i in e)t(r,i,{get:e[i],enumerable:!0});return n||t(r,Symbol.toStringTag,{value:`Module`}),r},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`),p=require(`react/jsx-runtime`),m=require(`@charcoal-ui/styled`),h=require(`@charcoal-ui/foundation`),g=require(`react-dom`);g=l(g);let ee=require(`@react-spring/web`),_=require(`warning`);_=l(_);var v=o({default:()=>y});c(v,require(`styled-components`));const y=typeof d.default==`function`?d.default:d.default.default,b={Link:u.forwardRef(function({to:e,children:t,...n},r){return(0,p.jsx)(`a`,{href:e,ref:r,...n,children:t})})},x=u.createContext(b);function te({children:e,components:t}){return(0,p.jsx)(x.Provider,{value:{...b,...t},children:e})}function S(){return(0,u.useContext)(x)}const C=u.forwardRef(function({onClick:e,children:t,active:n=!1,hover:r,reactive:i=!1},a){return(0,p.jsx)(O,{active:n,reactive:i,hover:r,onClick:n&&!i?void 0:e,ref:a,children:t})}),w=u.forwardRef(function({onClick:e,children:t,active:n=!1,hover:r,reactive:i=!1,width:a,height:o},s){return(0,p.jsx)(A,{active:n,reactive:i,hover:r,onClick:n&&!i?void 0:e,ref:s,buttonWidth:a,buttonHeight:o,children:t})}),T=u.forwardRef(function({onClick:e,children:t,active:n=!1,hover:r,reactive:i=!1,...a},o){let{Link:s}=S();return n&&!i?(0,p.jsx)(k,{active:!0,hover:r,ref:o,children:t}):(0,p.jsx)(s,{...a,onClick:e,children:(0,p.jsx)(k,{active:n,reactive:i,hover:r,ref:o,children:t})})}),E=v.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,n)=>{let r={};for(var i in e)t(r,i,{get:e[i],enumerable:!0});return n||t(r,Symbol.toStringTag,{value:`Module`}),r},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,1);let d=require(`styled-components`);d=l(d,1);let f=require(`@charcoal-ui/utils`),p=require(`react/jsx-runtime`),m=require(`@charcoal-ui/styled`),h=require(`@charcoal-ui/foundation`),g=require(`react-dom`);g=l(g,1);let _=require(`@react-spring/web`),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,x={Link:u.forwardRef(function({to:e,children:t,...n},r){return(0,p.jsx)(`a`,{href:e,ref:r,...n,children:t})})},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;
@@ -18,39 +18,39 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
     color: ${({theme:e})=>e.color.text2};
   }
 
-  ${({hover:e=!1})=>e&&v.css`
+  ${({hover:e=!1})=>e&&y.css`
       color: ${({theme:e})=>e.color.text2};
     `}
 
-  ${({active:e=!1})=>e&&v.css`
+  ${({active:e=!1})=>e&&y.css`
       background-color: ${({theme:e})=>e.color.surface3};
       color: ${({theme:e})=>e.color.text2};
     `}
 
-  ${({active:e=!1,reactive:t=!1})=>e&&!t&&v.css`
+  ${({active:e=!1,reactive:t=!1})=>e&&!t&&y.css`
       cursor: default;
     `}
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     padding: 5px 16px;
   }
-`,D=v.css`
+`,k=y.css`
   padding: 0;
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     padding: 0;
   }
-`,O=y.button`
-  ${E}
-`,k=y.span`
-  ${E}
-`,A=y(O)`
-  ${D};
+`,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;`}
-`,j=y.div`
+`,N=b.div`
   display: flex;
-`,M=(0,m.createTheme)(y);function N({size:e=24,viewBoxSize:t,currentColor:n,path:r,transform:i,fillRule:a,clipRule:o}){return(0,p.jsx)(ne,{viewBox:`0 0 ${t} ${t}`,size:e,currentColor:n,children:(0,p.jsx)(re,{path:r,transform:i,fillRule:a,clipRule:o})})}const ne=y.svg`
+`,P=(0,m.createTheme)(b);function F({size:e=24,viewBoxSize:t,currentColor:n,path:r,transform:i,fillRule:a,clipRule:o}){return(0,p.jsx)(ee,{viewBox:`0 0 ${t} ${t}`,size:e,currentColor:n,children:(0,p.jsx)(te,{path:r,transform:i,fillRule:a,clipRule:o})})}const ee=b.svg`
   stroke: none;
   fill: ${({currentColor:e=!1,theme:t})=>e?`currentColor`:t.color.text2};
   width: ${e=>e.size}px;
@@ -58,39 +58,39 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   line-height: 0;
   font-size: 0;
   vertical-align: middle;
-`,re=({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});function ie(){return(0,p.jsx)(N,{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)(ae,{d:`M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629
+`,te=({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});function ne(){return(0,p.jsx)(F,{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)(re,{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 ae=y.path`
+           6.75C7.44772 6.75 7 7.19772 7 7.75Z`})]})})}const re=b.path`
   fill: ${({theme:e})=>e.color.surface1};
   fill-rule: evenodd;
-`;function oe({children:e,context:t,className:n}){return(0,p.jsxs)(se,{className:n,...ue({children:e,context:t,className:n}),children:[(0,p.jsx)(ce,{children:(0,p.jsx)(ie,{})}),(0,p.jsx)(le,{children:e})]})}const se=y.div`
-  ${e=>M(t=>[t.bg.surface3,t.borderRadius(8),t.padding.vertical(e.default.vertical),t.padding.horizontal(e.default.horizontal)])}
+`;function ie({children:e,context:t,className:n}){return(0,p.jsxs)(ae,{className:n,...ce({children:e,context:t,className:n}),children:[(0,p.jsx)(oe,{children:(0,p.jsx)(ne,{})}),(0,p.jsx)(se,{children:e})]})}const ae=b.div`
+  ${e=>P(t=>[t.bg.surface3,t.borderRadius(8),t.padding.vertical(e.default.vertical),t.padding.horizontal(e.default.horizontal)])}
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
-    ${e=>M(t=>[t.padding.vertical(e.screen1.vertical),t.padding.horizontal(e.screen1.horizontal)])}
+    ${e=>P(t=>[t.padding.vertical(e.screen1.vertical),t.padding.horizontal(e.screen1.horizontal)])}
   }
 
   display: flex;
   align-items: flex-start;
-  ${e=>e.context===`page`&&v.css`
+  ${e=>e.context===`page`&&y.css`
       justify-content: center;
     `}
-`,ce=y.div`
+`,oe=b.div`
   display: flex;
   align-items: center;
   color: ${e=>e.theme.color.text4};
   height: 22px;
   margin: -4px 4px -4px 0;
-`,le=y.p`
-  ${M(e=>[e.font.text2,e.typography(14)])}
+`,se=b.p`
+  ${P(e=>[e.font.text2,e.typography(14)])}
   margin: 0;
   min-width: 0;
   overflow-wrap: break-word;
-`;function ue(e){return{...e,...de(e.context)}}function de(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 fe=(0,h.columnSystem)(2,h.COLUMN_UNIT,h.GUTTER_UNIT)+h.GUTTER_UNIT,pe=(0,h.columnSystem)(12,h.COLUMN_UNIT,h.GUTTER_UNIT);function P(){return me((0,f.maxWidth)((0,v.useTheme)().breakpoint.screen1))}function me(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 he(e){return e===null?void 0:e.getBoundingClientRect()}function ge(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(he(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(he(e.current))},t),(0,u.useDebugValue)(n),n}function _e(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 F=u.createContext({wide:!1,center:!1,withLeft:!1});function ve({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)(xe,{children:[(0,p.jsxs)(F.Provider,{value:o,children:[o.withLeft&&(0,p.jsx)(Se,{children:e}),(0,p.jsxs)(Ce,{center:r,children:[n!=null&&(0,p.jsx)(we,{children:n}),a&&(0,p.jsx)(ye,{children:e}),(0,p.jsx)(Te,{children:t})]})]}),(0,p.jsx)(be,{})]})}const ye=y.div`
+`;function ce(e){return{...e,...le(e.context)}}function le(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 ue=(0,h.columnSystem)(2,h.COLUMN_UNIT,h.GUTTER_UNIT)+h.GUTTER_UNIT,de=(0,h.columnSystem)(12,h.COLUMN_UNIT,h.GUTTER_UNIT);function fe(){return pe((0,f.maxWidth)((0,y.useTheme)().breakpoint.screen1))}function pe(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 I(e){return e===null?void 0:e.getBoundingClientRect()}function me(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(I(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(I(e.current))},t),(0,u.useDebugValue)(n),n}function he(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 L=u.createContext({wide:!1,center:!1,withLeft:!1});function ge({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)(ye,{children:[(0,p.jsxs)(L.Provider,{value:o,children:[o.withLeft&&(0,p.jsx)(be,{children:e}),(0,p.jsxs)(xe,{center:r,children:[n!=null&&(0,p.jsx)(Se,{children:n}),a&&(0,p.jsx)(_e,{children:e}),(0,p.jsx)(Ce,{children:t})]})]}),(0,p.jsx)(ve,{})]})}const _e=b.div`
   margin-bottom: 40px;
   overflow-x: auto;
   word-break: keep-all;
@@ -101,7 +101,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
     padding-bottom: 16px;
     background-color: ${({theme:e})=>e.color.surface2};
   }
-`,be=v.createGlobalStyle`
+`,ve=y.createGlobalStyle`
   :root {
     background-color: ${({theme:e})=>e.color.background2};
 
@@ -109,26 +109,26 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
       background-color: ${({theme:e})=>e.color.background1};
     }
   }
-`,xe=y.div`
+`,ye=b.div`
   display: flex;
   background-color: ${({theme:e})=>e.color.background2};
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     background-color: ${({theme:e})=>e.color.background1};
   }
-`,Se=y.div`
-  min-width: ${fe}px;
+`,be=b.div`
+  min-width: ${ue}px;
   padding: 40px 0 40px ${h.GUTTER_UNIT}px;
   box-sizing: border-box;
 
   @media ${({theme:e})=>e.breakpoint.screen3} {
     display: none;
   }
-`,Ce=y.div`
+`,xe=b.div`
   flex-grow: 1;
   /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
   min-width: 0;
-  max-width: ${e=>e.center?(0,h.columnSystem)(6,h.COLUMN_UNIT,h.GUTTER_UNIT):pe}px;
+  max-width: ${e=>e.center?(0,h.columnSystem)(6,h.COLUMN_UNIT,h.GUTTER_UNIT):de}px;
   padding: 40px ${72}px;
   margin: 0 auto;
   display: flex;
@@ -137,7 +137,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     padding: 0;
   }
-`,we=y.div`
+`,Se=b.div`
   font-weight: bold;
   margin-bottom: 12px;
   font-size: 20px;
@@ -153,7 +153,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
     justify-content: center;
     background-color: ${({theme:e})=>e.color.surface2};
   }
-`,Te=y.div`
+`,Ce=b.div`
   display: grid;
   gap: ${h.GUTTER_UNIT}px;
   grid-template-columns: 1fr;
@@ -165,7 +165,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
     background-color: ${({theme:e})=>e.color.background1};
     padding-bottom: 60px;
   }
-`,Ee=u.forwardRef(function({span:e,children:t},n){let{withLeft:r}=(0,u.useContext)(F);return(0,p.jsx)(De,{span:e,withLeft:r,ref:n,children:t})}),De=y.div`
+`,we=u.forwardRef(function({span:e,children:t},n){let{withLeft:r}=(0,u.useContext)(L);return(0,p.jsx)(Te,{span:e,withLeft:r,ref:n,children:t})}),Te=b.div`
   grid-column-start: auto;
   grid-column-end: span ${e=>e.span};
   border-radius: 24px;
@@ -175,20 +175,20 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   min-width: 0;
 
   @media ${e=>e.withLeft?e.theme.breakpoint.screen4:e.theme.breakpoint.screen3} {
-    ${e=>e.span>2&&v.css`
+    ${e=>e.span>2&&y.css`
         grid-column-end: span 2;
       `}
   }
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
-    ${e=>e.span>1&&v.css`
+    ${e=>e.span>1&&y.css`
         grid-column-end: span 1;
       `}
 
     border-radius: 0;
     padding-bottom: 40px;
   }
-`;function Oe({children:e}){let{wide:t,center:n}=(0,u.useContext)(F);return(0,p.jsx)(ke,{wide:t,center:n,children:e})}const ke=y.div`
+`;function Ee({children:e}){let{wide:t,center:n}=(0,u.useContext)(L);return(0,p.jsx)(De,{wide:t,center:n,children:e})}const De=b.div`
   padding: 0 ${e=>e.wide?40:24}px;
   height: ${e=>e.wide?64:48}px;
   display: grid;
@@ -199,7 +199,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   background-color: ${({theme:e})=>e.color.surface2};
   color: ${({theme:e})=>e.color.text2};
   border-radius: 24px 24px 0 0;
-  ${e=>e.center&&v.css`
+  ${e=>e.center&&y.css`
       justify-content: center;
     `}
 
@@ -209,45 +209,45 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
     background: none;
     overflow-x: auto;
     border-radius: unset;
-    ${e=>e.wide&&v.css`
+    ${e=>e.wide&&y.css`
         height: 48px;
         margin-top: 0;
       `}
   }
-`,I={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 Ae({children:e,horizontal:t=!1,narrow:n=!1}){let{wide:r}=(0,u.useContext)(F);return(0,p.jsx)(je,{wide:r,horizontal:t,narrow:n,children:e})}const je=y.div`
-  padding: ${e=>e.narrow?`${I.narrow.yTop}px ${e.horizontal?0:I.narrow.x}px ${I.narrow.yBottom}px`:e.wide?`${e.horizontal?0:I.wide.y}px ${I.wide.x}px`:`${e.horizontal?0:I.default.y}px ${I.default.x}px`};
+`,R={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 Oe({children:e,horizontal:t=!1,narrow:n=!1}){let{wide:r}=(0,u.useContext)(L);return(0,p.jsx)(ke,{wide:r,horizontal:t,narrow:n,children:e})}const ke=b.div`
+  padding: ${e=>e.narrow?`${R.narrow.yTop}px ${e.horizontal?0:R.narrow.x}px ${R.narrow.yBottom}px`:e.wide?`${e.horizontal?0:R.wide.y}px ${R.wide.x}px`:`${e.horizontal?0:R.default.y}px ${R.default.x}px`};
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
-    padding: ${e=>e.narrow?`${I.narrowColumn1.yTop}px ${e.horizontal?0:I.narrowColumn1.x}px ${I.narrowColumn1.yBottom}px`:`${I.column1.y}px ${I.column1.x}px 0`};
+    padding: ${e=>e.narrow?`${R.narrowColumn1.yTop}px ${e.horizontal?0:R.narrowColumn1.x}px ${R.narrowColumn1.yBottom}px`:`${R.column1.y}px ${R.column1.x}px 0`};
   }
 
   width: 100%;
   box-sizing: border-box;
-`;function Me(){let{wide:e}=(0,u.useContext)(F);return P()?I.column1:e?I.wide:I.default}function Ne({children:e,cancelTop:t}){let{wide:n}=(0,u.useContext)(F);return(0,p.jsx)(Pe,{wide:n,cancelTop:t,children:e})}const Pe=y.div`
-  margin: 0 -${e=>e.wide?I.wide.x:I.default.x}px;
-  margin-top: -${({cancelTop:e=!1,wide:t})=>e?t?I.wide.y:I.default.y:0}px;
+`;function Ae(){let{wide:e}=(0,u.useContext)(L);return fe()?R.column1:e?R.wide:R.default}function je({children:e,cancelTop:t}){let{wide:n}=(0,u.useContext)(L);return(0,p.jsx)(Me,{wide:n,cancelTop:t,children:e})}const Me=b.div`
+  margin: 0 -${e=>e.wide?R.wide.x:R.default.x}px;
+  margin-top: -${({cancelTop:e=!1,wide:t})=>e?t?R.wide.y:R.default.y:0}px;
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
-    margin: 0 -${I.column1.x}px;
-    margin-top: -${({cancelTop:e=!1})=>e?I.column1.x:0}px;
+    margin: 0 -${R.column1.x}px;
+    margin-top: -${({cancelTop:e=!1})=>e?R.column1.x:0}px;
   }
-`,Fe=e=>(0,u.isValidElement)(e)&&!!e.props.children,Ie=e=>e==null||typeof e==`boolean`||JSON.stringify(e)===`{}`?``:e.toString(),Le=e=>!Array.isArray(e)&&!(0,u.isValidElement)(e)?Ie(e):u.Children.toArray(e).reduce((e,t)=>{let n=``;return n=(0,u.isValidElement)(t)&&Fe(t)?Le(t.props.children):(0,u.isValidElement)(t)&&!Fe(t)?``:Ie(t),e.concat(n)},``),L=y.div.attrs(({children:e,title:t=Le(e)})=>({title:t===``?void 0:t}))`
+`,Ne=e=>(0,u.isValidElement)(e)&&!!e.props.children,Pe=e=>e==null||typeof e==`boolean`||JSON.stringify(e)===`{}`?``:e.toString(),Fe=e=>!Array.isArray(e)&&!(0,u.isValidElement)(e)?Pe(e):u.Children.toArray(e).reduce((e,t)=>{let n=``;return n=(0,u.isValidElement)(t)&&Ne(t)?Fe(t.props.children):(0,u.isValidElement)(t)&&!Ne(t)?``:Pe(t),e.concat(n)},``),z=b.div.attrs(({children:e,title:t=Fe(e)})=>({title:t===``?void 0:t}))`
   overflow: hidden;
   line-height: ${e=>e.lineHeight}px;
   /* For english */
   overflow-wrap: break-word;
 
-  ${({lineLimit:e=1,lineHeight:t})=>e===1?v.css`
+  ${({lineLimit:e=1,lineHeight:t})=>e===1?y.css`
           text-overflow: ellipsis;
           white-space: nowrap;
-        `:v.css`
+        `:y.css`
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: ${e};
           /* Fallback for -webkit-line-clamp */
           max-height: ${t*e}px;
         `}
-`,Re=u.createContext({padding:24});function R({primary:e,secondary:t,onClick:n,disabled:r=!1,noHover:i=!1,gtmClass:a,children:o}){let{padding:s}=(0,u.useContext)(Re);return(0,p.jsxs)(ze,{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)(Be,{children:[(0,p.jsx)(Ve,{children:(0,p.jsx)(L,{lineHeight:22,lineLimit:1,children:e})}),t!==void 0&&(0,p.jsx)(He,{children:(0,p.jsx)(L,{lineHeight:22,lineLimit:1,children:t})})]}),o]})}const ze=y.div`
+`,B=u.createContext({padding:24});function V({primary:e,secondary:t,onClick:n,disabled:r=!1,noHover:i=!1,gtmClass:a,children:o}){let{padding:s}=(0,u.useContext)(B);return(0,p.jsxs)(Ie,{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)(Le,{children:[(0,p.jsx)(Re,{children:(0,p.jsx)(z,{lineHeight:22,lineLimit:1,children:e})}),t!==void 0&&(0,p.jsx)(ze,{children:(0,p.jsx)(z,{lineHeight:22,lineLimit:1,children:t})})]}),o]})}const Ie=b.div`
   display: flex;
   height: ${e=>e.hasSubLabel?56:40}px;
   align-items: center;
@@ -258,12 +258,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   transition: 0.2s background-color;
 
   &:hover {
-    ${e=>!e.noHover&&v.css`
+    ${e=>!e.noHover&&y.css`
         background-color: ${({theme:e})=>e.color.surface3};
       `}
   }
 
-  ${M(e=>e.disabled)}
+  ${P(e=>e.disabled)}
 
   ${f.disabledSelector} {
     cursor: default;
@@ -273,42 +273,42 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
       background-color: unset;
     }
   }
-`,Be=y.div`
+`,Le=b.div`
   display: flex;
   flex-direction: column;
-`,Ve=y.div`
+`,Re=b.div`
   color: ${e=>e.theme.color.text2};
   line-height: 22px;
   font-size: 14px;
   display: grid;
-`,He=y.div`
+`,ze=b.div`
   color: ${e=>e.theme.color.text3};
   line-height: 18px;
   font-size: 10px;
-`;function z({link:e,onClick:t,disabled:n=!1,primary:r,secondary:i,gtmClass:a,noHover:o,children:s,...c}){let{Link:l}=S(),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)(R,{...u})}):(0,p.jsx)(Ue,{as:l,to:e,onClick:t,...c,children:(0,p.jsx)(R,{onClick:()=>void 0,...u})})}const Ue=y.a`
+`;function H({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)(V,{...u})}):(0,p.jsx)(Be,{as:l,to:e,onClick:t,...c,children:(0,p.jsx)(V,{onClick:()=>void 0,...u})})}const Be=b.a`
   display: block;
-`;function We({icon:e,primary:t,...n}){return(0,p.jsx)(z,{primary:(0,p.jsxs)(Ke,{children:[(0,p.jsx)(qe,{children:e}),t]}),...n})}function Ge({icon:e,primary:t,...n}){return(0,p.jsx)(R,{primary:(0,p.jsxs)(Ke,{children:[(0,p.jsx)(qe,{children:e}),t]}),...n})}const Ke=y.div`
+`;function Ve({icon:e,primary:t,...n}){return(0,p.jsx)(H,{primary:(0,p.jsxs)(Ue,{children:[(0,p.jsx)(We,{children:e}),t]}),...n})}function He({icon:e,primary:t,...n}){return(0,p.jsx)(V,{primary:(0,p.jsxs)(Ue,{children:[(0,p.jsx)(We,{children:e}),t]}),...n})}const Ue=b.div`
   display: grid;
   gap: 8px;
   grid-auto-flow: column;
   align-items: center;
-`,qe=y.div`
+`,We=b.div`
   color: ${({theme:e})=>e.color.text3};
   display: flex;
-`,Je=y.div`
+`,Ge=b.div`
   height: 24px;
-`,Ye=y.div`
+`,Ke=b.div`
   padding: 0 16px;
   font-size: 12px;
   line-height: 16px;
   color: ${({theme:e})=>e.color.text3};
   margin-top: -2px;
   margin-bottom: 6px;
-`;function Xe({links:e,active:t}){let{Link:n}=S();return(0,p.jsx)(Qe,{children:e.map((e,r)=>(0,p.jsx)(n,{to:e.to,children:(0,p.jsx)($e,{"aria-current":e.id===t||void 0,children:e.text})},r))})}function Ze({links:e}){return(0,p.jsx)(p.Fragment,{children:e.map((e,t)=>(0,p.jsx)(z,{link:e.to,primary:e.text},t))})}const Qe=y.div`
+`;function qe({links:e,active:t}){let{Link:n}=w();return(0,p.jsx)(Ye,{children:e.map((e,r)=>(0,p.jsx)(n,{to:e.to,children:(0,p.jsx)(Xe,{"aria-current":e.id===t||void 0,children:e.text})},r))})}function Je({links:e}){return(0,p.jsx)(p.Fragment,{children:e.map((e,t)=>(0,p.jsx)(H,{link:e.to,primary:e.text},t))})}const Ye=b.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`,$e=y.div`
+`,Xe=b.div`
   display: flex;
   align-items: center;
   color: ${({theme:e})=>e.color.text3};
@@ -327,20 +327,20 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
     color: ${({theme:e})=>e.color.text2};
     background-color: ${({theme:e})=>e.color.surface3};
   }
-`;var et=u.forwardRef(function({gtmClass:e,flex:t=!1,rowReverse:n=!1,children:r,disabled:i,...a},o){return(0,p.jsxs)(nt,{className:e===void 0?``:`gtm-${e}`,flex:t,rowReverse:n,"aria-disabled":i,children:[(0,p.jsxs)(rt,{children:[(0,p.jsx)(at,{...a,disabled:i,ref:o}),(0,p.jsx)(B,{children:(0,p.jsx)(it,{})})]}),r!=null&&(0,p.jsx)(tt,{rowReverse:n,children:r})]})});const tt=y.span`
-  ${e=>e.rowReverse?v.css`
+`;var Ze=u.forwardRef(function({gtmClass:e,flex:t=!1,rowReverse:n=!1,children:r,disabled:i,...a},o){return(0,p.jsxs)($e,{className:e===void 0?``:`gtm-${e}`,flex:t,rowReverse:n,"aria-disabled":i,children:[(0,p.jsxs)(et,{children:[(0,p.jsx)(nt,{...a,disabled:i,ref:o}),(0,p.jsx)(U,{children:(0,p.jsx)(tt,{})})]}),r!=null&&(0,p.jsx)(Qe,{rowReverse:n,children:r})]})});const Qe=b.span`
+  ${e=>e.rowReverse?y.css`
           margin-right: 8px;
-        `:v.css`
+        `:y.css`
           margin-left: 8px;
         `}
-`,nt=y.label`
+`,$e=b.label`
   display: inline-flex;
   align-items: center;
-  ${({flex:e})=>e&&v.css`
+  ${({flex:e})=>e&&y.css`
       display: flex;
       justify-content: space-between;
     `}
-  ${({rowReverse:e})=>v.css`
+  ${({rowReverse:e})=>y.css`
     flex-direction: ${e?`row-reverse`:`row`};
   `}
   cursor: pointer;
@@ -349,11 +349,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   &[aria-disabled='true'] {
     cursor: auto;
   }
-`,rt=y.span`
+`,et=b.span`
   display: inline-flex;
   position: relative;
   z-index: 0;
-`,B=y.div`
+`,U=b.div`
   position: relative;
   box-sizing: border-box;
   width: 28px;
@@ -364,7 +364,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   transition:
     box-shadow 0.2s,
     background-color 0.2s;
-`,it=y.div`
+`,tt=b.div`
   position: absolute;
   display: block;
   top: 0;
@@ -375,7 +375,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   border-radius: 50%;
   transform: translateX(0);
   transition: transform 0.2s;
-`,at=y.input.attrs({type:`checkbox`})`
+`,nt=b.input.attrs({type:`checkbox`})`
   position: absolute;
   /* NOTE: this is contained by the GraphicCheckboxOuter */
   z-index: 1;
@@ -391,10 +391,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   cursor: pointer;
 
   &:checked {
-    ~ ${B} {
+    ~ ${U} {
       background-color: ${({theme:e})=>e.color.brand};
 
-      ${it} {
+      ${tt} {
         transform: translateX(12px);
       }
     }
@@ -403,52 +403,52 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   &:disabled {
     cursor: auto;
 
-    ~ ${B} {
+    ~ ${U} {
       opacity: ${({theme:e})=>e.elementEffect.disabled.opacity};
     }
   }
 
   &:not(:disabled):focus {
-    ~ ${B} {
+    ~ ${U} {
       box-shadow: 0 0 0 4px
         ${({theme:e})=>(0,f.applyEffect)(e.color.brand,e.elementEffect.disabled)};
     }
   }
-`;var ot=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)(lt,{show:n,pre:r,children:t}):(0,p.jsx)(mt,{width:i,show:n,pre:r,children:(0,p.jsx)(ht,{children:t})}):(0,p.jsx)(ft,{show:n,pre:r,children:(0,p.jsx)(pt,{children:t})});return(0,p.jsxs)(st,{children:[r&&s,(0,p.jsx)(ct,{fixed:o,children:e}),!r&&s]})});const st=y.div`
+`;var rt=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)(ot,{show:n,pre:r,children:t}):(0,p.jsx)(dt,{width:i,show:n,pre:r,children:(0,p.jsx)(ft,{children:t})}):(0,p.jsx)(lt,{show:n,pre:r,children:(0,p.jsx)(ut,{children:t})});return(0,p.jsxs)(it,{children:[r&&s,(0,p.jsx)(at,{fixed:o,children:e}),!r&&s]})});const it=b.div`
   display: flex;
   align-items: center;
-`,ct=y.div`
-  ${e=>!e.fixed&&v.css`
+`,at=b.div`
+  ${e=>!e.fixed&&y.css`
       min-width: 0;
       overflow: hidden;
     `}
   white-space: nowrap;
   text-overflow: ellipsis;
-`;function lt({children:e,show:t,pre:n}){let r=(0,u.useRef)(null);return(0,p.jsx)(mt,{width:ge(r,[null])?.width??0,show:t,pre:n,children:(0,p.jsx)(ht,{ref:r,children:e})})}const ut=v.css`
+`;function ot({children:e,show:t,pre:n}){let r=(0,u.useRef)(null);return(0,p.jsx)(dt,{width:me(r,[null])?.width??0,show:t,pre:n,children:(0,p.jsx)(ft,{ref:r,children:e})})}const st=y.css`
   > svg {
     display: block;
   }
-`,dt=v.css`
-  ${e=>e.show===`collapse`?v.css`
+`,ct=y.css`
+  ${e=>e.show===`collapse`?y.css`
           display: none;
-        `:v.css`
+        `:y.css`
           visibility: ${e.show?`visible`:`hidden`};
         `};
-  ${e=>e.pre?v.css`
+  ${e=>e.pre?y.css`
           margin-right: 4px;
-        `:v.css`
+        `:y.css`
           margin-left: 4px;
         `}
-`,ft=y.div`
+`,lt=b.div`
   display: flex;
   align-items: center;
 
-  ${dt}
-`,pt=y.div`
+  ${ct}
+`,ut=b.div`
   display: inline-flex;
 
-  ${ut}
-`,mt=y.div`
+  ${st}
+`,dt=b.div`
   display: flex;
   position: relative;
   /* Iconをline-heightに関与させない */
@@ -456,18 +456,18 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   /* 横方向の領域は確保する */
   width: ${e=>e.width}px;
 
-  ${dt}
-`,ht=y.div`
+  ${ct}
+`,ft=b.div`
   display: inline-flex;
   position: absolute;
   transform: translateY(-50%);
 
-  ${ut}
-`;var V;function gt(){if(V!==void 0)return V;V=!1;try{let t=Object.defineProperty({},`passive`,{get(){return V=!0}});window.addEventListener(`test`,e,t),window.removeEventListener(`test`,e)}catch{}return V;function e(){}}const _t=()=>navigator.userAgent.includes(`Edge/`),H=typeof window<`u`?u.useLayoutEffect:u.useEffect;function U(e){throw Error(arguments.length===0?`unreachable`:`unreachable (${JSON.stringify(e)})`)}let W=function(e){return e.Up=`up`,e.Down=`down`,e.Left=`left`,e.Right=`right`,e}({});function vt({direction:e}){return(0,p.jsx)(N,{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:yt(e)})}function yt(e){switch(e){case W.Up:return`rotate(270 12 12)`;case W.Down:return`rotate(90 12 12)`;case W.Left:return`rotate(180 12 12)`;case W.Right:return;default:return U(e)}}let G=function(e){return e.Right=`right`,e.Left=`left`,e}({});const bt=v.css`
+  ${st}
+`;var W;function pt(){if(W!==void 0)return W;W=!1;try{let t=Object.defineProperty({},`passive`,{get(){return W=!0}});window.addEventListener(`test`,e,t),window.removeEventListener(`test`,e)}catch{}return W;function e(){}}const mt=()=>navigator.userAgent.includes(`Edge/`),G=typeof window<`u`?u.useLayoutEffect:u.useEffect;function K(e){throw Error(arguments.length===0?`unreachable`:`unreachable (${JSON.stringify(e)})`)}function ht({direction:e}){return(0,p.jsx)(F,{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:gt(e)})}function gt(e){switch(e){case`up`:return`rotate(270 12 12)`;case`down`:return`rotate(90 12 12)`;case`left`:return`rotate(180 12 12)`;case`right`:return;default:return K(e)}}const _t=y.css`
   @media (hover: none) and (pointer: coarse) {
     display: none;
   }
-`;function K({direction:e,show:t,offset:n=0,padding:r=0,bottomOffset:i=0,gradient:a=!1,onClick:o}){let s=e===G.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)(xt,{type:`button`,onClick:o,hide:!t,style:s,children:(0,p.jsx)(q,{children:(0,p.jsx)(vt,{direction:e===G.Right?W.Right:e===G.Left?W.Left:U()})})})}const q=y.div`
+`;function q({direction:e,show:t,offset:n=0,padding:r=0,bottomOffset:i=0,gradient:a=!1,onClick:o}){let s=e===`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)(vt,{type:`button`,onClick:o,hide:!t,style:s,children:(0,p.jsx)(J,{children:(0,p.jsx)(ht,{direction:e===`right`?`right`:e===`left`?`left`:K()})})})}const J=b.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -481,7 +481,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
     0.2s background-color,
     0.2s color;
   color: ${({theme:e})=>e.color.text5};
-`;var xt=y(y.button`
+`;var vt=b(b.button`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -500,22 +500,22 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */
   z-index: 1;
 
-  &:hover ${q} {
+  &:hover ${J} {
     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 ${q} {
+  &:active ${J} {
     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)};
   }
 
-  ${e=>e.hide&&v.css`
+  ${e=>e.hide&&y.css`
       visibility: hidden;
       opacity: 0;
       pointer-events: none;
     `}
-`)`${bt}`;function St({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]=_e(0),g=(0,u.useRef)(!1),[_,v]=(0,u.useState)(0),[y,b]=(0,u.useState)(!1),[x,te]=(0,u.useState)(!1),[S,C]=(0,ee.useSpring)(()=>({from:{scroll:0}})),w=(0,u.useRef)(null),T=(0,u.useRef)(null),E=(0,u.useRef)(null),D=(0,u.useCallback)(()=>{if(T.current===null)return;let{clientWidth:e}=T.current,t=Math.min(m+e*d,_);h(t,!0),C({scroll:t,from:{scroll:m},reset:!g.current}),g.current=!0},[g,_,m,C,d,h]),O=(0,u.useCallback)(()=>{if(T.current===null)return;let{clientWidth:e}=T.current,t=Math.max(m-e*d,0);h(t,!0),C({scroll:t,from:{scroll:m},reset:!g.current}),g.current=!0},[g,m,C,d,h]);(0,u.useEffect)(()=>{let e=m>0,t=m<_&&_>0;(e!==y||t!==x)&&(b(e),te(t),l?.(e||t))},[y,_,l,x,m]);let k=(0,u.useCallback)(()=>{if(w.current===null)return;g.current&&=(S.scroll.stop(),!1);let e=w.current.scrollLeft;h(e)},[g,h,S]),A=(0,u.useCallback)(()=>{if(w.current===null)return;let{clientWidth:e,scrollWidth:t}=w.current;v(t-e),o&&o(e)},[o]);H(()=>{let e=w.current,t=E.current;if(e===null||t===null)return;e.addEventListener(`wheel`,k,gt()&&{passive:!0});let n=new ResizeObserver(A);n.observe(e);let r=new ResizeObserver(A);return r.observe(t),()=>{e.removeEventListener(`wheel`,k),n.disconnect(),r.disconnect()}},[A,k]),H(()=>{if(r!==`left`||i!==0){let e=w.current;if(e!==null){let t=Math.max(0,Math.min(r===`left`&&i>0?i:r===`center`?_/2+i:r===`right`&&i<=_?_-i/2:0,_));e.scrollLeft=t,h(t,!0)}}},[w.current]);let j=(0,u.useCallback)(()=>{w.current!==null&&a&&a(w.current.scrollLeft)},[a]),[M,N]=(0,u.useState)(!1);if(H(()=>{_t()&&N(!0)},[]),!M&&f.hasGradient===!0){let r=f.fadeInGradient??!1,i=!r;return(0,p.jsxs)(Ct,{ref:T,children:[(0,p.jsx)(Tt,{fadeInGradient:r,children:(0,p.jsx)(Et,{children:(0,p.jsx)(Dt,{show:i||m>0,children:(0,p.jsx)(wt,{ref:w,scrollLeft:S.scroll,onScroll:j,children:(0,p.jsx)(J,{ref:E,centerItems:c,children:s})})})})}),(0,p.jsxs)(Y,{children:[(0,p.jsx)(K,{direction:G.Left,show:y,offset:e,bottomOffset:n,padding:t,gradient:i,onClick:O}),(0,p.jsx)(K,{direction:G.Right,show:x,offset:e,bottomOffset:n,padding:t,gradient:!0,onClick:D})]})]})}return(0,p.jsxs)(Ct,{ref:T,children:[(0,p.jsx)(wt,{ref:w,scrollLeft:S.scroll,onScroll:j,children:(0,p.jsx)(J,{ref:E,centerItems:c,children:s})}),(0,p.jsxs)(Y,{children:[(0,p.jsx)(K,{direction:G.Left,show:y,offset:e,bottomOffset:n,padding:t,onClick:O}),(0,p.jsx)(K,{direction:G.Right,show:x,offset:e,bottomOffset:n,padding:t,onClick:D})]})]})}const J=y.ul`
+`)`${_t}`;function yt({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]=he(0),g=(0,u.useRef)(!1),[v,y]=(0,u.useState)(0),[b,x]=(0,u.useState)(!1),[S,C]=(0,u.useState)(!1),[w,T]=(0,_.useSpring)(()=>({from:{scroll:0}})),E=(0,u.useRef)(null),D=(0,u.useRef)(null),O=(0,u.useRef)(null),k=(0,u.useCallback)(()=>{if(D.current===null)return;let{clientWidth:e}=D.current,t=Math.min(m+e*d,v);h(t,!0),T({scroll:t,from:{scroll:m},reset:!g.current}),g.current=!0},[g,v,m,T,d,h]),A=(0,u.useCallback)(()=>{if(D.current===null)return;let{clientWidth:e}=D.current,t=Math.max(m-e*d,0);h(t,!0),T({scroll:t,from:{scroll:m},reset:!g.current}),g.current=!0},[g,m,T,d,h]);(0,u.useEffect)(()=>{let e=m>0,t=m<v&&v>0;(e!==b||t!==S)&&(x(e),C(t),l?.(e||t))},[b,v,l,S,m]);let j=(0,u.useCallback)(()=>{if(E.current===null)return;g.current&&=(w.scroll.stop(),!1);let e=E.current.scrollLeft;h(e)},[g,h,w]),M=(0,u.useCallback)(()=>{if(E.current===null)return;let{clientWidth:e,scrollWidth:t}=E.current;y(t-e),o&&o(e)},[o]);G(()=>{let e=E.current,t=O.current;if(e===null||t===null)return;e.addEventListener(`wheel`,j,pt()&&{passive:!0});let n=new ResizeObserver(M);n.observe(e);let r=new ResizeObserver(M);return r.observe(t),()=>{e.removeEventListener(`wheel`,j),n.disconnect(),r.disconnect()}},[M,j]),G(()=>{if(r!==`left`||i!==0){let e=E.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)}}},[E.current]);let N=(0,u.useCallback)(()=>{E.current!==null&&a&&a(E.current.scrollLeft)},[a]),[P,F]=(0,u.useState)(!1);if(G(()=>{mt()&&F(!0)},[]),!P&&f.hasGradient===!0){let r=f.fadeInGradient??!1,i=!r;return(0,p.jsxs)(bt,{ref:D,children:[(0,p.jsx)(St,{fadeInGradient:r,children:(0,p.jsx)(Ct,{children:(0,p.jsx)(wt,{show:i||m>0,children:(0,p.jsx)(xt,{ref:E,scrollLeft:w.scroll,onScroll:N,children:(0,p.jsx)(Y,{ref:O,centerItems:c,children:s})})})})}),(0,p.jsxs)(X,{children:[(0,p.jsx)(q,{direction:`left`,show:b,offset:e,bottomOffset:n,padding:t,gradient:i,onClick:A}),(0,p.jsx)(q,{direction:`right`,show:S,offset:e,bottomOffset:n,padding:t,gradient:!0,onClick:k})]})]})}return(0,p.jsxs)(bt,{ref:D,children:[(0,p.jsx)(xt,{ref:E,scrollLeft:w.scroll,onScroll:N,children:(0,p.jsx)(Y,{ref:O,centerItems:c,children:s})}),(0,p.jsxs)(X,{children:[(0,p.jsx)(q,{direction:`left`,show:b,offset:e,bottomOffset:n,padding:t,onClick:A}),(0,p.jsx)(q,{direction:`right`,show:S,offset:e,bottomOffset:n,padding:t,onClick:k})]})]})}const Y=b.ul`
   vertical-align: top;
   overflow: hidden;
   list-style: none;
@@ -525,26 +525,26 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   min-width: 100%;
   box-sizing: border-box;
 
-  ${({centerItems:e=!1})=>e?v.css`
+  ${({centerItems:e=!1})=>e?y.css`
           display: flex;
           width: max-content;
           margin: 0 auto;
-        `:v.css`
+        `:y.css`
           display: inline-flex;
           margin: 0;
         `}
-`,Y=y.div`
+`,X=b.div`
   opacity: 0;
   transition: 0.4s opacity;
-`,Ct=y.div`
-  &:hover ${Y} {
+`,bt=b.div`
+  &:hover ${X} {
     opacity: 1;
   }
 
   /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */
   position: relative;
   z-index: 0;
-`,wt=y(ee.animated.div)`
+`,xt=b(_.animated.div)`
   overflow-x: auto;
   padding: 0;
   margin: 0;
@@ -554,28 +554,28 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   }
 
   scrollbar-width: none;
-`,Tt=y.div`
+`,St=b.div`
   /* NOTE: LeftGradientがはみ出るためhidden */
   overflow: hidden;
-  ${e=>!e.fadeInGradient&&v.css`
+  ${e=>!e.fadeInGradient&&y.css`
       margin-left: ${-72}px;
-      ${J} {
+      ${Y} {
         padding-left: ${72}px;
       }
     `}
 
   margin-right: ${-72}px;
   /* stylelint-disable-next-line no-duplicate-selectors */
-  ${J} {
+  ${Y} {
     padding-right: ${72}px;
   }
-`,Et=y.div`
+`,Ct=b.div`
   mask-image: linear-gradient(
     to right,
     #000 calc(100% - ${72}px),
     transparent
   );
-`,Dt=y.div`
+`,wt=b.div`
   /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */
   margin-right: ${-72}px;
   padding-right: ${72}px;
@@ -583,23 +583,23 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   transition: 0.2s all ease-in;
   mask: linear-gradient(to right, transparent, #000 ${72}px)
     ${e=>e.show?0:-72}px 0;
-`;function Ot({size:e=16}){return(0,p.jsx)(kt,{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
+`;function Tt({size:e=16}){return(0,p.jsx)(Et,{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 kt=y.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 Et=b.svg`
   fill: currentColor;
-`;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)(jt,{strokeWidth:`2`,points:`1,2 5,6 9,2`,transform:At(t)})})}function At(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 U(e)}}const jt=y.polyline`
+`;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)(Ot,{strokeWidth:`2`,points:`1,2 5,6 9,2`,transform:Dt(t)})})}function Dt(e){switch(e){case`up`:return`rotate(180 5 4)`;case`down`:return;case`left`:return`rotate(90 5 4)`;case`right`:return`rotate(-90 5 4)`;default:return K(e)}}const Ot=b.polyline`
   fill: none;
   stroke-linejoin: round;
   stroke-linecap: round;
   stroke: currentColor;
-`;function Mt(e,t,n=7){process.env.NODE_ENV!==`production`&&((0,_.default)((e|0)===e,`\`page\` must be integer (${e})`),(0,_.default)((t|0)===t,`\`pageCount\` must be integer (${t})`),(0,_.default)((n|0)===n,`\`pageRangeDisplayed\` must be integer (${n})`),(0,_.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 Nt=(0,u.memo)(function({page:e,pageCount:t,pageRangeDisplayed:n,onChange:r}){let i=Mt(e,t,n),a=(0,u.useCallback)(e=>()=>{r(e)},[r]),o=e<t,s=e>1;return(0,p.jsxs)(Ft,{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)(It,{children:(0,p.jsx)(Ot,{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 Pt({page:e,pageCount:t,pageRangeDisplayed:n,makeUrl:r}){let{Link:i}=S(),a=Mt(e,t,n),o=e<t,s=e>1;return(0,p.jsxs)(Ft,{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)(It,{children:(0,p.jsx)(Ot,{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 Ft=y.nav`
+`;function kt(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 At=(0,u.memo)(function({page:e,pageCount:t,pageRangeDisplayed:n,onChange:r}){let i=kt(e,t,n),a=(0,u.useCallback)(e=>()=>{r(e)},[r]),o=e<t,s=e>1;return(0,p.jsxs)(Mt,{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:`left`})}),i.map(t=>t===`...`?(0,p.jsx)(Nt,{children:(0,p.jsx)(Tt,{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:`right`})})]})});function jt({page:e,pageCount:t,pageRangeDisplayed:n,makeUrl:r}){let{Link:i}=w(),a=kt(e,t,n),o=e<t,s=e>1;return(0,p.jsxs)(Mt,{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:`left`})})}),a.map(t=>t===`...`?(0,p.jsx)(Nt,{children:(0,p.jsx)(Tt,{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:`right`})})})]})}const Mt=b.nav`
   display: flex;
   justify-content: center;
   align-items: center;
-`,Q=y.button`
+`,Q=b.button`
   font-size: 1rem;
   line-height: calc(1em + 8px);
   text-decoration: none;
@@ -654,16 +654,16 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
     color: ${({theme:e})=>e.color.text5};
   }
 
-  ${({noBackground:e=!1})=>e&&v.css`
+  ${({noBackground:e=!1})=>e&&y.css`
       /* stylelint-disable-next-line no-duplicate-selectors */
       &:hover {
         background: transparent;
       }
     `}
-`,It=y(Q).attrs({type:`button`,disabled:!0})`
+`,Nt=b(Q).attrs({type:`button`,disabled:!0})`
   && {
     color: ${({theme:e})=>e.color.text3};
     background: none;
   }
-`,$=`span`;exports.CancelLayoutItemBodyPadding=Ne,exports.Carousel=St,exports.ComponentAbstraction=te,exports.Filter=j,exports.FilterButton=C,exports.FilterIconButton=w,exports.FilterLink=T,exports.HintText=oe,exports.LAYOUT_ITEM_BODY_PADDING=I,exports.Layout=ve,exports.LayoutItem=Ee,exports.LayoutItemBody=Ae,exports.LayoutItemHeader=Oe,exports.LeftMenu=Xe,exports.LeftMenuContent=Ze,exports.LinkPager=Pt,exports.MAIN_COLUMN_HORIZONTAL_MIN_MARGIN=72,exports.MenuListItem=R,exports.MenuListItemContext=Re,exports.MenuListItemWithIcon=Ge,exports.MenuListLabel=Ye,exports.MenuListLinkItem=z,exports.MenuListLinkItemWithIcon=We,exports.MenuListSpacer=Je,exports.Pager=Nt,exports.RESPONSIVE_LEFT_WIDTH=fe,exports.RESPONSIVE_MAIN_MAX_WIDTH=pe,exports.StyledCancelLayoutItemBodyPadding=Pe,exports.StyledLayoutItemBody=je,exports.SwitchCheckbox=et,exports.TextEllipsis=L,exports.WithIcon=ot,exports.useComponentAbstraction=S,exports.useElementSize=ge,exports.useLayoutItemBodyPadding=Me,exports.useMedia=me,exports.useMediaScreen1=P;
+`,$=`span`;exports.CancelLayoutItemBodyPadding=je,exports.Carousel=yt,exports.ComponentAbstraction=C,exports.Filter=N,exports.FilterButton=T,exports.FilterIconButton=E,exports.FilterLink=D,exports.HintText=ie,exports.LAYOUT_ITEM_BODY_PADDING=R,exports.Layout=ge,exports.LayoutItem=we,exports.LayoutItemBody=Oe,exports.LayoutItemHeader=Ee,exports.LeftMenu=qe,exports.LeftMenuContent=Je,exports.LinkPager=jt,exports.MAIN_COLUMN_HORIZONTAL_MIN_MARGIN=72,exports.MenuListItem=V,exports.MenuListItemContext=B,exports.MenuListItemWithIcon=He,exports.MenuListLabel=Ke,exports.MenuListLinkItem=H,exports.MenuListLinkItemWithIcon=Ve,exports.MenuListSpacer=Ge,exports.Pager=At,exports.RESPONSIVE_LEFT_WIDTH=ue,exports.RESPONSIVE_MAIN_MAX_WIDTH=de,exports.StyledCancelLayoutItemBodyPadding=Me,exports.StyledLayoutItemBody=ke,exports.SwitchCheckbox=Ze,exports.TextEllipsis=z,exports.WithIcon=rt,exports.useComponentAbstraction=w,exports.useElementSize=me,exports.useLayoutItemBodyPadding=Ae,exports.useMedia=pe,exports.useMediaScreen1=fe;
 //# sourceMappingURL=index.cjs.map