@charcoal-ui/react-sandbox 5.6.0-beta.5 → 5.7.0

package/dist/index.cjs

@@ -1,4 +1,5 @@
-"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/web`);_=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`
+"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`
   display: block;
   outline: none;
   border: none;
@@ -17,39 +18,39 @@
     color: ${({theme:e})=>e.color.text2};
   }
 
-  ${({hover:e=!1})=>e&&y.css`
+  ${({hover:e=!1})=>e&&v.css`
       color: ${({theme:e})=>e.color.text2};
     `}
 
-  ${({active:e=!1})=>e&&y.css`
+  ${({active:e=!1})=>e&&v.css`
       background-color: ${({theme:e})=>e.color.surface3};
       color: ${({theme:e})=>e.color.text2};
     `}
 
-  ${({active:e=!1,reactive:t=!1})=>e&&!t&&y.css`
+  ${({active:e=!1,reactive:t=!1})=>e&&!t&&v.css`
       cursor: default;
     `}
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     padding: 5px 16px;
   }
-`,k=y.css`
+`,D=v.css`
   padding: 0;
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     padding: 0;
   }
-`,A=b.button`
-  ${O}
-`,j=b.span`
-  ${O}
-`,M=b(A)`
-  ${k};
+`,O=y.button`
+  ${E}
+`,k=y.span`
+  ${E}
+`,A=y(O)`
+  ${D};
   ${e=>e.buttonWidth!==void 0&&`width: ${e.buttonWidth}px;`}
   ${e=>e.buttonHeight!==void 0&&`height: ${e.buttonHeight}px;`}
-`,te=b.div`
+`,j=y.div`
   display: flex;
-`;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`
+`,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`
   stroke: none;
   fill: ${({currentColor:e=!1,theme:t})=>e?`currentColor`:t.color.text2};
   width: ${e=>e.size}px;
@@ -57,39 +58,39 @@
   line-height: 0;
   font-size: 0;
   vertical-align: middle;
-`,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
+`,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
            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`
+           6.75C7.44772 6.75 7 7.19772 7 7.75Z`})]})})}const ae=y.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)])}
+`;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)])}
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
-    ${e=>N(t=>[t.padding.vertical(e.screen1.vertical),t.padding.horizontal(e.screen1.horizontal)])}
+    ${e=>M(t=>[t.padding.vertical(e.screen1.vertical),t.padding.horizontal(e.screen1.horizontal)])}
   }
 
   display: flex;
   align-items: flex-start;
-  ${e=>e.context===`page`&&y.css`
+  ${e=>e.context===`page`&&v.css`
       justify-content: center;
     `}
-`,de=b.div`
+`,ce=y.div`
   display: flex;
   align-items: center;
   color: ${e=>e.theme.color.text4};
   height: 22px;
   margin: -4px 4px -4px 0;
-`,fe=b.p`
-  ${N(e=>[e.font.text2,e.typography(14)])}
+`,le=y.p`
+  ${M(e=>[e.font.text2,e.typography(14)])}
   margin: 0;
   min-width: 0;
   overflow-wrap: break-word;
-`;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`
+`;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`
   margin-bottom: 40px;
   overflow-x: auto;
   word-break: keep-all;
@@ -100,7 +101,7 @@
     padding-bottom: 16px;
     background-color: ${({theme:e})=>e.color.surface2};
   }
-`,Te=y.createGlobalStyle`
+`,be=v.createGlobalStyle`
   :root {
     background-color: ${({theme:e})=>e.color.background2};
 
@@ -108,26 +109,26 @@
       background-color: ${({theme:e})=>e.color.background1};
     }
   }
-`,Ee=b.div`
+`,xe=y.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};
   }
-`,De=b.div`
-  min-width: ${ge}px;
+`,Se=y.div`
+  min-width: ${fe}px;
   padding: 40px 0 40px ${h.GUTTER_UNIT}px;
   box-sizing: border-box;
 
   @media ${({theme:e})=>e.breakpoint.screen3} {
     display: none;
   }
