@charcoal-ui/react-sandbox 2.0.0-alpha.9 → 2.0.0-rc.0

package/dist/index.cjs

@@ -1,2 +1,1815 @@
-var e=require("react"),n=require("styled-components"),t=require("@charcoal-ui/react"),r=require("@charcoal-ui/utils"),o=require("@charcoal-ui/styled"),i=require("@charcoal-ui/foundation"),a=require("react-dom"),l=require("react-spring"),u=require("warning"),c=require("polished");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f,s,p,m,h,v,x,g,b,y=/*#__PURE__*/d(e),w=/*#__PURE__*/d(n),E=/*#__PURE__*/d(a),k=/*#__PURE__*/d(u);function C(){return C=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},C.apply(this,arguments)}function L(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(o[t]=e[t]);return o}function z(e,n){return n||(n=e.slice(0)),e.raw=n,e}var R,T=["onClick","children","active","hover","reactive"],I=y.default.forwardRef(function(e,n){var t=e.active,r=void 0!==t&&t,o=e.reactive,i=void 0!==o&&o;/*#__PURE__*/return y.default.createElement(B,{active:r,reactive:i,hover:e.hover,onClick:r&&!i?void 0:e.onClick,ref:n},e.children)}),S=y.default.forwardRef(function(e,n){var t=e.active,r=void 0!==t&&t,o=e.reactive,i=void 0!==o&&o;/*#__PURE__*/return y.default.createElement(W,{active:r,reactive:i,hover:e.hover,onClick:r&&!i?void 0:e.onClick,ref:n,buttonWidth:e.width,buttonHeight:e.height},e.children)}),M=y.default.forwardRef(function(e,n){var r=e.onClick,o=e.children,i=e.active,a=void 0!==i&&i,l=e.hover,u=e.reactive,c=void 0!==u&&u,d=L(e,T),f=t.useComponentAbstraction().Link;return a&&!c?/*#__PURE__*/y.default.createElement(A,{active:!0,hover:l,ref:n},o):/*#__PURE__*/y.default.createElement(f,C({},d,{onClick:r}),/*#__PURE__*/y.default.createElement(A,{active:a,reactive:c,hover:l,ref:n},o))}),O=n.css(f||(f=z(["\n  display: block;\n  outline: none;\n  border: none;\n  padding: 9px 24px;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  border-radius: /* absurd radius, but ensures rounded corners */ 2000px;\n  transition: color 0.2s;\n  color: ",";\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n\n  &:hover {\n    color: ",";\n  }\n\n  ","\n\n  ","\n\n  ","\n\n  @media "," {\n    padding: 5px 16px;\n  }\n"])),function(e){return e.theme.color.text3},function(e){return e.theme.color.text2},function(e){var t=e.hover;return void 0!==t&&t&&n.css(s||(s=z(["\n      color: ",";\n    "])),function(e){return e.theme.color.text2})},function(e){var t=e.active;return void 0!==t&&t&&n.css(p||(p=z(["\n      background-color: ",";\n      color: ",";\n    "])),function(e){return e.theme.color.surface3},function(e){return e.theme.color.text2})},function(e){var t=e.active,r=e.reactive;return void 0!==t&&t&&!(void 0!==r&&r)&&n.css(m||(m=z(["\n      cursor: default;\n    "])))},function(e){return r.maxWidth(e.theme.breakpoint.screen1)}),N=n.css(h||(h=z(["\n  padding: 0;\n\n  @media "," {\n    padding: 0;\n  }\n"])),function(e){return r.maxWidth(e.theme.breakpoint.screen1)}),B=w.default.button(v||(v=z(["\n  ","\n"])),O),A=w.default.span(x||(x=z(["\n  ","\n"])),O),W=w.default(B)(g||(g=z(["\n  ",";\n  ","\n  ","\n"])),N,function(e){return void 0!==e.buttonWidth&&"width: "+e.buttonWidth+"px;"},function(e){return void 0!==e.buttonHeight&&"height: "+e.buttonHeight+"px;"}),_=w.default.div(b||(b=z(["\n  display: flex;\n"]))),U=o.createTheme(w.default);function H(e){var n=e.size,t=e.viewBoxSize;/*#__PURE__*/return y.default.createElement(j,{viewBox:"0 0 "+t+" "+t,size:void 0===n?24:n,currentColor:e.currentColor},/*#__PURE__*/y.default.createElement(G,{path:e.path,transform:e.transform,fillRule:e.fillRule,clipRule:e.clipRule}))}var P,j=w.default.svg(R||(R=z(["\n  stroke: none;\n  fill: ",";\n  width: ","px;\n  height: ","px;\n  line-height: 0;\n  font-size: 0;\n  vertical-align: middle;\n"])),function(e){var n=e.currentColor;return void 0!==n&&n?"currentColor":e.theme.color.text2},function(e){return e.size},function(e){return e.size}),G=function(e){var n=e.path;return"string"==typeof n?/*#__PURE__*/y.default.createElement("path",{d:n,transform:e.transform,fillRule:e.fillRule,clipRule:e.clipRule}):/*#__PURE__*/y.default.createElement(y.default.Fragment,null,n)};function D(){/*#__PURE__*/return y.default.createElement(H,{viewBoxSize:16,size:16,currentColor:!0,path:/*#__PURE__*/y.default.createElement(y.default.Fragment,null,/*#__PURE__*/y.default.createElement("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"}),/*#__PURE__*/y.default.createElement(ce,{d:"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036 9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75 5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25 8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8 6.75C7.44772 6.75 7 7.19772 7 7.75Z"}))})}var V,q,F,Z,X,Y,J,K,Q,$,ee,ne,te,re,oe,ie,ae,le,ue,ce=w.default.path(P||(P=z(["\n  fill: ",";\n  fill-rule: evenodd;\n"])),function(e){return e.theme.color.surface1}),de=w.default.div.attrs(function(e){return C({},e,function(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}}}}(e.context))})(V||(V=z(["\n  ","\n\n  @media "," {\n    ","\n  }\n\n  display: flex;\n  align-items: flex-start;\n  ","\n"])),function(e){return U(function(n){return[n.bg.surface3,n.borderRadius(8),n.padding.vertical(e.default.vertical),n.padding.horizontal(e.default.horizontal)]})},function(e){return r.maxWidth(e.theme.breakpoint.screen1)},function(e){return U(function(n){return[n.padding.vertical(e.screen1.vertical),n.padding.horizontal(e.screen1.horizontal)]})},function(e){return"page"===e.context&&n.css(q||(q=z(["\n      justify-content: center;\n    "])))}),fe=w.default.div(F||(F=z(["\n  display: flex;\n  align-items: center;\n  color: ",";\n  height: 22px;\n  margin: -4px 4px -4px 0;\n"])),function(e){return e.theme.color.text4}),se=w.default.p(Z||(Z=z(["\n  ","\n  margin: 0;\n"])),U(function(e){return[e.font.text2,e.typography(14)]})),pe=i.columnSystem(2,i.COLUMN_UNIT,i.GUTTER_UNIT)+i.GUTTER_UNIT,me=i.columnSystem(12,i.COLUMN_UNIT,i.GUTTER_UNIT);function he(){return ve(r.maxWidth(n.useTheme().breakpoint.screen1))}function ve(n){var t=e.useMemo(function(){return __TEST__?{matches:!1,addListener:function(){},removeListener:function(){}}:matchMedia(n)},[n]),r=e.useState(t.matches),o=r[0],i=r[1];t.matches!==o&&i(t.matches);var a=function(e){try{E.default.flushSync(function(){i(e.matches)})}catch(n){i(e.matches)}};return e.useLayoutEffect(function(){return t.addListener(a),i(t.matches),function(){t.removeListener(a)}},[t]),e.useDebugValue(n+": "+o.toString()),o}function xe(e){return null!==e?e.getBoundingClientRect():void 0}function ge(n,t){void 0===t&&(t=[]);var r=e.useReducer(function(e,n){return void 0===e||void 0===n?n:e.height===n.height&&e.width===n.width?e:n},void 0),o=r[0],i=r[1],a=e.useState(null),l=a[0],u=a[1];return e.useLayoutEffect(function(){if(null!==l){var e=new ResizeObserver(function(){var e=xe(l);i(e)});return e.observe(l),function(){e.unobserve(l),i(void 0)}}},[l]),e.useLayoutEffect(function(){n.current!==l&&u(n.current)}),e.useLayoutEffect(function(){t.length>0&&i(xe(n.current))},t),e.useDebugValue(o),o}var be,ye,we,Ee,ke,Ce,Le,ze,Re,Te,Ie,Se,Me,Oe=y.default.createContext({wide:!1,center:!1,withLeft:!1}),Ne=w.default.div(X||(X=z(["\n  margin-bottom: 40px;\n  overflow-x: auto;\n  word-break: keep-all;\n\n  @media "," {\n    margin-bottom: 0;\n    padding-left: 16px;\n    padding-bottom: 16px;\n    background-color: ",";\n  }\n"])),function(e){return r.maxWidth(e.theme.breakpoint.screen1)},function(e){return e.theme.color.surface2}),Be=n.createGlobalStyle(Y||(Y=z(["\n  :root {\n    background-color: ",";\n\n    @media "," {\n      background-color: ",";\n    }\n  }\n"])),function(e){return e.theme.color.background2},function(e){return r.maxWidth(e.theme.breakpoint.screen1)},function(e){return e.theme.color.background1}),Ae=w.default.div(J||(J=z(["\n  display: flex;\n  background-color: ",";\n\n  @media "," {\n    background-color: ",";\n  }\n"])),function(e){return e.theme.color.background2},function(e){return r.maxWidth(e.theme.breakpoint.screen1)},function(e){return e.theme.color.background1}),We=w.default.div(K||(K=z(["\n  min-width: ","px;\n  padding: 40px 0 40px ","px;\n  box-sizing: border-box;\n\n  @media "," {\n    display: none;\n  }\n"])),pe,i.GUTTER_UNIT,function(e){return e.theme.breakpoint.screen3}),_e=w.default.div(Q||(Q=z(["\n  flex-grow: 1;\n  /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\n  max-width: ","px;\n  padding: 40px ","px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n\n  @media "," {\n    padding: 0;\n  }\n"])),function(e){return e.center?i.columnSystem(6,i.COLUMN_UNIT,i.GUTTER_UNIT):me},72,function(e){return r.maxWidth(e.theme.breakpoint.screen1)}),Ue=w.default.div($||($=z(["\n  font-weight: bold;\n  margin-bottom: 12px;\n  font-size: 20px;\n  line-height: 28px;\n  color: ",";\n\n  @media "," {\n    margin-bottom: 0;\n    padding: 12px;\n    font-size: 16px;\n    line-height: 24px;\n    display: flex;\n    justify-content: center;\n    background-color: ",";\n  }\n"])),function(e){return e.theme.color.text2},function(e){return r.maxWidth(e.theme.breakpoint.screen1)},function(e){return e.theme.color.surface2}),He=w.default.div(ee||(ee=z(["\n  display: grid;\n  gap: ","px;\n  grid-template-columns: 1fr;\n  grid-auto-columns: 1fr;\n  grid-auto-rows: auto;\n\n  @media "," {\n    gap: 0;\n    background-color: ",";\n    padding-bottom: 60px;\n  }\n"])),i.GUTTER_UNIT,function(e){return r.maxWidth(e.theme.breakpoint.screen1)},function(e){return e.theme.color.background1}),Pe=y.default.forwardRef(function(n,t){var r=n.span,o=n.children,i=e.useContext(Oe);/*#__PURE__*/return y.default.createElement(je,{span:r,withLeft:i.withLeft,ref:t},o)}),je=w.default.div(ne||(ne=z(["\n  grid-column-start: auto;\n  grid-column-end: span ",";\n  border-radius: 24px;\n  color: ",";\n  background-color: ",";\n  /* https://www.w3.org/TR/css-grid-1/#min-size-auto */\n  min-width: 0;\n\n  @media "," {\n    ","\n  }\n\n  @media "," {\n    ","\n\n    border-radius: 0;\n    padding-bottom: 40px;\n  }\n"])),function(e){return e.span},function(e){return e.theme.color.text2},function(e){return e.theme.color.background1},function(e){return e.withLeft?e.theme.breakpoint.screen4:e.theme.breakpoint.screen3},function(e){return e.span>2&&n.css(te||(te=z(["\n        grid-column-end: span 2;\n      "])))},function(e){return r.maxWidth(e.theme.breakpoint.screen1)},function(e){return e.span>1&&n.css(re||(re=z(["\n        grid-column-end: span 1;\n      "])))}),Ge=w.default.div(oe||(oe=z(["\n  padding: 0 ","px;\n  height: ","px;\n  display: grid;\n  align-items: center;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: bold;\n  background-color: ",";\n  color: ",";\n  border-radius: 24px 24px 0 0;\n  ","\n\n  @media "," {\n    margin-top: 4px;\n    padding: 0 16px;\n    background: none;\n    overflow-x: auto;\n    border-radius: unset;\n    ","\n  }\n"])),function(e){return e.wide?40:24},function(e){return e.wide?64:48},function(e){return e.theme.color.surface2},function(e){return e.theme.color.text2},function(e){return e.center&&n.css(ie||(ie=z(["\n      justify-content: center;\n    "])))},function(e){return r.maxWidth(e.theme.breakpoint.screen1)},function(e){return e.wide&&n.css(ae||(ae=z(["\n        height: 48px;\n        margin-top: 0;\n      "])))}),De={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}},Ve=w.default.div(le||(le=z(["\n  padding: ",";\n\n  @media "," {\n    padding: ",";\n  }\n\n  width: 100%;\n  box-sizing: border-box;\n"])),function(e){return e.narrow?De.narrow.yTop+"px "+(e.horizontal?0:De.narrow.x)+"px "+De.narrow.yBottom+"px":e.wide?(e.horizontal?0:De.wide.y)+"px "+De.wide.x+"px":(e.horizontal?0:De.default.y)+"px "+De.default.x+"px"},function(e){return r.maxWidth(e.theme.breakpoint.screen1)},function(e){return e.narrow?De.narrowColumn1.yTop+"px "+(e.horizontal?0:De.narrowColumn1.x)+"px "+De.narrowColumn1.yBottom+"px":De.column1.y+"px "+De.column1.x+"px 0"}),qe=w.default.div(ue||(ue=z(["\n  margin: 0 -","px;\n  margin-top: -","px;\n\n  @media "," {\n    margin: 0 -","px;\n    margin-top: -","px;\n  }\n"])),function(e){return e.wide?De.wide.x:De.default.x},function(e){var n=e.cancelTop;return void 0!==n&&n?e.wide?De.wide.y:De.default.y:0},function(e){return r.maxWidth(e.theme.breakpoint.screen1)},De.column1.x,function(e){var n=e.cancelTop;return void 0!==n&&n?De.column1.x:0}),Fe=function(n){return e.isValidElement(n)&&Boolean(n.props.children)},Ze=function(e){return null==e||"boolean"==typeof e||"{}"===JSON.stringify(e)?"":e.toString()},Xe=function n(t){return Array.isArray(t)||e.isValidElement(t)?e.Children.toArray(t).reduce(function(t,r){var o;return o=e.isValidElement(r)&&Fe(r)?n(r.props.children):e.isValidElement(r)&&!Fe(r)?"":Ze(r),t.concat(o)},""):Ze(t)},Ye=w.default.div.attrs(function(e){var n=e.title,t=void 0===n?Xe(e.children):n;return{title:""!==t?t:void 0}})(be||(be=z(["\n  overflow: hidden;\n  line-height: ","px;\n  /* For english */\n  overflow-wrap: break-word;\n\n  ","\n"])),function(e){return e.lineHeight},function(e){var t=e.lineLimit,r=void 0===t?1:t,o=e.lineHeight;return 1===r?n.css(ye||(ye=z(["\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        "]))):n.css(we||(we=z(["\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ",";\n          /* Fallback for -webkit-line-clamp */\n          max-height: ","px;\n        "])),r,o*r)}),Je=["link","onClick","disabled","primary","secondary","gtmClass","noHover","children"],Ke=["icon","primary"],Qe=["icon","primary"],$e=y.default.createContext({padding:24});function en(n){var t=n.primary,r=n.secondary,o=n.onClick,i=n.disabled,a=void 0!==i&&i,l=n.noHover,u=void 0!==l&&l,c=n.gtmClass,d=n.children,f=e.useContext($e);/*#__PURE__*/return y.default.createElement(nn,{hasSubLabel:void 0!==r,onClick:function(e){return!a&&o&&o(e)},sidePadding:f.padding,noHover:u,noClick:void 0===o,"aria-disabled":a,role:void 0!==o?"button":void 0,className:void 0!==c?"gtm-"+c:void 0},/*#__PURE__*/y.default.createElement(tn,null,/*#__PURE__*/y.default.createElement(rn,null,/*#__PURE__*/y.default.createElement(Ye,{lineHeight:22,lineLimit:1},t)),void 0!==r&&/*#__PURE__*/y.default.createElement(on,null,/*#__PURE__*/y.default.createElement(Ye,{lineHeight:22,lineLimit:1},r))),d)}var nn=w.default.div(Ee||(Ee=z(["\n  display: flex;\n  height: ","px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ","px;\n  user-select: none;\n  cursor: ",";\n  transition: 0.2s background-color;\n\n  &:hover {\n    ","\n  }\n\n  ","\n\n  "," {\n    cursor: default;\n    pointer-events: none;\n\n    &:hover {\n      background-color: unset;\n    }\n  }\n"])),function(e){return e.hasSubLabel?56:40},function(e){return e.sidePadding},function(e){return e.noClick?"default":"pointer"},function(e){return!e.noHover&&n.css(ke||(ke=z(["\n        background-color: ",";\n      "])),function(e){return e.theme.color.surface3})},U(function(e){return e.disabled}),r.disabledSelector),tn=w.default.div(Ce||(Ce=z(["\n  display: flex;\n  flex-direction: column;\n"]))),rn=w.default.div(Le||(Le=z(["\n  color: ",";\n  line-height: 22px;\n  font-size: 14px;\n  display: grid;\n"])),function(e){return e.theme.color.text2}),on=w.default.div(ze||(ze=z(["\n  color: ",";\n  line-height: 18px;\n  font-size: 10px;\n"])),function(e){return e.theme.color.text3});function an(e){var n=e.link,r=e.onClick,o=e.disabled,i=void 0!==o&&o,a=e.primary,l=e.secondary,u=e.gtmClass,c=e.noHover,d=e.children,f=L(e,Je),s=t.useComponentAbstraction().Link,p={disabled:i,primary:a,secondary:l,gtmClass:u,noHover:c,children:d};return i?/*#__PURE__*/y.default.createElement("span",{onClick:r},/*#__PURE__*/y.default.createElement(en,p)):/*#__PURE__*/y.default.createElement(On,C({as:s,to:n,onClick:r},f),/*#__PURE__*/y.default.createElement(en,C({onClick:function(){}},p)))}var ln,un,cn,dn,fn,sn,pn,mn,hn,vn,xn,gn,bn,yn,wn,En,kn,Cn,Ln,zn,Rn,Tn,In,Sn,Mn,On=w.default.a(Re||(Re=z(["\n  display: block;\n"]))),Nn=w.default.div(Te||(Te=z(["\n  display: grid;\n  gap: 8px;\n  grid-auto-flow: column;\n  align-items: center;\n"]))),Bn=w.default.div(Ie||(Ie=z(["\n  color: ",";\n  display: flex;\n"])),function(e){return e.theme.color.text3}),An=w.default.div(Se||(Se=z(["\n  height: 24px;\n"]))),Wn=w.default.div(Me||(Me=z(["\n  padding: 0 16px;\n  font-size: 12px;\n  line-height: 16px;\n  color: ",";\n  margin-top: -2px;\n  margin-bottom: 6px;\n"])),function(e){return e.theme.color.text3}),_n=w.default.div(ln||(ln=z(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"]))),Un=w.default.div(un||(un=z(["\n  display: flex;\n  align-items: center;\n  color: ",";\n  border-radius: 24px;\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 22px;\n  padding: 0 16px;\n  height: 40px;\n  transition: 0.2s color;\n  &:hover {\n    transition: 0.2s color;\n    color: ",";\n  }\n  &[aria-current] {\n    color: ",";\n    background-color: ",";\n  }\n"])),function(e){return e.theme.color.text3},function(e){return e.theme.color.text2},function(e){return e.theme.color.text2},function(e){return e.theme.color.surface3}),Hn=["gtmClass","flex","rowReverse","children","disabled"],Pn=y.default.forwardRef(function(e,n){var t=e.gtmClass,r=e.flex,o=void 0!==r&&r,i=e.rowReverse,a=void 0!==i&&i,l=e.children,u=e.disabled,c=L(e,Hn);/*#__PURE__*/return y.default.createElement(Gn,{className:void 0!==t?"gtm-"+t:"",flex:o,rowReverse:a,"aria-disabled":u},/*#__PURE__*/y.default.createElement(Dn,null,/*#__PURE__*/y.default.createElement(Fn,C({},c,{disabled:u,ref:n})),/*#__PURE__*/y.default.createElement(Vn,null,/*#__PURE__*/y.default.createElement(qn,null))),null!=l&&/*#__PURE__*/y.default.createElement(jn,{rowReverse:a},l))}),jn=w.default.span(cn||(cn=z(["\n  ","\n"])),function(e){return n.css(e.rowReverse?dn||(dn=z(["\n          margin-right: 8px;\n        "])):fn||(fn=z(["\n          margin-left: 8px;\n        "])))}),Gn=w.default.label(sn||(sn=z(["\n  display: inline-flex;\n  align-items: center;\n  ","\n  ","\n  cursor: pointer;\n  outline: 0;\n\n  &[aria-disabled='true'] {\n    cursor: auto;\n  }\n"])),function(e){return e.flex&&n.css(pn||(pn=z(["\n      display: flex;\n      justify-content: space-between;\n    "])))},function(e){var t=e.rowReverse;return n.css(mn||(mn=z(["\n      flex-direction: ",";\n    "])),t?"row-reverse":"row")}),Dn=w.default.span(hn||(hn=z(["\n  display: inline-flex;\n  position: relative;\n  z-index: 0;\n"]))),Vn=w.default.div(vn||(vn=z(["\n  position: relative;\n  box-sizing: border-box;\n  width: 28px;\n  height: 16px;\n  border-radius: 16px;\n  border: 2px solid transparent;\n  background: ",";\n  transition: box-shadow 0.2s, background-color 0.2s;\n"])),function(e){return e.theme.color.text4}),qn=w.default.div(xn||(xn=z(["\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  width: 12px;\n  height: 12px;\n  background-color: ",";\n  border-radius: 50%;\n  transform: translateX(0);\n  transition: transform 0.2s;\n"])),function(e){return e.theme.color.text5}),Fn=w.default.input.attrs({type:"checkbox"})(gn||(gn=z(["\n  position: absolute;\n  /* NOTE: this is contained by the GraphicCheckboxOuter */\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  /* just to control the clickable area if used standalone */\n  border-radius: 16px;\n  opacity: 0;\n  appearance: none;\n  outline: none;\n  cursor: pointer;\n\n  &:checked {\n    ~ "," {\n      background-color: ",";\n\n      "," {\n        transform: translateX(12px);\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: auto;\n\n    ~ "," {\n      opacity: ",";\n    }\n  }\n\n  &:not(:disabled):focus {\n    ~ "," {\n      box-shadow: 0 0 0 4px\n        ",";\n    }\n  }\n"])),Vn,function(e){return e.theme.color.brand},qn,Vn,function(e){return e.theme.elementEffect.disabled.opacity},Vn,function(e){var n=e.theme;return r.applyEffect(n.color.brand,n.elementEffect.disabled)}),Zn=y.default.memo(function(e){var n=e.children,t=e.icon,r=e.show,o=void 0===r||r,i=e.prefix,a=void 0!==i&&i,l=e.width,u=e.fit,c=e.fixed,d=void 0!==c&&c,f=void 0!==u&&u?void 0===l?/*#__PURE__*/y.default.createElement(Jn,{show:o,pre:a},t):/*#__PURE__*/y.default.createElement(ct,{width:l,show:o,pre:a},/*#__PURE__*/y.default.createElement(dt,null,t)):/*#__PURE__*/y.default.createElement(lt,{show:o,pre:a},/*#__PURE__*/y.default.createElement(ut,null,t));/*#__PURE__*/return y.default.createElement(Xn,null,a&&f,/*#__PURE__*/y.default.createElement(Yn,{fixed:d},n),!a&&f)}),Xn=w.default.div(bn||(bn=z(["\n  display: flex;\n  align-items: center;\n"]))),Yn=w.default.div(yn||(yn=z(["\n  ","\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])),function(e){return!e.fixed&&n.css(wn||(wn=z(["\n      min-width: 0;\n      overflow: hidden;\n    "])))});function Jn(n){var t,r,o=n.children,i=n.show,a=n.pre,l=e.useRef(null),u=null!=(t=null==(r=ge(l,[null]))?void 0:r.width)?t:0;/*#__PURE__*/return y.default.createElement(ct,{width:u,show:i,pre:a},/*#__PURE__*/y.default.createElement(dt,{ref:l},o))}var Kn,Qn,$n,et,nt,tt,rt,ot,it=n.css(En||(En=z(["\n  > svg {\n    display: block;\n  }\n"]))),at=n.css(kn||(kn=z(["\n  ",";\n  ","\n"])),function(e){return"collapse"===e.show?n.css(Cn||(Cn=z(["\n          display: none;\n        "]))):n.css(Ln||(Ln=z(["\n          visibility: ",";\n        "])),e.show?"visible":"hidden")},function(e){return n.css(e.pre?zn||(zn=z(["\n          margin-right: 4px;\n        "])):Rn||(Rn=z(["\n          margin-left: 4px;\n        "])))}),lt=w.default.div(Tn||(Tn=z(["\n  display: flex;\n  align-items: center;\n\n  ","\n"])),at),ut=w.default.div(In||(In=z(["\n  display: inline-flex;\n\n  ","\n"])),it),ct=w.default.div(Sn||(Sn=z(["\n  display: flex;\n  position: relative;\n  /* Iconをline-heightに関与させない */\n  height: 0;\n  /* 横方向の領域は確保する */\n  width: ","px;\n\n  ","\n"])),function(e){return e.width},at),dt=w.default.div(Mn||(Mn=z(["\n  display: inline-flex;\n  position: absolute;\n  transform: translateY(-50%);\n\n  ","\n"])),it);function ft(e){throw new Error(0===arguments.length?"unreachable":"unreachable ("+JSON.stringify(e)+")")}function st(e){var n=function(e){switch(e){case Qn.Up:return"rotate(270 12 12)";case Qn.Down:return"rotate(90 12 12)";case Qn.Left:return"rotate(180 12 12)";case Qn.Right:return;default:return ft(e)}}(e.direction);/*#__PURE__*/return y.default.createElement(H,{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:n})}function pt(e){var n=e.direction,t=e.show,r=e.offset,o=void 0===r?0:r,i=e.padding,a=void 0===i?0:i,l=e.bottomOffset,u=void 0===l?0:l,c=e.gradient,d=void 0!==c&&c,f=e.onClick,s=n===ot.Left?{left:d?o-72:o,paddingLeft:Math.max(a,0),paddingBottom:u}:{right:d?o-72:o,paddingRight:Math.max(a,0),paddingBottom:u};/*#__PURE__*/return y.default.createElement(ht,{type:"button",onClick:f,hide:!t,style:s,css:Rt},/*#__PURE__*/y.default.createElement(mt,null,/*#__PURE__*/y.default.createElement(st,{direction:n===ot.Right?Qn.Right:n===ot.Left?Qn.Left:ft()})))}!function(e){e.Up="up",e.Down="down",e.Left="left",e.Right="right"}(Qn||(Qn={})),function(e){e.Right="right",e.Left="left"}(ot||(ot={}));var mt=w.default.div($n||($n=z(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ","px;\n  height: ","px;\n  border-radius: 50%;\n  background-color: ",";\n  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;\n  color: ",";\n"])),40,40,function(e){return e.theme.color.surface4},function(e){return e.theme.color.text5}),ht=w.default.button(et||(et=z(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  min-width: 40px;\n  border: none;\n  outline: 0;\n  background: transparent;\n  cursor: pointer;\n  transition: 0.4s visibility, 0.4s opacity;\n  /* つらい */\n  /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */\n  z-index: 1;\n\n  &:hover "," {\n    background-color: ",";\n    color: ",";\n  }\n\n  &:active "," {\n    background-color: ",";\n    color: ",";\n  }\n\n  ","\n"])),mt,function(e){var n=e.theme;return r.applyEffect(n.color.surface4,n.effect.hover)},function(e){var n=e.theme;return r.applyEffect(n.color.text5,n.effect.hover)},mt,function(e){var n=e.theme;return r.applyEffect(n.color.surface4,n.effect.press)},function(e){var n=e.theme;return r.applyEffect(n.color.text5,n.effect.press)},function(e){return e.hide&&n.css(nt||(nt=z(["\n      visibility: hidden;\n      opacity: 0;\n      pointer-events: none;\n    "])))});w.default(mt)(tt||(tt=z(["\n  cursor: pointer;\n\n  &:hover {\n    background-color: ",";\n    color: ",";\n  }\n\n  &:active {\n    background-color: ",";\n    color: ",";\n  }\n"])),function(e){var n=e.theme;return r.applyEffect(n.color.surface4,n.effect.hover)},function(e){var n=e.theme;return r.applyEffect(n.color.text5,n.effect.hover)},function(e){var n=e.theme;return r.applyEffect(n.color.surface4,n.effect.press)},function(e){var n=e.theme;return r.applyEffect(n.color.text5,n.effect.press)});var vt,xt,gt,bt,yt,wt,Et,kt,Ct,Lt,zt,Rt=n.css(rt||(rt=z(["\n  @media (hover: none) and (pointer: coarse) {\n    display: none;\n  }\n"]))),Tt=["buttonOffset","buttonPadding","bottomOffset","defaultScroll","onScroll","onResize","children","centerItems","onScrollStateChange","scrollAmountCoef"],It=w.default.ul(vt||(vt=z(["\n  vertical-align: top;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n\n  /* 最小幅を100%にして親要素にぴったりくっつけることで子要素で要素を均等に割り付けるなどを出来るようにしてある */\n  min-width: 100%;\n  box-sizing: border-box;\n\n  ","\n"])),function(e){var t=e.centerItems;return n.css(void 0!==t&&t?xt||(xt=z(["\n          display: flex;\n          width: max-content;\n          margin: 0 auto;\n        "])):gt||(gt=z(["\n          display: inline-flex;\n          margin: 0;\n        "])))}),St=w.default.div(bt||(bt=z(["\n  opacity: 0;\n  transition: 0.4s opacity;\n"]))),Mt=w.default.div(yt||(yt=z(["\n  &:hover "," {\n    opacity: 1;\n  }\n\n  /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */\n  position: relative;\n  z-index: 0;\n"])),St),Ot=w.default(l.animated.div)(wt||(wt=z(["\n  overflow-x: auto;\n  padding: 0;\n  margin: 0;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  scrollbar-width: none;\n"]))),Nt=w.default.div(Et||(Et=z(["\n  /* NOTE: LeftGradientがはみ出るためhidden */\n  overflow: hidden;\n  ","\n\n  margin-right: ","px;\n  /* stylelint-disable-next-line no-duplicate-selectors */\n  "," {\n    padding-right: ","px;\n  }\n"])),function(e){return!e.fadeInGradient&&n.css(kt||(kt=z(["\n      margin-left: ","px;\n      "," {\n        padding-left: ","px;\n      }\n    "])),-72,It,72)},-72,It,72),Bt=w.default.div(Ct||(Ct=z(["\n  mask-image: linear-gradient(\n    to right,\n    #000 calc(100% - ","px),\n    transparent\n  );\n"])),72),At=w.default.div(Lt||(Lt=z(["\n  /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */\n  margin-right: ","px;\n  padding-right: ","px;\n  /* NOTE: mask-position に transition をつけたいが vender prefixes 対策で all につける */\n  transition: 0.2s all ease-in;\n  mask: linear-gradient(to right, transparent, #000 ","px)\n    ","px 0;\n"])),-72,72,72,function(e){return e.show?0:-72});function Wt(e){var n=e.size;/*#__PURE__*/return y.default.createElement(Ht,{viewBox:"0 0 20 6",width:n,height:n},/*#__PURE__*/y.default.createElement("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\n          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\n          C10.6192881,14.5 9.5,13.3807119 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5\n          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\n          C17.6192881,14.5 16.5,13.3807119 16.5,12 C16.5,10.6192881 17.6192881,9.5 19,9.5\n          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)"}))}Wt.defaultProps={size:16};var _t,Ut,Ht=w.default.svg(zt||(zt=z(["\n  fill: currentColor;\n"])));function Pt(e){var n=e.size;/*#__PURE__*/return y.default.createElement("svg",{viewBox:"0 0 10 8",width:n,height:n},/*#__PURE__*/y.default.createElement(Ft,{strokeWidth:"2",points:"1,2 5,6 9,2",transform:jt(e.direction)}))}function jt(e){switch(e){case Ut.Up:return"rotate(180 5 4)";case Ut.Down:return;case Ut.Left:return"rotate(90 5 4)";case Ut.Right:return"rotate(-90 5 4)";default:return ft(e)}}!function(e){e.Up="up",e.Down="down",e.Left="left",e.Right="right"}(Ut||(Ut={})),Pt.defaultProps={size:16,white:!1,lightGray:!1};var Gt,Dt,Vt,qt,Ft=w.default.polyline(_t||(_t=z(["\n  fill: none;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n  stroke: currentColor;\n"])));function Zt(n,t,r){void 0===r&&(r=7),"production"!==process.env.NODE_ENV&&(k.default((0|n)===n,"`page` must be interger ("+n+")"),k.default((0|t)===t,"`pageCount` must be interger ("+t+")"));var o=e.useMemo(function(){var e=1,o=Math.min(t,Math.max(n+Math.floor(r/2),r));if(o<=r)return Array.from({length:1+o-e},function(n,t){return e+t});var i=o-(r-1)+2;return[e,"..."].concat(Array.from({length:1+o-i},function(e,n){return i+n}))},[n,t,r]);return e.useDebugValue(o),o}var Xt,Yt,Jt,Kt=y.default.memo(function(n){var t=n.page,r=n.pageCount,o=n.onChange,i=Zt(t,r),a=e.useCallback(function(e){return function(){o(e)}},[o]),l=t<r,u=t>1;/*#__PURE__*/return y.default.createElement(Qt,null,/*#__PURE__*/y.default.createElement($t,{type:"button",hidden:!u,disabled:!u,onClick:a(Math.max(1,t-1)),noBackground:!0},/*#__PURE__*/y.default.createElement(Pt,{size:16,direction:Ut.Left})),i.map(function(e){return"..."===e?/*#__PURE__*/y.default.createElement(er,{key:e},/*#__PURE__*/y.default.createElement(Wt,{size:20})):/*#__PURE__*/y.default.createElement($t,e===t?{key:e,type:"button","aria-current":!0}:{key:e,type:"button",onClick:a(e)},/*#__PURE__*/y.default.createElement(nr,null,e))}),/*#__PURE__*/y.default.createElement($t,{type:"button",hidden:!l,disabled:!l,onClick:a(Math.min(r,t+1)),noBackground:!0},/*#__PURE__*/y.default.createElement(Pt,{size:16,direction:Ut.Right})))}),Qt=w.default.nav(Gt||(Gt=z(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),$t=w.default.button(Dt||(Dt=z(["\n  font-size: 1rem;\n  line-height: calc(1em + 8px);\n  text-decoration: none;\n  border: none;\n  outline: none;\n  touch-action: manipulation;\n  user-select: none;\n  transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s,\n    background 0.2s ease 0s, opacity 0.2s ease 0s;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-sizing: content-box;\n  min-width: 24px;\n  min-height: 24px;\n  padding: 8px;\n  cursor: pointer;\n  font-weight: bold;\n  /* HACK:\n   * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.\n   * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.\n   */\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-transform: translateZ(0);\n\n  &[hidden] {\n    visibility: hidden;\n    display: block;\n  }\n\n  border-radius: 48px;\n\n  background: transparent;\n  color: ",";\n\n  &:hover {\n    background: ",";\n    color: ",";\n  }\n\n  &[aria-current] {\n    background-color: ",";\n    color: ",";\n  }\n\n  &[aria-current]:hover {\n    background-color: ",";\n    color: ",";\n  }\n\n  ","\n"])),function(e){return e.theme.color.text3},function(e){return e.theme.color.surface3},function(e){return e.theme.color.text2},function(e){return e.theme.color.surface6},function(e){return e.theme.color.text5},function(e){return e.theme.color.surface6},function(e){return e.theme.color.text5},function(e){var t=e.noBackground;return void 0!==t&&t&&n.css(Vt||(Vt=z(["\n      /* stylelint-disable-next-line no-duplicate-selectors */\n      &:hover {\n        background: transparent;\n      }\n    "])))}),er=w.default($t).attrs({type:"button",disabled:!0})(qt||(qt=z(["\n  && {\n    color: ",";\n    background: none;\n  }\n"])),function(e){return e.theme.color.text3}),nr="span",tr=w.default.div.attrs({role:"progressbar"})(Xt||(Xt=z(["\n  margin: auto;\n  padding: ","px;\n  border-radius: 8px;\n  font-size: ","px;\n  width: ","px;\n  height: ","px;\n  background-color: ",";\n  color: ",";\n"])),function(e){return e.padding},function(e){return e.size},function(e){return e.size},function(e){return e.size},function(e){return e.transparent?"transparent":c.transparentize(.32,e.theme.color.background1)},function(e){return e.theme.color.text4}),rr=n.keyframes(Yt||(Yt=z(["\n  from {\n    transform: scale(0);\n    opacity: 1;\n  }\n\n  to {\n    transform: scale(1);\n    opacity: 0;\n  }\n"]))),or=w.default.div.attrs({role:"presentation"})(Jt||(Jt=z(["\n  width: 1em;\n  height: 1em;\n  border-radius: 1em;\n  background-color: currentColor;\n  animation: "," 1s both ease-out;\n  animation-iteration-count: ",";\n\n  &[data-reset-animation] {\n    animation: none;\n  }\n"])),rr,function(e){return e.once?1:"infinite"}),ir=y.default.forwardRef(function(n,t){var r=n.once,o=void 0!==r&&r,i=e.useRef(null);return e.useImperativeHandle(t,function(){return{restart:function(){i.current&&(i.current.dataset.resetAnimation="true",delete i.current.dataset.resetAnimation)}}}),/*#__PURE__*/y.default.createElement(or,{ref:i,once:o})});Object.defineProperty(exports,"ComponentAbstraction",{enumerable:!0,get:function(){return t.ComponentAbstraction}}),Object.defineProperty(exports,"useComponentAbstraction",{enumerable:!0,get:function(){return t.useComponentAbstraction}}),exports.CancelLayoutItemBodyPadding=function(n){var t=n.children,r=n.cancelTop,o=e.useContext(Oe);/*#__PURE__*/return y.default.createElement(qe,{wide:o.wide,cancelTop:r},t)},exports.Carousel=function(n){var t=n.buttonOffset,r=void 0===t?0:t,o=n.buttonPadding,i=void 0===o?16:o,a=n.bottomOffset,u=void 0===a?0:a,c=n.defaultScroll,d=(c=void 0===c?{}:c).align,f=void 0===d?"left":d,s=c.offset,p=void 0===s?0:s,m=n.onScroll,h=n.onResize,v=n.children,x=n.centerItems,g=n.onScrollStateChange,b=n.scrollAmountCoef,w=void 0===b?.75:b,E=L(n,Tt),k=function(n){var t=e.useState(0),r=t[0],o=t[1],i=e.useRef();return[r,e.useCallback(function(e,n){void 0===n&&(n=!1),n?o(e):void 0===i.current&&(i.current=requestAnimationFrame(function(){o(e),void 0!==i.current&&(i.current=void 0)}))},[])]}(),C=k[0],z=k[1],R=e.useRef(!1),T=e.useState(0),I=T[0],S=T[1],M=e.useState(!1),O=M[0],N=M[1],B=e.useState(!1),A=B[0],W=B[1],_=l.useSpring(function(){return{scroll:0}}),U=_[0],H=_[1],P=e.useRef(null),j=e.useRef(null),G=e.useRef(null),D=e.useCallback(function(){if(null!==j.current){var e=Math.min(C+j.current.clientWidth*w,I);z(e,!0),H({scroll:e,from:{scroll:C},reset:!R.current}),R.current=!0}},[R,I,C,H,w,z]),V=e.useCallback(function(){if(null!==j.current){var e=Math.max(C-j.current.clientWidth*w,0);z(e,!0),H({scroll:e,from:{scroll:C},reset:!R.current}),R.current=!0}},[R,C,H,w,z]);e.useEffect(function(){var e=C>0,n=C<I&&I>0;e===O&&n===A||(N(e),W(n),null==g||g(e||n))},[O,I,g,A,C]);var q=e.useCallback(function(){null!==P.current&&(R.current&&(U.scroll.stop(),R.current=!1),z(P.current.scrollLeft))},[R,z,U]),F=e.useCallback(function(){if(null!==P.current){var e=P.current,n=e.clientWidth;S(e.scrollWidth-n),h&&h(n)}},[h]);e.useLayoutEffect(function(){var e=P.current,n=G.current;if(null!==e&&null!==n){e.addEventListener("wheel",q,function(){if(void 0!==Kn)return Kn;Kn=!1;try{var e=Object.defineProperty({},"passive",{get:function(){return Kn=!0}});window.addEventListener("test",n,e),window.removeEventListener("test",n)}catch(e){}return Kn;function n(){}}()&&{passive:!0});var t=new ResizeObserver(F);t.observe(e);var r=new ResizeObserver(F);return r.observe(n),function(){e.removeEventListener("wheel",q),t.disconnect(),r.disconnect()}}},[F,q]),e.useLayoutEffect(function(){if("left"!==f||0!==p){var e=P.current;if(null!==e){var n=Math.max(0,Math.min("left"===f&&p>0?p:"center"===f?I/2+p:"right"===f&&p<=I?I-p/2:0,I));e.scrollLeft=n,z(n,!0)}}},[P.current]);var Z=e.useCallback(function(){null!==P.current&&m&&m(P.current.scrollLeft)},[m]),X=e.useState(!1),Y=X[0],J=X[1];if(e.useLayoutEffect(function(){navigator.userAgent.includes("Edge/")&&J(!0)},[]),!Y&&!0===E.hasGradient){var K,Q=null!=(K=E.fadeInGradient)&&K,$=!Q;/*#__PURE__*/return y.default.createElement(Mt,{ref:j},/*#__PURE__*/y.default.createElement(Nt,{fadeInGradient:Q},/*#__PURE__*/y.default.createElement(Bt,null,/*#__PURE__*/y.default.createElement(At,{show:$||C>0},/*#__PURE__*/y.default.createElement(Ot,{ref:P,scrollLeft:U.scroll,onScroll:Z},/*#__PURE__*/y.default.createElement(It,{ref:G,centerItems:x},v))))),/*#__PURE__*/y.default.createElement(St,null,/*#__PURE__*/y.default.createElement(pt,{direction:ot.Left,show:O,offset:r,bottomOffset:u,padding:i,gradient:$,onClick:V}),/*#__PURE__*/y.default.createElement(pt,{direction:ot.Right,show:A,offset:r,bottomOffset:u,padding:i,gradient:!0,onClick:D})))}/*#__PURE__*/return y.default.createElement(Mt,{ref:j},/*#__PURE__*/y.default.createElement(Ot,{ref:P,scrollLeft:U.scroll,onScroll:Z},/*#__PURE__*/y.default.createElement(It,{ref:G,centerItems:x},v)),/*#__PURE__*/y.default.createElement(St,null,/*#__PURE__*/y.default.createElement(pt,{direction:ot.Left,show:O,offset:r,bottomOffset:u,padding:i,onClick:V}),/*#__PURE__*/y.default.createElement(pt,{direction:ot.Right,show:A,offset:r,bottomOffset:u,padding:i,onClick:D})))},exports.Filter=_,exports.FilterButton=I,exports.FilterIconButton=S,exports.FilterLink=M,exports.HintText=function(e){var n=e.children;/*#__PURE__*/return y.default.createElement(de,{className:e.className,context:e.context},/*#__PURE__*/y.default.createElement(fe,null,/*#__PURE__*/y.default.createElement(D,null)),/*#__PURE__*/y.default.createElement(se,null,n))},exports.LAYOUT_ITEM_BODY_PADDING=De,exports.Layout=function(e){var n=e.menu,t=e.children,r=e.header,o=e.center,i=void 0!==o&&o,a=e.wide,l=e.isHeaderTopMenu,u=void 0!==l&&l,c={center:i,wide:!!i||null!=a&&a,withLeft:null!=n&&!u};/*#__PURE__*/return y.default.createElement(Ae,null,/*#__PURE__*/y.default.createElement(Oe.Provider,{value:c},c.withLeft&&/*#__PURE__*/y.default.createElement(We,null,n),/*#__PURE__*/y.default.createElement(_e,{center:i},null!=r&&/*#__PURE__*/y.default.createElement(Ue,null,r),u&&/*#__PURE__*/y.default.createElement(Ne,null,n),/*#__PURE__*/y.default.createElement(He,null,t))),/*#__PURE__*/y.default.createElement(Be,null))},exports.LayoutItem=Pe,exports.LayoutItemBody=function(n){var t=n.children,r=n.horizontal,o=void 0!==r&&r,i=n.narrow,a=void 0!==i&&i,l=e.useContext(Oe);/*#__PURE__*/return y.default.createElement(Ve,{wide:l.wide,horizontal:o,narrow:a},t)},exports.LayoutItemHeader=function(n){var t=n.children,r=e.useContext(Oe);/*#__PURE__*/return y.default.createElement(Ge,{wide:r.wide,center:r.center},t)},exports.LeftMenu=function(e){var n=e.links,r=e.active,o=t.useComponentAbstraction().Link;/*#__PURE__*/return y.default.createElement(_n,null,n.map(function(e,n){/*#__PURE__*/return y.default.createElement(o,{to:e.to,key:n},/*#__PURE__*/y.default.createElement(Un,{"aria-current":e.id===r||void 0},e.text))}))},exports.LeftMenuContent=function(e){/*#__PURE__*/return y.default.createElement(y.default.Fragment,null,e.links.map(function(e,n){/*#__PURE__*/return y.default.createElement(an,{link:e.to,key:n,primary:e.text})}))},exports.LinkPager=function(e){var n=e.page,r=e.pageCount,o=e.makeUrl,i=t.useComponentAbstraction().Link,a=Zt(n,r),l=n<r,u=n>1;/*#__PURE__*/return y.default.createElement(Qt,null,/*#__PURE__*/y.default.createElement(i,{to:o(Math.max(1,n-1))},/*#__PURE__*/y.default.createElement($t,{hidden:!u,"aria-disabled":!u,noBackground:!0},/*#__PURE__*/y.default.createElement(Pt,{size:16,direction:Ut.Left}))),a.map(function(e){return"..."===e?/*#__PURE__*/y.default.createElement(er,{key:e},/*#__PURE__*/y.default.createElement(Wt,{size:20,subLink:!0})):e===n?/*#__PURE__*/y.default.createElement($t,{key:e,type:"button","aria-current":!0},/*#__PURE__*/y.default.createElement(nr,null,e)):/*#__PURE__*/y.default.createElement(i,{key:e,to:o(e)},/*#__PURE__*/y.default.createElement($t,{type:"button"},/*#__PURE__*/y.default.createElement(nr,null,e)))}),/*#__PURE__*/y.default.createElement(i,{to:o(Math.min(r,n+1))},/*#__PURE__*/y.default.createElement($t,{hidden:!l,"aria-disabled":!l,noBackground:!0},/*#__PURE__*/y.default.createElement(Pt,{size:16,direction:Ut.Right}))))},exports.MAIN_COLUMN_HORIZONTAL_MIN_MARGIN=72,exports.MenuListItem=en,exports.MenuListItemContext=$e,exports.MenuListItemWithIcon=function(e){var n=e.icon,t=e.primary,r=L(e,Qe);/*#__PURE__*/return y.default.createElement(en,C({primary:/*#__PURE__*/y.default.createElement(Nn,null,/*#__PURE__*/y.default.createElement(Bn,null,n),t)},r))},exports.MenuListLabel=Wn,exports.MenuListLinkItem=an,exports.MenuListLinkItemWithIcon=function(e){var n=e.icon,t=e.primary,r=L(e,Ke);/*#__PURE__*/return y.default.createElement(an,C({primary:/*#__PURE__*/y.default.createElement(Nn,null,/*#__PURE__*/y.default.createElement(Bn,null,n),t)},r))},exports.MenuListSpacer=An,exports.Pager=Kt,exports.RESPONSIVE_LEFT_WIDTH=pe,exports.RESPONSIVE_MAIN_MAX_WIDTH=me,exports.Spinner=function(e){var n=e.size,t=e.padding,r=e.transparent;/*#__PURE__*/return y.default.createElement(tr,{size:void 0===n?48:n,padding:void 0===t?16:t,transparent:void 0!==r&&r},/*#__PURE__*/y.default.createElement(ir,null))},exports.SpinnerIcon=ir,exports.StyledCancelLayoutItemBodyPadding=qe,exports.StyledLayoutItemBody=Ve,exports.SwitchCheckbox=Pn,exports.TextEllipsis=Ye,exports.WithIcon=Zn,exports.useElementSize=ge,exports.useLayoutItemBodyPadding=function(){var n=e.useContext(Oe).wide;return he()?De.column1:n?De.wide:De.default},exports.useMedia=ve,exports.useMediaScreen1=he;
+var React = require('react');
+var styled = require('styled-components');
+var react = require('@charcoal-ui/react');
+var utils = require('@charcoal-ui/utils');
+var styled$1 = require('@charcoal-ui/styled');
+var foundation = require('@charcoal-ui/foundation');
+var ReactDOM = require('react-dom');
+var reactSpring = require('react-spring');
+var warning = require('warning');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var warning__default = /*#__PURE__*/_interopDefaultLegacy(warning);
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  strings.raw = raw;
+  return strings;
+}
+
+var _templateObject$e, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5;
+
+var _excluded$3 = ["onClick", "children", "active", "hover", "reactive"];
+var FilterButton = React__default["default"].forwardRef(function FilterButton(_ref, ref) {
+  var onClick = _ref.onClick,
+      children = _ref.children,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      hover = _ref.hover,
+      _ref$reactive = _ref.reactive,
+      reactive = _ref$reactive === void 0 ? false : _ref$reactive;
+  return /*#__PURE__*/React__default["default"].createElement(ButtonLike, {
+    active: active,
+    reactive: reactive,
+    hover: hover,
+    onClick: active && !reactive ? undefined : onClick,
+    ref: ref
+  }, children);
+});
+var FilterIconButton = React__default["default"].forwardRef(function FilterIconButton(_ref2, ref) {
+  var onClick = _ref2.onClick,
+      children = _ref2.children,
+      _ref2$active = _ref2.active,
+      active = _ref2$active === void 0 ? false : _ref2$active,
+      hover = _ref2.hover,
+      _ref2$reactive = _ref2.reactive,
+      reactive = _ref2$reactive === void 0 ? false : _ref2$reactive,
+      width = _ref2.width,
+      height = _ref2.height;
+  return /*#__PURE__*/React__default["default"].createElement(StyledButtonLike, {
+    active: active,
+    reactive: reactive,
+    hover: hover,
+    onClick: active && !reactive ? undefined : onClick,
+    ref: ref,
+    buttonWidth: width,
+    buttonHeight: height
+  }, children);
+});
+var FilterLink = React__default["default"].forwardRef(function FilterLink(_ref3, ref) {
+  var onClick = _ref3.onClick,
+      children = _ref3.children,
+      _ref3$active = _ref3.active,
+      active = _ref3$active === void 0 ? false : _ref3$active,
+      hover = _ref3.hover,
+      _ref3$reactive = _ref3.reactive,
+      reactive = _ref3$reactive === void 0 ? false : _ref3$reactive,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
+
+  var _useComponentAbstract = react.useComponentAbstraction(),
+      Link = _useComponentAbstract.Link;
+
+  if (active && !reactive) {
+    return /*#__PURE__*/React__default["default"].createElement(PlainElement, {
+      active: true,
+      hover: hover,
+      ref: ref
+    }, children);
+  } else {
+    return /*#__PURE__*/React__default["default"].createElement(Link, _extends({}, props, {
+      onClick: onClick
+    }), /*#__PURE__*/React__default["default"].createElement(PlainElement, {
+      active: active,
+      reactive: reactive,
+      hover: hover,
+      ref: ref
+    }, children));
+  }
+});
+var buttonCss = styled.css(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  display: block;\n  outline: none;\n  border: none;\n  padding: 9px 24px;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  border-radius: /* absurd radius, but ensures rounded corners */ 2000px;\n  transition: color 0.2s;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n\n  &:hover {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  @media ", " {\n    padding: 5px 16px;\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.color.text3;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.color.text2;
+}, function (_ref6) {
+  var _ref6$hover = _ref6.hover,
+      hover = _ref6$hover === void 0 ? false : _ref6$hover;
+  return hover && styled.css(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), function (_ref7) {
+    var theme = _ref7.theme;
+    return theme.color.text2;
+  });
+}, function (_ref8) {
+  var _ref8$active = _ref8.active,
+      active = _ref8$active === void 0 ? false : _ref8$active;
+  return active && styled.css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      color: ", ";\n    "])), function (_ref9) {
+    var theme = _ref9.theme;
+    return theme.color.surface3;
+  }, function (_ref10) {
+    var theme = _ref10.theme;
+    return theme.color.text2;
+  });
+}, function (_ref11) {
+  var _ref11$active = _ref11.active,
+      active = _ref11$active === void 0 ? false : _ref11$active,
+      _ref11$reactive = _ref11.reactive,
+      reactive = _ref11$reactive === void 0 ? false : _ref11$reactive;
+  return active && !reactive && styled.css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+});
+var padding0Css = styled.css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  padding: 0;\n\n  @media ", " {\n    padding: 0;\n  }\n"])), function (_ref13) {
+  var theme = _ref13.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+});
+var ButtonLike = styled__default["default"].button(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonCss);
+var PlainElement = styled__default["default"].span(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonCss);
+var StyledButtonLike = styled__default["default"](ButtonLike)(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "\n  ", "\n"])), padding0Css, function (p) {
+  return p.buttonWidth !== undefined && "width: " + p.buttonWidth + "px;";
+}, function (p) {
+  return p.buttonHeight !== undefined && "height: " + p.buttonHeight + "px;";
+});
+var Filter = styled__default["default"].div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+
+var theme = styled$1.createTheme(styled__default["default"]);
+
+var _templateObject$d;
+function IconBase(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      viewBoxSize = _ref.viewBoxSize,
+      currentColor = _ref.currentColor,
+      path = _ref.path,
+      transform = _ref.transform,
+      fillRule = _ref.fillRule,
+      clipRule = _ref.clipRule;
+  return /*#__PURE__*/React__default["default"].createElement(Icon$2, {
+    viewBox: "0 0 " + viewBoxSize + " " + viewBoxSize,
+    size: size,
+    currentColor: currentColor
+  }, /*#__PURE__*/React__default["default"].createElement(IconBasePath, {
+    path: path,
+    transform: transform,
+    fillRule: fillRule,
+    clipRule: clipRule
+  }));
+}
+var Icon$2 = styled__default["default"].svg(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  stroke: none;\n  fill: ", ";\n  width: ", "px;\n  height: ", "px;\n  line-height: 0;\n  font-size: 0;\n  vertical-align: middle;\n"])), function (_ref2) {
+  var _ref2$currentColor = _ref2.currentColor,
+      currentColor = _ref2$currentColor === void 0 ? false : _ref2$currentColor,
+      theme = _ref2.theme;
+  return currentColor ? 'currentColor' : theme.color.text2;
+}, function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+});
+var IconBasePath = function IconBasePath(_ref3) {
+  var path = _ref3.path,
+      transform = _ref3.transform,
+      fillRule = _ref3.fillRule,
+      clipRule = _ref3.clipRule;
+
+  if (typeof path === 'string') {
+    return /*#__PURE__*/React__default["default"].createElement("path", {
+      d: path,
+      transform: transform,
+      fillRule: fillRule,
+      clipRule: clipRule
+    });
+  } else {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, path);
+  }
+};
+
+var _templateObject$c;
+var size$1 = 16;
+function InfoIcon() {
+  var path = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("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"
+  }), /*#__PURE__*/React__default["default"].createElement(Path, {
+    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"
+  }));
+  return /*#__PURE__*/React__default["default"].createElement(IconBase, {
+    viewBoxSize: size$1,
+    size: size$1,
+    currentColor: true,
+    path: path
+  });
+}
+var Path = styled__default["default"].path(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  fill: ", ";\n  fill-rule: evenodd;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.color.surface1;
+});
+
+var _templateObject$b, _templateObject2$9, _templateObject3$8, _templateObject4$7;
+function HintText(_ref) {
+  var children = _ref.children,
+      context = _ref.context,
+      className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement(Container$2, {
+    className: className,
+    context: context
+  }, /*#__PURE__*/React__default["default"].createElement(IconWrap, null, /*#__PURE__*/React__default["default"].createElement(InfoIcon, null)), /*#__PURE__*/React__default["default"].createElement(Text$2, null, children));
+}
+var Container$2 = styled__default["default"].div.attrs(styledProps)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }\n\n  display: flex;\n  align-items: flex-start;\n  ", "\n"])), function (p) {
+  return theme(function (o) {
+    return [o.bg.surface3, o.borderRadius(8), o.padding.vertical(p["default"].vertical), o.padding.horizontal(p["default"].horizontal)];
+  });
+}, function (_ref2) {
+  var t = _ref2.theme;
+  return utils.maxWidth(t.breakpoint.screen1);
+}, function (p) {
+  return theme(function (o) {
+    return [o.padding.vertical(p.screen1.vertical), o.padding.horizontal(p.screen1.horizontal)];
+  });
+}, function (p) {
+  return p.context === 'page' && styled.css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n      justify-content: center;\n    "])));
+});
+var IconWrap = styled__default["default"].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n  height: 22px;\n  margin: -4px 4px -4px 0;\n"])), function (p) {
+  return p.theme.color.text4;
+});
+var Text$2 = styled__default["default"].p(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  ", "\n  margin: 0;\n"])), theme(function (o) {
+  return [o.font.text2, o.typography(14)];
+}));
+
+function styledProps(props) {
+  return _extends({}, props, contextToProps(props.context));
+}
+
+function contextToProps(context) {
+  switch (context) {
+    case 'page':
+      return {
+        "default": {
+          horizontal: 40,
+          vertical: 24
+        },
+        screen1: {
+          horizontal: 16,
+          vertical: 16
+        }
+      };
+
+    case 'section':
+      return {
+        "default": {
+          horizontal: 16,
+          vertical: 16
+        },
+        screen1: {
+          horizontal: 16,
+          vertical: 16
+        }
+      };
+  }
+}
+
+var MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72;
+var RESPONSIVE_LEFT_WIDTH = foundation.columnSystem(2, foundation.COLUMN_UNIT, foundation.GUTTER_UNIT) + foundation.GUTTER_UNIT;
+var RESPONSIVE_MAIN_MAX_WIDTH = foundation.columnSystem(12, foundation.COLUMN_UNIT, foundation.GUTTER_UNIT);
+
+/**
+ * 現在の画面幅がモバイル幅かどうかを返す
+ */
+
+function useMediaScreen1() {
+  return useMedia(utils.maxWidth(styled.useTheme().breakpoint.screen1));
+}
+/**
+ * Returns a dynamically-updating media query result.
+ *
+ * When the media query's matching state changes, this hook's result
+ * will update with sync priority.
+ *
+ * @param query A full media query (the string written between `@media` and the `{` in CSS)
+ * @returns true if the query matches, false if it doesn't
+ */
+
+function useMedia(query) {
+  var matcher = React.useMemo(function () {
+    return __TEST__ ? {
+      matches: false,
+      addListener: function addListener() {// do nothing
+      },
+      removeListener: function removeListener() {// do nothing
+      }
+    } : matchMedia(query);
+  }, [query]);
+
+  var _useState = React.useState(matcher.matches),
+      matches = _useState[0],
+      setMatches = _useState[1]; // can only happen if/when the query changes
+
+
+  if (matcher.matches !== matches) {
+    setMatches(matcher.matches);
+  }
+
+  var callback = function callback(e) {
+    // We're not on a React event listener, so React doesn't know the priority of the setState call
+    // Media query updates _are_ very high priority to avoid FOUC
+    // so we need to emit a sync priority update
+    try {
+      // However, flushSync may throw if the matcher is triggered by a
+      // forced relayout that happens during a React lifecycle handler.
+      // Try to be resilient and retry without flushSync if flushSync throws.
+      ReactDOM__default["default"].flushSync(function () {
+        setMatches(e.matches);
+      });
+    } catch (_unused) {
+      setMatches(e.matches);
+    }
+  };
+
+  React.useLayoutEffect(function () {
+    matcher.addListener(callback); // sync update
+
+    setMatches(matcher.matches);
+    return function () {
+      matcher.removeListener(callback);
+    };
+  }, [matcher]);
+  React.useDebugValue(query + ": " + matches.toString());
+  return matches;
+}
+
+function measure(ref) {
+  return ref !== null ? ref.getBoundingClientRect() : undefined;
+}
+
+function useElementSize(ref, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  // _don't_ call measure synchronously here even if you somehow can
+  // measurement has to be done outside the render phase, either
+  // as the resize observer callback or as a layout effect
+  var _useReducer = React.useReducer(function (state, next) {
+    // width, height, etc are not own properties but getters in the prototype
+    // can't use shallowEqual or other iterative checks
+    if (state === undefined || next === undefined) {
+      return next;
+    }
+
+    if (state.height === next.height && state.width === next.width) {
+      return state;
+    }
+
+    return next;
+  }, undefined),
+      size = _useReducer[0],
+      setSize = _useReducer[1];
+
+  var _useState2 = React.useState(null),
+      watch = _useState2[0],
+      setWatch = _useState2[1];
+
+  React.useLayoutEffect(function () {
+    if (watch === null) {
+      return;
+    }
+
+    var observer = new ResizeObserver(function () {
+      // NOTE: the ResizeObserverCallback receives a rect,
+      // but it's not measured in the same way as getBoundingClientRect,
+      // which causes unstable layout
+      var newSize = measure(watch);
+      setSize(newSize);
+    }); // The ResizeObserver is supposed to call handleResize on observe
+
+    observer.observe(watch);
+    return function () {
+      // this will correctly unobserve if either the observer
+      // or the current changes, and even on unmount
+      // no need for an observer.disconnect() 🎉
+      observer.unobserve(watch);
+      setSize(undefined);
+    };
+  }, [watch]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  React.useLayoutEffect(function () {
+    if (ref.current !== watch) {
+      setWatch(ref.current);
+    }
+  });
+  React.useLayoutEffect(function () {
+    if (deps.length > 0) {
+      // Sync measuring
+      setSize(measure(ref.current));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, deps);
+  React.useDebugValue(size);
+  return size;
+}
+/**
+ * Debounce version of setState with `requestAnimationFrame`
+ *
+ * @param defaultValue Default value for `useState`
+ */
+
+function useDebounceAnimationState(defaultValue) {
+  var _useState3 = React.useState(defaultValue),
+      state = _useState3[0],
+      setState = _useState3[1];
+
+  var timer = React.useRef(); // typescript bug? (any when omitting type annotation)
+  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+
+  var setDebounceState = React.useCallback(function (value, force) {
+    if (force === void 0) {
+      force = false;
+    }
+
+    if (force) {
+      setState(value);
+      return;
+    }
+
+    if (timer.current !== undefined) {
+      return;
+    }
+
+    timer.current = requestAnimationFrame(function () {
+      setState(value);
+
+      if (timer.current !== undefined) {
+        timer.current = undefined;
+      }
+    });
+  }, []);
+  return [state, setDebounceState];
+}
+
+var _templateObject$a, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$5, _templateObject6$4, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15;
+var LayoutConfigContext = React__default["default"].createContext({
+  wide: false,
+  center: false,
+  withLeft: false
+});
+function Layout(_ref) {
+  var menu = _ref.menu,
+      children = _ref.children,
+      header = _ref.header,
+      _ref$center = _ref.center,
+      center = _ref$center === void 0 ? false : _ref$center,
+      wide = _ref.wide,
+      _ref$isHeaderTopMenu = _ref.isHeaderTopMenu,
+      isHeaderTopMenu = _ref$isHeaderTopMenu === void 0 ? false : _ref$isHeaderTopMenu;
+  var config = {
+    center: center,
+    wide: center ? true : wide != null ? wide : false,
+    withLeft: menu != null && !isHeaderTopMenu
+  };
+  return /*#__PURE__*/React__default["default"].createElement(LayoutRoot, null, /*#__PURE__*/React__default["default"].createElement(LayoutConfigContext.Provider, {
+    value: config
+  }, config.withLeft && /*#__PURE__*/React__default["default"].createElement(LeftArea, null, menu), /*#__PURE__*/React__default["default"].createElement(MainArea, {
+    center: center
+  }, header != null && /*#__PURE__*/React__default["default"].createElement(Header, null, header), isHeaderTopMenu && /*#__PURE__*/React__default["default"].createElement(HeaderTopMenuContainer, null, menu), /*#__PURE__*/React__default["default"].createElement(Grid, null, children))), /*#__PURE__*/React__default["default"].createElement(GlobalStyle, null));
+}
+var HeaderTopMenuContainer = styled__default["default"].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  margin-bottom: 40px;\n  overflow-x: auto;\n  word-break: keep-all;\n\n  @media ", " {\n    margin-bottom: 0;\n    padding-left: 16px;\n    padding-bottom: 16px;\n    background-color: ", ";\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.color.surface2;
+});
+var GlobalStyle = styled.createGlobalStyle(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  :root {\n    background-color: ", ";\n\n    @media ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.color.background2;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.color.background1;
+});
+var LayoutRoot = styled__default["default"].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: ", ";\n\n  @media ", " {\n    background-color: ", ";\n  }\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.color.background2;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.color.background1;
+});
+var LeftArea = styled__default["default"].div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  min-width: ", "px;\n  padding: 40px 0 40px ", "px;\n  box-sizing: border-box;\n\n  @media ", " {\n    display: none;\n  }\n"])), RESPONSIVE_LEFT_WIDTH, foundation.GUTTER_UNIT, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.breakpoint.screen3;
+});
+var MainArea = styled__default["default"].div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  flex-grow: 1;\n  /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\n  max-width: ", "px;\n  padding: 40px ", "px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n\n  @media ", " {\n    padding: 0;\n  }\n"])), function (p) {
+  return p.center ? foundation.columnSystem(6, foundation.COLUMN_UNIT, foundation.GUTTER_UNIT) : RESPONSIVE_MAIN_MAX_WIDTH;
+}, MAIN_COLUMN_HORIZONTAL_MIN_MARGIN, function (_ref11) {
+  var theme = _ref11.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+});
+var Header = styled__default["default"].div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  margin-bottom: 12px;\n  font-size: 20px;\n  line-height: 28px;\n  color: ", ";\n\n  @media ", " {\n    margin-bottom: 0;\n    padding: 12px;\n    font-size: 16px;\n    line-height: 24px;\n    display: flex;\n    justify-content: center;\n    background-color: ", ";\n  }\n"])), function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.color.text2;
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.color.surface2;
+});
+var Grid = styled__default["default"].div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: ", "px;\n  grid-template-columns: 1fr;\n  grid-auto-columns: 1fr;\n  grid-auto-rows: auto;\n\n  @media ", " {\n    gap: 0;\n    background-color: ", ";\n    padding-bottom: 60px;\n  }\n"])), foundation.GUTTER_UNIT, function (_ref15) {
+  var theme = _ref15.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.color.background1;
+});
+var LayoutItem = React__default["default"].forwardRef(function LayoutItem(_ref17, ref) {
+  var span = _ref17.span,
+      children = _ref17.children;
+
+  var _useContext = React.useContext(LayoutConfigContext),
+      withLeft = _useContext.withLeft;
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledLayoutItem, {
+    span: span,
+    withLeft: withLeft,
+    ref: ref
+  }, children);
+});
+var StyledLayoutItem = styled__default["default"].div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n  grid-column-start: auto;\n  grid-column-end: span ", ";\n  border-radius: 24px;\n  color: ", ";\n  background-color: ", ";\n  /* https://www.w3.org/TR/css-grid-1/#min-size-auto */\n  min-width: 0;\n\n  @media ", " {\n    ", "\n  }\n\n  @media ", " {\n    ", "\n\n    border-radius: 0;\n    padding-bottom: 40px;\n  }\n"])), function (p) {
+  return p.span;
+}, function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.color.text2;
+}, function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.color.background1;
+}, function (p) {
+  return p.withLeft ? p.theme.breakpoint.screen4 : p.theme.breakpoint.screen3;
+}, function (p) {
+  return p.span > 2 && styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n        grid-column-end: span 2;\n      "])));
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+}, function (p) {
+  return p.span > 1 && styled.css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n        grid-column-end: span 1;\n      "])));
+});
+function LayoutItemHeader(_ref21) {
+  var children = _ref21.children;
+
+  var _useContext2 = React.useContext(LayoutConfigContext),
+      wide = _useContext2.wide,
+      center = _useContext2.center;
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledLayoutItemHeader, {
+    wide: wide,
+    center: center
+  }, children);
+}
+var StyledLayoutItemHeader = styled__default["default"].div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  padding: 0 ", "px;\n  height: ", "px;\n  display: grid;\n  align-items: center;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: bold;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 24px 24px 0 0;\n  ", "\n\n  @media ", " {\n    margin-top: 4px;\n    padding: 0 16px;\n    background: none;\n    overflow-x: auto;\n    border-radius: unset;\n    ", "\n  }\n"])), function (p) {
+  return p.wide ? 40 : 24;
+}, function (p) {
+  return p.wide ? 64 : 48;
+}, function (_ref22) {
+  var theme = _ref22.theme;
+  return theme.color.surface2;
+}, function (_ref23) {
+  var theme = _ref23.theme;
+  return theme.color.text2;
+}, function (p) {
+  return p.center && styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n      justify-content: center;\n    "])));
+}, function (_ref24) {
+  var theme = _ref24.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+}, function (p) {
+  return p.wide && styled.css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n        height: 48px;\n        margin-top: 0;\n      "])));
+});
+var LAYOUT_ITEM_BODY_PADDING = {
+  wide: {
+    x: 40,
+    y: 40
+  },
+  "default": {
+    x: 24,
+    y: 24
+  },
+  column1: {
+    x: 16,
+    y: 16
+  },
+  narrow: {
+    x: 24,
+    yTop: 12,
+    yBottom: 20
+  },
+  narrowColumn1: {
+    x: 16,
+    yTop: 4,
+    yBottom: 0
+  }
+};
+function LayoutItemBody(_ref25) {
+  var children = _ref25.children,
+      _ref25$horizontal = _ref25.horizontal,
+      horizontal = _ref25$horizontal === void 0 ? false : _ref25$horizontal,
+      _ref25$narrow = _ref25.narrow,
+      narrow = _ref25$narrow === void 0 ? false : _ref25$narrow;
+
+  var _useContext3 = React.useContext(LayoutConfigContext),
+      wide = _useContext3.wide;
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledLayoutItemBody, {
+    wide: wide,
+    horizontal: horizontal,
+    narrow: narrow
+  }, children);
+}
+var StyledLayoutItemBody = styled__default["default"].div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n\n  @media ", " {\n    padding: ", ";\n  }\n\n  width: 100%;\n  box-sizing: border-box;\n"])), function (p) {
+  return p.narrow ? LAYOUT_ITEM_BODY_PADDING.narrow.yTop + "px " + (p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrow.x) + "px " + LAYOUT_ITEM_BODY_PADDING.narrow.yBottom + "px" : p.wide ? (p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.wide.y) + "px " + LAYOUT_ITEM_BODY_PADDING.wide.x + "px" : (p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING["default"].y) + "px " + LAYOUT_ITEM_BODY_PADDING["default"].x + "px";
+}, function (_ref26) {
+  var theme = _ref26.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+}, function (p) {
+  return p.narrow ? LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yTop + "px " + (p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrowColumn1.x) + "px " + LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yBottom + "px" : LAYOUT_ITEM_BODY_PADDING.column1.y + "px " + LAYOUT_ITEM_BODY_PADDING.column1.x + "px " + 0;
+});
+function useLayoutItemBodyPadding() {
+  var _useContext4 = React.useContext(LayoutConfigContext),
+      wide = _useContext4.wide;
+
+  return useMediaScreen1() ? LAYOUT_ITEM_BODY_PADDING.column1 : wide ? LAYOUT_ITEM_BODY_PADDING.wide : LAYOUT_ITEM_BODY_PADDING["default"];
+}
+function CancelLayoutItemBodyPadding(_ref27) {
+  var children = _ref27.children,
+      cancelTop = _ref27.cancelTop;
+
+  var _useContext5 = React.useContext(LayoutConfigContext),
+      wide = _useContext5.wide;
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledCancelLayoutItemBodyPadding, {
+    wide: wide,
+    cancelTop: cancelTop
+  }, children);
+}
+/* eslint-disable max-len */
+
+var StyledCancelLayoutItemBodyPadding = styled__default["default"].div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  margin: 0 -", "px;\n  margin-top: -", "px;\n\n  @media ", " {\n    margin: 0 -", "px;\n    margin-top: -", "px;\n  }\n"])), function (p) {
+  return p.wide ? LAYOUT_ITEM_BODY_PADDING.wide.x : LAYOUT_ITEM_BODY_PADDING["default"].x;
+}, function (_ref28) {
+  var _ref28$cancelTop = _ref28.cancelTop,
+      cancelTop = _ref28$cancelTop === void 0 ? false : _ref28$cancelTop,
+      wide = _ref28.wide;
+  return !cancelTop ? 0 : wide ? LAYOUT_ITEM_BODY_PADDING.wide.y : LAYOUT_ITEM_BODY_PADDING["default"].y;
+}, function (_ref29) {
+  var theme = _ref29.theme;
+  return utils.maxWidth(theme.breakpoint.screen1);
+}, LAYOUT_ITEM_BODY_PADDING.column1.x, function (_ref30) {
+  var _ref30$cancelTop = _ref30.cancelTop,
+      cancelTop = _ref30$cancelTop === void 0 ? false : _ref30$cancelTop;
+  return !cancelTop ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x;
+});
+/* eslint-enable max-len */
+
+// https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts
+
+var hasChildren = function hasChildren(element) {
+  return React.isValidElement(element) && Boolean(element.props.children);
+};
+
+var childToString = function childToString( // eslint-disable-next-line @typescript-eslint/ban-types
+child) {
+  if (typeof child === 'undefined' || child === null || typeof child === 'boolean') {
+    return '';
+  }
+
+  if (JSON.stringify(child) === '{}') {
+    return '';
+  }
+
+  return child.toString();
+};
+var onlyText = function onlyText(children) {
+  if (!Array.isArray(children) && !React.isValidElement(children)) {
+    return childToString(children);
+  }
+
+  return React.Children.toArray(children).reduce(function (text, child) {
+    var newText = '';
+
+    if (React.isValidElement(child) && hasChildren(child)) {
+      newText = onlyText(child.props.children);
+    } else if (React.isValidElement(child) && !hasChildren(child)) {
+      newText = '';
+    } else {
+      newText = childToString(child);
+    }
+
+    return text.concat(newText);
+  }, '');
+};
+
+var _templateObject$9, _templateObject2$7, _templateObject3$6;
+/**
+ * 複数行のテキストに表示行数制限を設けて`...`で省略する
+ */
+
+var TextEllipsis = styled__default["default"].div.attrs(function (_ref) {
+  var children = _ref.children,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? onlyText(children) : _ref$title;
+  return {
+    title: title !== '' ? title : undefined
+  };
+})(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  line-height: ", "px;\n  /* For english */\n  overflow-wrap: break-word;\n\n  ", "\n"])), function (props) {
+  return props.lineHeight;
+}, function (_ref2) {
+  var _ref2$lineLimit = _ref2.lineLimit,
+      lineLimit = _ref2$lineLimit === void 0 ? 1 : _ref2$lineLimit,
+      lineHeight = _ref2.lineHeight;
+  return lineLimit === 1 ? styled.css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        "]))) : styled.css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ", ";\n          /* Fallback for -webkit-line-clamp */\n          max-height: ", "px;\n        "])), lineLimit, lineHeight * lineLimit);
+});
+
+var _excluded$2 = ["link", "onClick", "disabled", "primary", "secondary", "gtmClass", "noHover", "children"],
+    _excluded2 = ["icon", "primary"],
+    _excluded3 = ["icon", "primary"];
+
+var _templateObject$8, _templateObject2$6, _templateObject3$5, _templateObject4$5, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3;
+var MenuListItemContext = React__default["default"].createContext({
+  padding: 24
+});
+function MenuListItem(_ref) {
+  var primary = _ref.primary,
+      secondary = _ref.secondary,
+      _onClick = _ref.onClick,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$noHover = _ref.noHover,
+      noHover = _ref$noHover === void 0 ? false : _ref$noHover,
+      gtmClass = _ref.gtmClass,
+      children = _ref.children;
+
+  var _useContext = React.useContext(MenuListItemContext),
+      padding = _useContext.padding;
+
+  return /*#__PURE__*/React__default["default"].createElement(Item, {
+    hasSubLabel: secondary !== undefined,
+    onClick: function onClick(e) {
+      return !disabled && _onClick && _onClick(e);
+    },
+    sidePadding: padding,
+    noHover: noHover,
+    noClick: _onClick === undefined,
+    "aria-disabled": disabled,
+    role: _onClick !== undefined ? 'button' : undefined,
+    className: gtmClass !== undefined ? "gtm-" + gtmClass : undefined
+  }, /*#__PURE__*/React__default["default"].createElement(Labels, null, /*#__PURE__*/React__default["default"].createElement(PrimaryText, null, /*#__PURE__*/React__default["default"].createElement(TextEllipsis, {
+    lineHeight: 22,
+    lineLimit: 1
+  }, primary)), secondary !== undefined && /*#__PURE__*/React__default["default"].createElement(SecondaryText, null, /*#__PURE__*/React__default["default"].createElement(TextEllipsis, {
+    lineHeight: 22,
+    lineLimit: 1
+  }, secondary))), children);
+}
+var Item = styled__default["default"].div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", "px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  user-select: none;\n  cursor: ", ";\n  transition: 0.2s background-color;\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", " {\n    cursor: default;\n    pointer-events: none;\n\n    &:hover {\n      background-color: unset;\n    }\n  }\n"])), function (p) {
+  return p.hasSubLabel ? 56 : 40;
+}, function (p) {
+  return p.sidePadding;
+}, function (p) {
+  return p.noClick ? 'default' : 'pointer';
+}, function (p) {
+  return !p.noHover && styled.css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
+    var theme = _ref2.theme;
+    return theme.color.surface3;
+  });
+}, theme(function (o) {
+  return o.disabled;
+}), utils.disabledSelector);
+var Labels = styled__default["default"].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var PrimaryText = styled__default["default"].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  line-height: 22px;\n  font-size: 14px;\n  display: grid;\n"])), function (p) {
+  return p.theme.color.text2;
+});
+var SecondaryText = styled__default["default"].div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  line-height: 18px;\n  font-size: 10px;\n"])), function (p) {
+  return p.theme.color.text3;
+});
+function MenuListLinkItem(_ref3) {
+  var link = _ref3.link,
+      onClick = _ref3.onClick,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      primary = _ref3.primary,
+      secondary = _ref3.secondary,
+      gtmClass = _ref3.gtmClass,
+      noHover = _ref3.noHover,
+      children = _ref3.children,
+      linkProps = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
+
+  var _useComponentAbstract = react.useComponentAbstraction(),
+      Link = _useComponentAbstract.Link;
+
+  var props = {
+    disabled: disabled,
+    primary: primary,
+    secondary: secondary,
+    gtmClass: gtmClass,
+    noHover: noHover,
+    children: children
+  };
+  return disabled ? /*#__PURE__*/React__default["default"].createElement("span", {
+    onClick: onClick
+  }, /*#__PURE__*/React__default["default"].createElement(MenuListItem, props)) : /*#__PURE__*/React__default["default"].createElement(A, _extends({
+    as: Link,
+    to: link,
+    onClick: onClick
+  }, linkProps), /*#__PURE__*/React__default["default"].createElement(MenuListItem, _extends({
+    onClick: function onClick() {
+      return void 0;
+    }
+  }, props)));
+}
+var A = styled__default["default"].a(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
+function MenuListLinkItemWithIcon(_ref4) {
+  var icon = _ref4.icon,
+      text = _ref4.primary,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded2);
+
+  var primary = /*#__PURE__*/React__default["default"].createElement(IconContainer, null, /*#__PURE__*/React__default["default"].createElement(Icon$1, null, icon), text);
+  return /*#__PURE__*/React__default["default"].createElement(MenuListLinkItem, _extends({
+    primary: primary
+  }, props));
+}
+function MenuListItemWithIcon(_ref5) {
+  var icon = _ref5.icon,
+      text = _ref5.primary,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded3);
+
+  var primary = /*#__PURE__*/React__default["default"].createElement(IconContainer, null, /*#__PURE__*/React__default["default"].createElement(Icon$1, null, icon), text);
+  return /*#__PURE__*/React__default["default"].createElement(MenuListItem, _extends({
+    primary: primary
+  }, props));
+}
+var IconContainer = styled__default["default"].div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 8px;\n  grid-auto-flow: column;\n  align-items: center;\n"])));
+var Icon$1 = styled__default["default"].div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.color.text3;
+});
+var MenuListSpacer = styled__default["default"].div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  height: 24px;\n"])));
+var MenuListLabel = styled__default["default"].div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  padding: 0 16px;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n  margin-top: -2px;\n  margin-bottom: 6px;\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.color.text3;
+});
+
+var _templateObject$7, _templateObject2$5;
+function LeftMenu(_ref) {
+  var links = _ref.links,
+      active = _ref.active;
+
+  var _useComponentAbstract = react.useComponentAbstraction(),
+      Link = _useComponentAbstract.Link;
+
+  return /*#__PURE__*/React__default["default"].createElement(Container$1, null, links.map(function (link, index) {
+    return /*#__PURE__*/React__default["default"].createElement(Link, {
+      to: link.to,
+      key: index
+    }, /*#__PURE__*/React__default["default"].createElement(LinkItem, {
+      "aria-current": link.id === active || undefined
+    }, link.text));
+  }));
+}
+function LeftMenuContent(_ref2) {
+  var links = _ref2.links;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, links.map(function (link, index) {
+    return /*#__PURE__*/React__default["default"].createElement(MenuListLinkItem, {
+      link: link.to,
+      key: index,
+      primary: link.text
+    });
+  }));
+}
+var Container$1 = styled__default["default"].div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var LinkItem = styled__default["default"].div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n  border-radius: 24px;\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 22px;\n  padding: 0 16px;\n  height: 40px;\n  transition: 0.2s color;\n  &:hover {\n    transition: 0.2s color;\n    color: ", ";\n  }\n  &[aria-current] {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.color.text3;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.color.text2;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.color.text2;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.color.surface3;
+});
+
+var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2;
+
+var _excluded$1 = ["gtmClass", "flex", "rowReverse", "children", "disabled"];
+var index$2 = React__default["default"].forwardRef(function SwitchCheckbox(_ref, ref) {
+  var gtmClass = _ref.gtmClass,
+      _ref$flex = _ref.flex,
+      flex = _ref$flex === void 0 ? false : _ref$flex,
+      _ref$rowReverse = _ref.rowReverse,
+      rowReverse = _ref$rowReverse === void 0 ? false : _ref$rowReverse,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  return /*#__PURE__*/React__default["default"].createElement(Label, {
+    className: gtmClass !== undefined ? "gtm-" + gtmClass : '',
+    flex: flex,
+    rowReverse: rowReverse,
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React__default["default"].createElement(SwitchOuter, null, /*#__PURE__*/React__default["default"].createElement(SwitchInput, _extends({}, props, {
+    disabled: disabled,
+    ref: ref
+  })), /*#__PURE__*/React__default["default"].createElement(SwitchInner, null, /*#__PURE__*/React__default["default"].createElement(SwitchInnerKnob, null))), children != null && /*#__PURE__*/React__default["default"].createElement(Children, {
+    rowReverse: rowReverse
+  }, children));
+});
+var Children = styled__default["default"].span(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (p) {
+  return p.rowReverse ? styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n          margin-right: 8px;\n        "]))) : styled.css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n          margin-left: 8px;\n        "])));
+});
+var Label = styled__default["default"].label(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  ", "\n  ", "\n  cursor: pointer;\n  outline: 0;\n\n  &[aria-disabled='true'] {\n    cursor: auto;\n  }\n"])), function (_ref2) {
+  var flex = _ref2.flex;
+  return flex && styled.css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      justify-content: space-between;\n    "])));
+}, function (_ref3) {
+  var rowReverse = _ref3.rowReverse;
+  return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n      flex-direction: ", ";\n    "])), rowReverse ? 'row-reverse' : 'row');
+});
+var SwitchOuter = styled__default["default"].span(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  position: relative;\n  z-index: 0;\n"])));
+var SwitchInner = styled__default["default"].div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  box-sizing: border-box;\n  width: 28px;\n  height: 16px;\n  border-radius: 16px;\n  border: 2px solid transparent;\n  background: ", ";\n  transition: box-shadow 0.2s, background-color 0.2s;\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.color.text4;
+});
+var SwitchInnerKnob = styled__default["default"].div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  width: 12px;\n  height: 12px;\n  background-color: ", ";\n  border-radius: 50%;\n  transform: translateX(0);\n  transition: transform 0.2s;\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.color.text5;
+});
+var SwitchInput = styled__default["default"].input.attrs({
+  type: 'checkbox'
+})(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  /* NOTE: this is contained by the GraphicCheckboxOuter */\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  /* just to control the clickable area if used standalone */\n  border-radius: 16px;\n  opacity: 0;\n  appearance: none;\n  outline: none;\n  cursor: pointer;\n\n  &:checked {\n    ~ ", " {\n      background-color: ", ";\n\n      ", " {\n        transform: translateX(12px);\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: auto;\n\n    ~ ", " {\n      opacity: ", ";\n    }\n  }\n\n  &:not(:disabled):focus {\n    ~ ", " {\n      box-shadow: 0 0 0 4px\n        ", ";\n    }\n  }\n"])), SwitchInner, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.color.brand;
+}, SwitchInnerKnob, SwitchInner, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.elementEffect.disabled.opacity;
+}, SwitchInner, function (_ref8) {
+  var theme = _ref8.theme;
+  return utils.applyEffect(theme.color.brand, theme.elementEffect.disabled);
+});
+
+var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
+var index$1 = React__default["default"].memo(function WithIcon(_ref) {
+  var children = _ref.children,
+      icon = _ref.icon,
+      _ref$show = _ref.show,
+      show = _ref$show === void 0 ? true : _ref$show,
+      _ref$prefix = _ref.prefix,
+      pre = _ref$prefix === void 0 ? false : _ref$prefix,
+      width = _ref.width,
+      _ref$fit = _ref.fit,
+      fit = _ref$fit === void 0 ? false : _ref$fit,
+      _ref$fixed = _ref.fixed,
+      fixed = _ref$fixed === void 0 ? false : _ref$fixed;
+  var node = fit ? width === undefined ? /*#__PURE__*/React__default["default"].createElement(AutoWidthIconAnchor, {
+    show: show,
+    pre: pre
+  }, icon) : /*#__PURE__*/React__default["default"].createElement(IconAnchor, {
+    width: width,
+    show: show,
+    pre: pre
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, null, icon)) : /*#__PURE__*/React__default["default"].createElement(IconAnchorNaive, {
+    show: show,
+    pre: pre
+  }, /*#__PURE__*/React__default["default"].createElement(IconNaive, null, icon));
+  return /*#__PURE__*/React__default["default"].createElement(Root, null, pre && node, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    fixed: fixed
+  }, children), !pre && node);
+});
+var Root = styled__default["default"].div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var Text$1 = styled__default["default"].div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  ", "\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (p) {
+  return !p.fixed && styled.css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n      min-width: 0;\n      overflow: hidden;\n    "])));
+});
+
+function AutoWidthIconAnchor(_ref2) {
+  var _useElementSize$width, _useElementSize;
+
+  var children = _ref2.children,
+      show = _ref2.show,
+      pre = _ref2.pre;
+  var ref = React.useRef(null); // depsを空配列にしないことで初回だけ同期で幅を計算させるテクニック
+
+  var width = (_useElementSize$width = (_useElementSize = useElementSize(ref, [null])) == null ? void 0 : _useElementSize.width) != null ? _useElementSize$width : 0;
+  return /*#__PURE__*/React__default["default"].createElement(IconAnchor, {
+    width: width,
+    show: show,
+    pre: pre
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    ref: ref
+  }, children));
+}
+
+var forceCenteringCss = styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  > svg {\n    display: block;\n  }\n"])));
+var iconAnchorCss = styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "\n"])), function (p) {
+  return p.show === 'collapse' ? styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n          display: none;\n        "]))) : styled.css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n          visibility: ", ";\n        "])), p.show ? 'visible' : 'hidden');
+}, function (p) {
+  return p.pre ? styled.css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n          margin-right: 4px;\n        "]))) : styled.css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n          margin-left: 4px;\n        "])));
+});
+var IconAnchorNaive = styled__default["default"].div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  ", "\n"])), iconAnchorCss);
+var IconNaive = styled__default["default"].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n\n  ", "\n"])), forceCenteringCss);
+var IconAnchor = styled__default["default"].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  /* Icon\u3092line-height\u306B\u95A2\u4E0E\u3055\u305B\u306A\u3044 */\n  height: 0;\n  /* \u6A2A\u65B9\u5411\u306E\u9818\u57DF\u306F\u78BA\u4FDD\u3059\u308B */\n  width: ", "px;\n\n  ", "\n"])), function (p) {
+  return p.width;
+}, iconAnchorCss);
+var Icon = styled__default["default"].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  position: absolute;\n  transform: translateY(-50%);\n\n  ", "\n"])), forceCenteringCss);
+
+var passiveEventsResult; // eslint-disable-line no-var
+
+function passiveEvents() {
+  if (passiveEventsResult !== undefined) {
+    return passiveEventsResult;
+  }
+
+  passiveEventsResult = false;
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    var options = Object.defineProperty({}, 'passive', {
+      get: function get() {
+        return passiveEventsResult = true;
+      }
+    });
+    window.addEventListener('test', test, options);
+    window.removeEventListener('test', test);
+  } catch (_unused) {// test fail
+  }
+
+  return passiveEventsResult;
+
+  function test() {
+    /* empty */
+  }
+}
+var isEdge = function isEdge() {
+  return navigator.userAgent.includes('Edge/');
+};
+
+function unreachable(value) {
+  throw new Error(arguments.length === 0 ? 'unreachable' : "unreachable (" + JSON.stringify(value) + ")");
+}
+
+var WedgeDirection$1;
+
+(function (WedgeDirection) {
+  WedgeDirection["Up"] = "up";
+  WedgeDirection["Down"] = "down";
+  WedgeDirection["Left"] = "left";
+  WedgeDirection["Right"] = "right";
+})(WedgeDirection$1 || (WedgeDirection$1 = {})); // eslint-disable-next-line max-len
+
+
+var 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";
+var size = 24;
+function NextIcon(_ref) {
+  var direction = _ref.direction;
+  var transform = directionToTransform$1(direction);
+  return /*#__PURE__*/React__default["default"].createElement(IconBase, {
+    viewBoxSize: size,
+    size: size,
+    currentColor: true,
+    path: path,
+    transform: transform
+  });
+}
+
+function directionToTransform$1(direction) {
+  // "5 4" is the center point of the "0 0 10 8" viewBox
+  switch (direction) {
+    case WedgeDirection$1.Up:
+      return 'rotate(270 12 12)';
+
+    case WedgeDirection$1.Down:
+      return 'rotate(90 12 12)';
+
+    case WedgeDirection$1.Left:
+      return 'rotate(180 12 12)';
+
+    case WedgeDirection$1.Right:
+      return undefined;
+
+    default:
+      return unreachable(direction);
+  }
+}
+
+var _templateObject$4, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$1;
+var Direction;
+
+(function (Direction) {
+  Direction["Right"] = "right";
+  Direction["Left"] = "left";
+})(Direction || (Direction = {}));
+
+function CarouselButton(_ref) {
+  var direction = _ref.direction,
+      show = _ref.show,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 0 : _ref$offset,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? 0 : _ref$padding,
+      _ref$bottomOffset = _ref.bottomOffset,
+      bottom = _ref$bottomOffset === void 0 ? 0 : _ref$bottomOffset,
+      _ref$gradient = _ref.gradient,
+      gradient = _ref$gradient === void 0 ? false : _ref$gradient,
+      onClick = _ref.onClick;
+  var offsetStyle = direction === Direction.Left ? {
+    left: gradient ? offset - 72 : offset,
+    paddingLeft: Math.max(padding, 0),
+    paddingBottom: bottom
+  } : {
+    right: gradient ? offset - 72 : offset,
+    paddingRight: Math.max(padding, 0),
+    paddingBottom: bottom
+  };
+  return /*#__PURE__*/React__default["default"].createElement(Button, {
+    type: "button",
+    onClick: onClick,
+    hide: !show,
+    style: offsetStyle,
+    css: onlyNonTouchDevice
+  }, /*#__PURE__*/React__default["default"].createElement(CarouselButtonIcon, null, /*#__PURE__*/React__default["default"].createElement(NextIcon, {
+    direction: direction === Direction.Right ? WedgeDirection$1.Right : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    direction === Direction.Left ? WedgeDirection$1.Left : unreachable()
+  })));
+}
+var CAROUSEL_BUTTON_SIZE = 40;
+var CarouselButtonIcon = styled__default["default"].div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;\n  color: ", ";\n"])), CAROUSEL_BUTTON_SIZE, CAROUSEL_BUTTON_SIZE, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.color.surface4;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.color.text5;
+});
+var Button = styled__default["default"].button(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  min-width: 40px;\n  border: none;\n  outline: 0;\n  background: transparent;\n  cursor: pointer;\n  transition: 0.4s visibility, 0.4s opacity;\n  /* \u3064\u3089\u3044 */\n  /* \u3053\u306E\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306FCarousel\u3067\u3057\u304B\u4F7F\u308F\u308C\u3066\u306A\u3044\u306E\u3067\u305D\u3063\u3061\u3067\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3067\u5207\u308B */\n  z-index: 1;\n\n  &:hover ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  ", "\n"])), CarouselButtonIcon, function (_ref4) {
+  var theme = _ref4.theme;
+  return utils.applyEffect(theme.color.surface4, theme.effect.hover);
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return utils.applyEffect(theme.color.text5, theme.effect.hover);
+}, CarouselButtonIcon, function (_ref6) {
+  var theme = _ref6.theme;
+  return utils.applyEffect(theme.color.surface4, theme.effect.press);
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return utils.applyEffect(theme.color.text5, theme.effect.press);
+}, function (p) {
+  return p.hide && styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n      visibility: hidden;\n      opacity: 0;\n      pointer-events: none;\n    "])));
+});
+styled__default["default"](CarouselButtonIcon)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_ref9) {
+  var theme = _ref9.theme;
+  return utils.applyEffect(theme.color.surface4, theme.effect.hover);
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return utils.applyEffect(theme.color.text5, theme.effect.hover);
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return utils.applyEffect(theme.color.surface4, theme.effect.press);
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return utils.applyEffect(theme.color.text5, theme.effect.press);
+});
+var onlyNonTouchDevice = styled.css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  @media (hover: none) and (pointer: coarse) {\n    display: none;\n  }\n"])));
+
+var _templateObject$3, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+var _excluded = ["buttonOffset", "buttonPadding", "bottomOffset", "defaultScroll", "onScroll", "onResize", "children", "centerItems", "onScrollStateChange", "scrollAmountCoef"];
+var GRADIENT_WIDTH = 72;
+/**
+ * カルーセル系のスクロール量の定数
+ *
+ * @example
+ * const scrollAmount = containerElm.clientWidth * SCROLL_AMOUNT_COEF
+ */
+
+var SCROLL_AMOUNT_COEF = 0.75;
+function Carousel(_ref) {
+  var _ref$buttonOffset = _ref.buttonOffset,
+      buttonOffset = _ref$buttonOffset === void 0 ? 0 : _ref$buttonOffset,
+      _ref$buttonPadding = _ref.buttonPadding,
+      buttonPadding = _ref$buttonPadding === void 0 ? 16 : _ref$buttonPadding,
+      _ref$bottomOffset = _ref.bottomOffset,
+      bottomOffset = _ref$bottomOffset === void 0 ? 0 : _ref$bottomOffset,
+      _ref$defaultScroll = _ref.defaultScroll;
+  _ref$defaultScroll = _ref$defaultScroll === void 0 ? {} : _ref$defaultScroll;
+
+  var _ref$defaultScroll$al = _ref$defaultScroll.align,
+      align = _ref$defaultScroll$al === void 0 ? 'left' : _ref$defaultScroll$al,
+      _ref$defaultScroll$of = _ref$defaultScroll.offset,
+      scrollOffset = _ref$defaultScroll$of === void 0 ? 0 : _ref$defaultScroll$of,
+      onScroll = _ref.onScroll,
+      onResize = _ref.onResize,
+      children = _ref.children,
+      centerItems = _ref.centerItems,
+      onScrollStateChange = _ref.onScrollStateChange,
+      _ref$scrollAmountCoef = _ref.scrollAmountCoef,
+      scrollAmountCoef = _ref$scrollAmountCoef === void 0 ? SCROLL_AMOUNT_COEF : _ref$scrollAmountCoef,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  // スクロール位置を保存する
+  // アニメーション中の場合は、アニメーション終了時のスクロール位置が保存される
+  var _useDebounceAnimation = useDebounceAnimationState(0),
+      scrollLeft = _useDebounceAnimation[0],
+      setScrollLeft = _useDebounceAnimation[1]; // アニメーション中かどうか
+
+
+  var animation = React.useRef(false); // スクロール可能な領域を保存する
+
+  var _useState = React.useState(0),
+      maxScrollLeft = _useState[0],
+      setMaxScrollLeft = _useState[1]; // 左右のボタンの表示状態を保存する
+
+
+  var _useState2 = React.useState(false),
+      leftShow = _useState2[0],
+      setLeftShow = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      rightShow = _useState3[0],
+      setRightShow = _useState3[1]; // const [props, set, stop] = useSpring(() => ({
+  //   scroll: 0
+  // }))
+
+
+  var _useSpring = reactSpring.useSpring(function () {
+    return {
+      scroll: 0
+    };
+  }),
+      styles = _useSpring[0],
+      set = _useSpring[1];
+
+  var ref = React.useRef(null);
+  var visibleAreaRef = React.useRef(null);
+  var innerRef = React.useRef(null);
+  var handleRight = React.useCallback(function () {
+    if (visibleAreaRef.current === null) {
+      return;
+    }
+
+    var clientWidth = visibleAreaRef.current.clientWidth; // スクロール領域を超えないように、アニメーションを開始
+    // アニメーション中にアニメーションが開始されたときに、アニメーション終了予定の位置から再度計算するようにする
+
+    var scroll = Math.min(scrollLeft + clientWidth * scrollAmountCoef, maxScrollLeft);
+    setScrollLeft(scroll, true);
+    set({
+      scroll: scroll,
+      from: {
+        scroll: scrollLeft
+      },
+      reset: !animation.current
+    });
+    animation.current = true;
+  }, [animation, maxScrollLeft, scrollLeft, set, scrollAmountCoef, setScrollLeft]);
+  var handleLeft = React.useCallback(function () {
+    if (visibleAreaRef.current === null) {
+      return;
+    }
+
+    var clientWidth = visibleAreaRef.current.clientWidth;
+    var scroll = Math.max(scrollLeft - clientWidth * scrollAmountCoef, 0);
+    setScrollLeft(scroll, true);
+    set({
+      scroll: scroll,
+      from: {
+        scroll: scrollLeft
+      },
+      reset: !animation.current
+    });
+    animation.current = true;
+  }, [animation, scrollLeft, set, scrollAmountCoef, setScrollLeft]); // スクロール可能な場合にボタンを表示する
+  // scrollLeftが変化したときに処理する (アニメーション開始時 & 手動スクロール時)
+
+  React.useEffect(function () {
+    var newleftShow = scrollLeft > 0;
+    var newrightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0;
+
+    if (newleftShow !== leftShow || newrightShow !== rightShow) {
+      setLeftShow(newleftShow);
+      setRightShow(newrightShow);
+      onScrollStateChange == null ? void 0 : onScrollStateChange(newleftShow || newrightShow);
+    }
+  }, [leftShow, maxScrollLeft, onScrollStateChange, rightShow, scrollLeft]);
+  var handleScroll = React.useCallback(function () {
+    if (ref.current === null) {
+      return;
+    } // 手動でスクロールが開始されたときにアニメーションを中断
+
+
+    if (animation.current) {
+      styles.scroll.stop();
+      animation.current = false;
+    } // スクロール位置を保存 (アニメーションの基準になる)
+
+
+    var manualScrollLeft = ref.current.scrollLeft; // 過剰にsetStateが走らないようにDebouceする
+
+    setScrollLeft(manualScrollLeft);
+  }, [animation, setScrollLeft, styles]); // リサイズが起きたときに、アニメーション用のスクロール領域 & ボタンの表示状態 を再計算する
+
+  var handleResize = React.useCallback(function () {
+    if (ref.current === null) {
+      return;
+    }
+
+    var _ref$current = ref.current,
+        clientWidth = _ref$current.clientWidth,
+        scrollWidth = _ref$current.scrollWidth;
+    var newMaxScrollLeft = scrollWidth - clientWidth;
+    setMaxScrollLeft(newMaxScrollLeft);
+
+    if (onResize) {
+      onResize(clientWidth);
+    }
+  }, [onResize]);
+  React.useLayoutEffect(function () {
+    var elm = ref.current;
+    var innerElm = innerRef.current;
+
+    if (elm === null || innerElm === null) {
+      return;
+    }
+
+    elm.addEventListener('wheel', handleScroll, passiveEvents() && {
+      passive: true
+    });
+    var resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(elm);
+    var resizeObserverInner = new ResizeObserver(handleResize);
+    resizeObserverInner.observe(innerElm);
+    return function () {
+      elm.removeEventListener('wheel', handleScroll);
+      resizeObserver.disconnect();
+      resizeObserverInner.disconnect();
+    };
+  }, [handleResize, handleScroll]); // 初期スクロールを行う
+
+  React.useLayoutEffect(function () {
+    if (align !== 'left' || scrollOffset !== 0) {
+      var scroll = ref.current;
+
+      if (scroll !== null) {
+        var scrollLength = Math.max(0, Math.min(align === 'left' && scrollOffset > 0 ? scrollOffset : align === 'center' ? maxScrollLeft / 2 + scrollOffset : align === 'right' && scrollOffset <= maxScrollLeft ? maxScrollLeft - scrollOffset / 2 : 0, maxScrollLeft));
+        scroll.scrollLeft = scrollLength;
+        setScrollLeft(scrollLength, true);
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [ref.current]);
+  var handleScrollMove = React.useCallback(function () {
+    if (ref.current === null) {
+      return;
+    }
+
+    if (onScroll) {
+      onScroll(ref.current.scrollLeft);
+    }
+  }, [onScroll]);
+
+  var _useState4 = React.useState(false),
+      disableGradient = _useState4[0],
+      setDisableGradient = _useState4[1];
+
+  React.useLayoutEffect(function () {
+    if (isEdge()) {
+      setDisableGradient(true);
+    }
+  }, []); // NOTE: Edgeではmaskを使うと要素のレンダリングがバグる（場合によっては画像が表示されない）のでグラデーションを無効にする
+
+  if (!disableGradient && options.hasGradient === true) {
+    var _options$fadeInGradie;
+
+    var fadeInGradient = (_options$fadeInGradie = options.fadeInGradient) != null ? _options$fadeInGradie : false;
+    var overflowGradient = !fadeInGradient;
+    return /*#__PURE__*/React__default["default"].createElement(Container, {
+      ref: visibleAreaRef
+    }, /*#__PURE__*/React__default["default"].createElement(GradientContainer, {
+      fadeInGradient: fadeInGradient
+    }, /*#__PURE__*/React__default["default"].createElement(RightGradient, null, /*#__PURE__*/React__default["default"].createElement(LeftGradient, {
+      show: overflowGradient || scrollLeft > 0
+    }, /*#__PURE__*/React__default["default"].createElement(ScrollArea, {
+      ref: ref,
+      scrollLeft: styles.scroll,
+      onScroll: handleScrollMove
+    }, /*#__PURE__*/React__default["default"].createElement(CarouselContainer, {
+      ref: innerRef,
+      centerItems: centerItems
+    }, children))))), /*#__PURE__*/React__default["default"].createElement(ButtonsContainer, null, /*#__PURE__*/React__default["default"].createElement(CarouselButton, {
+      direction: Direction.Left,
+      show: leftShow,
+      offset: buttonOffset,
+      bottomOffset: bottomOffset,
+      padding: buttonPadding,
+      gradient: overflowGradient,
+      onClick: handleLeft
+    }), /*#__PURE__*/React__default["default"].createElement(CarouselButton, {
+      direction: Direction.Right,
+      show: rightShow,
+      offset: buttonOffset,
+      bottomOffset: bottomOffset,
+      padding: buttonPadding,
+      gradient: true,
+      onClick: handleRight
+    })));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(Container, {
+    ref: visibleAreaRef
+  }, /*#__PURE__*/React__default["default"].createElement(ScrollArea // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  , {
+    ref: ref,
+    scrollLeft: styles.scroll,
+    onScroll: handleScrollMove
+  }, /*#__PURE__*/React__default["default"].createElement(CarouselContainer, {
+    ref: innerRef,
+    centerItems: centerItems
+  }, children)), /*#__PURE__*/React__default["default"].createElement(ButtonsContainer, null, /*#__PURE__*/React__default["default"].createElement(CarouselButton, {
+    direction: Direction.Left,
+    show: leftShow,
+    offset: buttonOffset,
+    bottomOffset: bottomOffset,
+    padding: buttonPadding,
+    onClick: handleLeft
+  }), /*#__PURE__*/React__default["default"].createElement(CarouselButton, {
+    direction: Direction.Right,
+    show: rightShow,
+    offset: buttonOffset,
+    bottomOffset: bottomOffset,
+    padding: buttonPadding,
+    onClick: handleRight
+  })));
+}
+var CarouselContainer = styled__default["default"].ul(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  vertical-align: top;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n\n  /* \u6700\u5C0F\u5E45\u3092100%\u306B\u3057\u3066\u89AA\u8981\u7D20\u306B\u3074\u3063\u305F\u308A\u304F\u3063\u3064\u3051\u308B\u3053\u3068\u3067\u5B50\u8981\u7D20\u3067\u8981\u7D20\u3092\u5747\u7B49\u306B\u5272\u308A\u4ED8\u3051\u308B\u306A\u3069\u3092\u51FA\u6765\u308B\u3088\u3046\u306B\u3057\u3066\u3042\u308B */\n  min-width: 100%;\n  box-sizing: border-box;\n\n  ", "\n"])), function (_ref2) {
+  var _ref2$centerItems = _ref2.centerItems,
+      centerItems = _ref2$centerItems === void 0 ? false : _ref2$centerItems;
+  return centerItems ? styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n          display: flex;\n          width: max-content;\n          margin: 0 auto;\n        "]))) : styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n          display: inline-flex;\n          margin: 0;\n        "])));
+});
+var ButtonsContainer = styled__default["default"].div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  transition: 0.4s opacity;\n"])));
+var Container = styled__default["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  &:hover ", " {\n    opacity: 1;\n  }\n\n  /* CarouselButton\u306E\u4E2D\u306Bz-index:1\u304C\u3042\u308B\u306E\u3067\u3053\u3053\u3067\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u5207\u308B */\n  position: relative;\n  z-index: 0;\n"])), ButtonsContainer);
+var ScrollArea = styled__default["default"](reactSpring.animated.div)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  padding: 0;\n  margin: 0;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  scrollbar-width: none;\n"])));
+var GradientContainer = styled__default["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  /* NOTE: LeftGradient\u304C\u306F\u307F\u51FA\u308B\u305F\u3081hidden */\n  overflow: hidden;\n  ", "\n\n  margin-right: ", "px;\n  /* stylelint-disable-next-line no-duplicate-selectors */\n  ", " {\n    padding-right: ", "px;\n  }\n"])), function (p) {
+  return !p.fadeInGradient && styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      margin-left: ", "px;\n      ", " {\n        padding-left: ", "px;\n      }\n    "])), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
+}, -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
+var RightGradient = styled__default["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  mask-image: linear-gradient(\n    to right,\n    #000 calc(100% - ", "px),\n    transparent\n  );\n"])), GRADIENT_WIDTH);
+var LeftGradient = styled__default["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  /* NOTE: mask-position \u304C left \u2192 negative px \u306E\u6642\u3001right \u2192 abs(negative px) \u306E\u4F4D\u7F6E\u306B\u8868\u793A\u3055\u308C\u308B\u305F\u3081 */\n  margin-right: ", "px;\n  padding-right: ", "px;\n  /* NOTE: mask-position \u306B transition \u3092\u3064\u3051\u305F\u3044\u304C vender prefixes \u5BFE\u7B56\u3067 all \u306B\u3064\u3051\u308B */\n  transition: 0.2s all ease-in;\n  mask: linear-gradient(to right, transparent, #000 ", "px)\n    ", "px 0;\n"])), -GRADIENT_WIDTH, GRADIENT_WIDTH, GRADIENT_WIDTH, function (p) {
+  return p.show ? 0 : -GRADIENT_WIDTH;
+});
+
+var _templateObject$2;
+
+function DotsIcon(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React__default["default"].createElement(StyledSVG, {
+    viewBox: "0 0 20 6",
+    width: size,
+    height: size
+  }, /*#__PURE__*/React__default["default"].createElement("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\n          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\n          C10.6192881,14.5 9.5,13.3807119 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5\n          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\n          C17.6192881,14.5 16.5,13.3807119 16.5,12 C16.5,10.6192881 17.6192881,9.5 19,9.5\n          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)"
+  }));
+}
+
+DotsIcon.defaultProps = {
+  size: 16
+};
+var StyledSVG = styled__default["default"].svg(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  fill: currentColor;\n"])));
+
+var _templateObject$1;
+var WedgeDirection;
+
+(function (WedgeDirection) {
+  WedgeDirection["Up"] = "up";
+  WedgeDirection["Down"] = "down";
+  WedgeDirection["Left"] = "left";
+  WedgeDirection["Right"] = "right";
+})(WedgeDirection || (WedgeDirection = {}));
+
+function WedgeIcon(_ref) {
+  var size = _ref.size,
+      direction = _ref.direction;
+  return (
+    /*#__PURE__*/
+    // NOTE: directionToTransform depends on the value of viewBox
+    React__default["default"].createElement("svg", {
+      viewBox: "0 0 10 8",
+      width: size,
+      height: size
+    }, /*#__PURE__*/React__default["default"].createElement(StyledPolyline, {
+      strokeWidth: "2",
+      points: "1,2 5,6 9,2",
+      transform: directionToTransform(direction)
+    }))
+  );
+}
+WedgeIcon.defaultProps = {
+  size: 16,
+  white: false,
+  lightGray: false
+};
+
+function directionToTransform(direction) {
+  // "5 4" is the center point of the "0 0 10 8" viewBox
+  switch (direction) {
+    case WedgeDirection.Up:
+      return 'rotate(180 5 4)';
+
+    case WedgeDirection.Down:
+      return undefined;
+
+    case WedgeDirection.Left:
+      return 'rotate(90 5 4)';
+
+    case WedgeDirection.Right:
+      return 'rotate(-90 5 4)';
+
+    default:
+      return unreachable(direction);
+  }
+}
+
+var StyledPolyline = styled__default["default"].polyline(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n  stroke: currentColor;\n"])));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function usePagerWindow(page, pageCount, windowSize) {
+  if (windowSize === void 0) {
+    windowSize = 7;
+  }
+
+  // ページャーのリンク生成例:
+  //
+  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]
+  //
+  //       [*1*] [ 2 ] >
+  //
+  // デザインの意図: 前後移動時のカーソル移動を最小限にする。
+  if (process.env.NODE_ENV !== 'production') {
+    warning__default["default"]((page | 0) === page, "`page` must be interger (" + page + ")");
+    warning__default["default"]((pageCount | 0) === pageCount, "`pageCount` must be interger (" + pageCount + ")");
+  }
+
+  var window = React.useMemo(function () {
+    var visibleFirstPage = 1;
+    var visibleLastPage = Math.min(pageCount, Math.max(page + Math.floor(windowSize / 2), windowSize));
+
+    if (visibleLastPage <= windowSize) {
+      // 表示範囲が1-7ページなら省略は無い。
+      return Array.from({
+        length: 1 + visibleLastPage - visibleFirstPage
+      }, function (_, i) {
+        return visibleFirstPage + i;
+      });
+    } else {
+      var start = visibleLastPage - (windowSize - 1) + 2;
+      return [// 表示範囲が1-7ページを超えるなら、
+      // - 1ページ目は固定で表示する
+      visibleFirstPage, // - 2ページ目から現在のページの直前までは省略する
+      '...'].concat(Array.from({
+        length: 1 + visibleLastPage - start
+      }, function (_, i) {
+        return start + i;
+      }));
+    }
+  }, [page, pageCount, windowSize]);
+  React.useDebugValue(window);
+  return window;
+} // this pager is just regular buttons; for links use LinkPager
+
+
+var index = React__default["default"].memo(function Pager(_ref) {
+  var page = _ref.page,
+      pageCount = _ref.pageCount,
+      onChange = _ref.onChange;
+  // TODO: refactor Pager and LinkPager to use a common parent component
+  var window = usePagerWindow(page, pageCount);
+  var makeClickHandler = React.useCallback(function (value) {
+    return function () {
+      onChange(value);
+    };
+  }, [onChange]);
+  var hasNext = page < pageCount;
+  var hasPrev = page > 1;
+  return /*#__PURE__*/React__default["default"].createElement(PagerContainer, null, /*#__PURE__*/React__default["default"].createElement(CircleButton, {
+    type: "button",
+    hidden: !hasPrev,
+    disabled: !hasPrev,
+    onClick: makeClickHandler(Math.max(1, page - 1)),
+    noBackground: true
+  }, /*#__PURE__*/React__default["default"].createElement(WedgeIcon, {
+    size: 16,
+    direction: WedgeDirection.Left
+  })), window.map(function (p) {
+    return p === '...' ? /*#__PURE__*/React__default["default"].createElement(Spacer, {
+      key: p
+    }, /*#__PURE__*/React__default["default"].createElement(DotsIcon, {
+      size: 20
+    })) : p === page ?
+    /*#__PURE__*/
+    // we remove the onClick but don't mark it as disabled to preserve keyboard focus
+    // not doing so causes the focus ring to flicker in and out of existence
+    React__default["default"].createElement(CircleButton, {
+      key: p,
+      type: "button",
+      "aria-current": true
+    }, /*#__PURE__*/React__default["default"].createElement(Text, null, p)) : /*#__PURE__*/React__default["default"].createElement(CircleButton, {
+      key: p,
+      type: "button",
+      onClick: makeClickHandler(p)
+    }, /*#__PURE__*/React__default["default"].createElement(Text, null, p));
+  }), /*#__PURE__*/React__default["default"].createElement(CircleButton, {
+    type: "button",
+    hidden: !hasNext,
+    disabled: !hasNext,
+    onClick: makeClickHandler(Math.min(pageCount, page + 1)),
+    noBackground: true
+  }, /*#__PURE__*/React__default["default"].createElement(WedgeIcon, {
+    size: 16,
+    direction: WedgeDirection.Right
+  })));
+});
+function LinkPager(_ref2) {
+  var page = _ref2.page,
+      pageCount = _ref2.pageCount,
+      makeUrl = _ref2.makeUrl;
+
+  var _useComponentAbstract = react.useComponentAbstraction(),
+      Link = _useComponentAbstract.Link;
+
+  var window = usePagerWindow(page, pageCount);
+  var hasNext = page < pageCount;
+  var hasPrev = page > 1;
+  return /*#__PURE__*/React__default["default"].createElement(PagerContainer, null, /*#__PURE__*/React__default["default"].createElement(Link, {
+    to: makeUrl(Math.max(1, page - 1))
+  }, /*#__PURE__*/React__default["default"].createElement(CircleButton, {
+    hidden: !hasPrev,
+    "aria-disabled": !hasPrev,
+    noBackground: true
+  }, /*#__PURE__*/React__default["default"].createElement(WedgeIcon, {
+    size: 16,
+    direction: WedgeDirection.Left
+  }))), window.map(function (p) {
+    return p === '...' ? /*#__PURE__*/React__default["default"].createElement(Spacer, {
+      key: p
+    }, /*#__PURE__*/React__default["default"].createElement(DotsIcon, {
+      size: 20,
+      subLink: true
+    })) : p === page ? /*#__PURE__*/React__default["default"].createElement(CircleButton, {
+      key: p,
+      type: "button",
+      "aria-current": true
+    }, /*#__PURE__*/React__default["default"].createElement(Text, null, p)) : /*#__PURE__*/React__default["default"].createElement(Link, {
+      key: p,
+      to: makeUrl(p)
+    }, /*#__PURE__*/React__default["default"].createElement(CircleButton, {
+      type: "button"
+    }, /*#__PURE__*/React__default["default"].createElement(Text, null, p)));
+  }), /*#__PURE__*/React__default["default"].createElement(Link, {
+    to: makeUrl(Math.min(pageCount, page + 1))
+  }, /*#__PURE__*/React__default["default"].createElement(CircleButton, {
+    hidden: !hasNext,
+    "aria-disabled": !hasNext,
+    noBackground: true
+  }, /*#__PURE__*/React__default["default"].createElement(WedgeIcon, {
+    size: 16,
+    direction: WedgeDirection.Right
+  }))));
+}
+var PagerContainer = styled__default["default"].nav(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var CircleButton = styled__default["default"].button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-size: 1rem;\n  line-height: calc(1em + 8px);\n  text-decoration: none;\n  border: none;\n  outline: none;\n  touch-action: manipulation;\n  user-select: none;\n  transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s,\n    background 0.2s ease 0s, opacity 0.2s ease 0s;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-sizing: content-box;\n  min-width: 24px;\n  min-height: 24px;\n  padding: 8px;\n  cursor: pointer;\n  font-weight: bold;\n  /* HACK:\n   * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.\n   * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.\n   */\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-transform: translateZ(0);\n\n  &[hidden] {\n    visibility: hidden;\n    display: block;\n  }\n\n  border-radius: 48px;\n\n  background: transparent;\n  color: ", ";\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &[aria-current] {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &[aria-current]:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  ", "\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.color.text3;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.color.surface3;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.color.text2;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.color.surface6;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.color.text5;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.color.surface6;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.color.text5;
+}, function (_ref10) {
+  var _ref10$noBackground = _ref10.noBackground,
+      noBackground = _ref10$noBackground === void 0 ? false : _ref10$noBackground;
+  return noBackground && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      /* stylelint-disable-next-line no-duplicate-selectors */\n      &:hover {\n        background: transparent;\n      }\n    "])));
+});
+var Spacer = styled__default["default"](CircleButton).attrs({
+  type: 'button',
+  disabled: true
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  && {\n    color: ", ";\n    background: none;\n  }\n"])), function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.color.text3;
+});
+var Text = 'span';
+
+Object.defineProperty(exports, 'ComponentAbstraction', {
+  enumerable: true,
+  get: function () { return react.ComponentAbstraction; }
+});
+Object.defineProperty(exports, 'useComponentAbstraction', {
+  enumerable: true,
+  get: function () { return react.useComponentAbstraction; }
+});
+exports.CancelLayoutItemBodyPadding = CancelLayoutItemBodyPadding;
+exports.Carousel = Carousel;
+exports.Filter = Filter;
+exports.FilterButton = FilterButton;
+exports.FilterIconButton = FilterIconButton;
+exports.FilterLink = FilterLink;
+exports.HintText = HintText;
+exports.LAYOUT_ITEM_BODY_PADDING = LAYOUT_ITEM_BODY_PADDING;
+exports.Layout = Layout;
+exports.LayoutItem = LayoutItem;
+exports.LayoutItemBody = LayoutItemBody;
+exports.LayoutItemHeader = LayoutItemHeader;
+exports.LeftMenu = LeftMenu;
+exports.LeftMenuContent = LeftMenuContent;
+exports.LinkPager = LinkPager;
+exports.MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = MAIN_COLUMN_HORIZONTAL_MIN_MARGIN;
+exports.MenuListItem = MenuListItem;
+exports.MenuListItemContext = MenuListItemContext;
+exports.MenuListItemWithIcon = MenuListItemWithIcon;
+exports.MenuListLabel = MenuListLabel;
+exports.MenuListLinkItem = MenuListLinkItem;
+exports.MenuListLinkItemWithIcon = MenuListLinkItemWithIcon;
+exports.MenuListSpacer = MenuListSpacer;
+exports.Pager = index;
+exports.RESPONSIVE_LEFT_WIDTH = RESPONSIVE_LEFT_WIDTH;
+exports.RESPONSIVE_MAIN_MAX_WIDTH = RESPONSIVE_MAIN_MAX_WIDTH;
+exports.StyledCancelLayoutItemBodyPadding = StyledCancelLayoutItemBodyPadding;
+exports.StyledLayoutItemBody = StyledLayoutItemBody;
+exports.SwitchCheckbox = index$2;
+exports.TextEllipsis = TextEllipsis;
+exports.WithIcon = index$1;
+exports.useElementSize = useElementSize;
+exports.useLayoutItemBodyPadding = useLayoutItemBodyPadding;
+exports.useMedia = useMedia;
+exports.useMediaScreen1 = useMediaScreen1;
 //# sourceMappingURL=index.cjs.map