@charcoal-ui/react-sandbox 5.11.0-beta.1 → 5.11.0-beta.3

package/dist/index.js

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