-`,Oe=b.div`
+`,Ce=y.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):_e}px;
+  max-width: ${e=>e.center?(0,h.columnSystem)(6,h.COLUMN_UNIT,h.GUTTER_UNIT):pe}px;
   padding: 40px ${72}px;
   margin: 0 auto;
   display: flex;
@@ -136,7 +137,7 @@
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
     padding: 0;
   }
-`,ke=b.div`
+`,we=y.div`
   font-weight: bold;
   margin-bottom: 12px;
   font-size: 20px;
@@ -152,7 +153,7 @@
     justify-content: center;
     background-color: ${({theme:e})=>e.color.surface2};
   }
-`,Ae=b.div`
+`,Te=y.div`
   display: grid;
   gap: ${h.GUTTER_UNIT}px;
   grid-template-columns: 1fr;
@@ -164,7 +165,7 @@
     background-color: ${({theme:e})=>e.color.background1};
     padding-bottom: 60px;
   }
-`,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`
+`,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`
   grid-column-start: auto;
   grid-column-end: span ${e=>e.span};
   border-radius: 24px;
@@ -174,20 +175,20 @@
   min-width: 0;
 
   @media ${e=>e.withLeft?e.theme.breakpoint.screen4:e.theme.breakpoint.screen3} {
-    ${e=>e.span>2&&y.css`
+    ${e=>e.span>2&&v.css`
         grid-column-end: span 2;
       `}
   }
 
   @media ${({theme:e})=>(0,f.maxWidth)(e.breakpoint.screen1)} {
-    ${e=>e.span>1&&y.css`
+    ${e=>e.span>1&&v.css`
         grid-column-end: span 1;
       `}
 
     border-radius: 0;
     padding-bottom: 40px;
   }
-`;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`
+`;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`
   padding: 0 ${e=>e.wide?40:24}px;
   height: ${e=>e.wide?64:48}px;
   display: grid;
@@ -198,7 +199,7 @@
   background-color: ${({theme:e})=>e.color.surface2};
   color: ${({theme:e})=>e.color.text2};
   border-radius: 24px 24px 0 0;
-  ${e=>e.center&&y.css`
+  ${e=>e.center&&v.css`
       justify-content: center;
     `}
 
@@ -208,45 +209,45 @@
     background: none;
     overflow-x: auto;
     border-radius: unset;
-    ${e=>e.wide&&y.css`
+    ${e=>e.wide&&v.css`
         height: 48px;
         margin-top: 0;
       `}
   }
-`,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`};
+`,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`};
 
   @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`};
+    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`};
   }
 
   width: 100%;
   box-sizing: border-box;
-`;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;
+`;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;
 
   @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;
+    margin: 0 -${I.column1.x}px;
+    margin-top: -${({cancelTop:e=!1})=>e?I.column1.x:0}px;
   }
-`,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}))`
+`,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}))`
   overflow: hidden;
   line-height: ${e=>e.lineHeight}px;
   /* For english */
   overflow-wrap: break-word;
 
-  ${({lineLimit:e=1,lineHeight:t})=>e===1?y.css`
+  ${({lineLimit:e=1,lineHeight:t})=>e===1?v.css`
           text-overflow: ellipsis;
           white-space: nowrap;
-        `:y.css`
+        `:v.css`
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: ${e};
           /* Fallback for -webkit-line-clamp */
           max-height: ${t*e}px;
         `}
-`,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`
+`,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`
   display: flex;
   height: ${e=>e.hasSubLabel?56:40}px;
   align-items: center;
@@ -257,12 +258,12 @@
   transition: 0.2s background-color;
 
   &:hover {
-    ${e=>!e.noHover&&y.css`
+    ${e=>!e.noHover&&v.css`
         background-color: ${({theme:e})=>e.color.surface3};
       `}
   }
 
-  ${N(e=>e.disabled)}
+  ${M(e=>e.disabled)}
 
   ${f.disabledSelector} {
     cursor: default;
@@ -272,42 +273,42 @@
       background-color: unset;
     }
   }
-`,Ge=b.div`
+`,Be=y.div`
   display: flex;
   flex-direction: column;
-`,Ke=b.div`
+`,Ve=y.div`
   color: ${e=>e.theme.color.text2};
   line-height: 22px;
   font-size: 14px;
   display: grid;
-`,qe=b.div`
+`,He=y.div`
   color: ${e=>e.theme.color.text3};
   line-height: 18px;
   font-size: 10px;
-`;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`
+`;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`
   display: block;
-`;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`
+`;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`
   display: grid;
   gap: 8px;
   grid-auto-flow: column;
   align-items: center;
-`,Qe=b.div`
+`,qe=y.div`
   color: ${({theme:e})=>e.color.text3};
   display: flex;
-`,$e=b.div`
+`,Je=y.div`
   height: 24px;
-`,et=b.div`
+`,Ye=y.div`
   padding: 0 16px;
   font-size: 12px;
   line-height: 16px;
   color: ${({theme:e})=>e.color.text3};
   margin-top: -2px;
   margin-bottom: 6px;
-`;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`
+`;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`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`,it=b.div`
+`,$e=y.div`
   display: flex;
   align-items: center;
   color: ${({theme:e})=>e.color.text3};
@@ -326,20 +327,20 @@
     color: ${({theme:e})=>e.color.text2};
     background-color: ${({theme:e})=>e.color.surface3};
   }
-`;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`
+`;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`
           margin-right: 8px;
-        `:y.css`
+        `:v.css`
           margin-left: 8px;
         `}
-`,st=b.label`
+`,nt=y.label`
   display: inline-flex;
   align-items: center;
-  ${({flex:e})=>e&&y.css`
+  ${({flex:e})=>e&&v.css`
       display: flex;
       justify-content: space-between;
     `}
-  ${({rowReverse:e})=>y.css`
+  ${({rowReverse:e})=>v.css`
     flex-direction: ${e?`row-reverse`:`row`};
   `}
   cursor: pointer;
@@ -348,11 +349,11 @@
   &[aria-disabled='true'] {
     cursor: auto;
   }
-`,ct=b.span`
+`,rt=y.span`
   display: inline-flex;
   position: relative;
   z-index: 0;
-`,z=b.div`
+`,B=y.div`
   position: relative;
   box-sizing: border-box;
   width: 28px;
@@ -363,7 +364,7 @@
   transition:
     box-shadow 0.2s,
     background-color 0.2s;
-`,lt=b.div`
+`,it=y.div`
   position: absolute;
   display: block;
   top: 0;
@@ -374,7 +375,7 @@
   border-radius: 50%;
   transform: translateX(0);
   transition: transform 0.2s;
-`,ut=b.input.attrs({type:`checkbox`})`
+`,at=y.input.attrs({type:`checkbox`})`
   position: absolute;
   /* NOTE: this is contained by the GraphicCheckboxOuter */
   z-index: 1;
@@ -390,10 +391,10 @@
   cursor: pointer;
 
   &:checked {
-    ~ ${z} {
+    ~ ${B} {
       background-color: ${({theme:e})=>e.color.brand};
 
-      ${lt} {
+      ${it} {
         transform: translateX(12px);
       }
     }
@@ -402,52 +403,52 @@
   &:disabled {
     cursor: auto;
 
-    ~ ${z} {
+    ~ ${B} {
       opacity: ${({theme:e})=>e.elementEffect.disabled.opacity};
     }
   }
 
   &:not(:disabled):focus {
-    ~ ${z} {
+    ~ ${B} {
       box-shadow: 0 0 0 4px
         ${({theme:e})=>(0,f.applyEffect)(e.color.brand,e.elementEffect.disabled)};
     }
   }
-`;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`
+`;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`
   display: flex;
   align-items: center;
-`,pt=b.div`
-  ${e=>!e.fixed&&y.css`
+`,ct=y.div`
+  ${e=>!e.fixed&&v.css`
       min-width: 0;
       overflow: hidden;
     `}
   white-space: nowrap;
   text-overflow: ellipsis;
-`;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`
+`;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`
   > svg {
     display: block;
   }
-`,gt=y.css`
-  ${e=>e.show===`collapse`?y.css`
+`,dt=v.css`
+  ${e=>e.show===`collapse`?v.css`
           display: none;
-        `:y.css`
+        `:v.css`
           visibility: ${e.show?`visible`:`hidden`};
         `};
-  ${e=>e.pre?y.css`
+  ${e=>e.pre?v.css`
           margin-right: 4px;
-        `:y.css`
+        `:v.css`
           margin-left: 4px;
         `}
-`,_t=b.div`
+`,ft=y.div`
   display: flex;
   align-items: center;
 
-  ${gt}
-`,vt=b.div`
+  ${dt}
+`,pt=y.div`
   display: inline-flex;
 
-  ${ht}
-`,yt=b.div`
+  ${ut}
+`,mt=y.div`
   display: flex;
   position: relative;
   /* Iconをline-heightに関与させない */
@@ -455,18 +456,18 @@
   /* 横方向の領域は確保する */
   width: ${e=>e.width}px;
 
-  ${gt}
-`,bt=b.div`
+  ${dt}
+`,ht=y.div`
   display: inline-flex;
   position: absolute;
   transform: translateY(-50%);
 
-  ${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`
+  ${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`
   @media (hover: none) and (pointer: coarse) {
     display: none;
   }
-`;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`
+`;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`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -480,7 +481,7 @@
     0.2s background-color,
     0.2s color;
   color: ${({theme:e})=>e.color.text5};
-`;var kt=b(b.button`
+`;var xt=y(y.button`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -499,22 +500,22 @@
   /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */
   z-index: 1;
 
-  &:hover ${K} {
+  &:hover ${q} {
     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 ${K} {
+  &:active ${q} {
     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&&y.css`
+  ${e=>e.hide&&v.css`
       visibility: hidden;
       opacity: 0;
       pointer-events: none;
     `}
-`)`${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)(()=>({from:{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`
+`)`${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`
   vertical-align: top;
   overflow: hidden;
   list-style: none;
@@ -524,26 +525,26 @@
   min-width: 100%;
   box-sizing: border-box;
 
-  ${({centerItems:e=!1})=>e?y.css`
+  ${({centerItems:e=!1})=>e?v.css`
           display: flex;
           width: max-content;
           margin: 0 auto;
-        `:y.css`
+        `:v.css`
           display: inline-flex;
           margin: 0;
         `}
-`,J=b.div`
+`,Y=y.div`
   opacity: 0;
   transition: 0.4s opacity;
-`,Nt=b.div`
-  &:hover ${J} {
+`,Ct=y.div`
+  &:hover ${Y} {
     opacity: 1;
   }
 
   /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */
   position: relative;
   z-index: 0;
-`,Pt=b(_.animated.div)`
+`,wt=y(ee.animated.div)`
   overflow-x: auto;
   padding: 0;
   margin: 0;
@@ -553,28 +554,28 @@
   }
 
   scrollbar-width: none;
-`,Ft=b.div`
+`,Tt=y.div`
   /* NOTE: LeftGradientがはみ出るためhidden */
   overflow: hidden;
-  ${e=>!e.fadeInGradient&&y.css`
+  ${e=>!e.fadeInGradient&&v.css`
       margin-left: ${-72}px;
-      ${q} {
+      ${J} {
         padding-left: ${72}px;
       }
     `}
 
   margin-right: ${-72}px;
   /* stylelint-disable-next-line no-duplicate-selectors */
-  ${q} {
+  ${J} {
     padding-right: ${72}px;
   }
-`,It=b.div`
+`,Et=y.div`
   mask-image: linear-gradient(
     to right,
     #000 calc(100% - ${72}px),
     transparent
   );
-`,Lt=b.div`
+`,Dt=y.div`
   /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */
   margin-right: ${-72}px;
   padding-right: ${72}px;
@@ -582,23 +583,23 @@
   transition: 0.2s all ease-in;
   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
+`;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
           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 Rt=b.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 kt=y.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)(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`
+`;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`
   fill: none;
   stroke-linejoin: round;
   stroke-linecap: round;
   stroke: currentColor;
-`;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`
+`;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`
   display: flex;
   justify-content: center;
   align-items: center;
-`,Q=b.button`
+`,Q=y.button`
   font-size: 1rem;
   line-height: calc(1em + 8px);
   text-decoration: none;
@@ -653,16 +654,16 @@
     color: ${({theme:e})=>e.color.text5};
   }
 
-  ${({noBackground:e=!1})=>e&&y.css`
+  ${({noBackground:e=!1})=>e&&v.css`
       /* stylelint-disable-next-line no-duplicate-selectors */
       &:hover {
         background: transparent;
       }
     `}
-`,Gt=b(Q).attrs({type:`button`,disabled:!0})`
+`,It=y(Q).attrs({type:`button`,disabled:!0})`
   && {
     color: ${({theme:e})=>e.color.text3};
     background: none;
   }
-`,$=`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;
+`,$=`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;
 //# sourceMappingURL=index.cjs.map