@charcoal-ui/react 2.0.0-alpha.20 → 2.0.0-alpha.21

package/dist/index.cjs

@@ -1,2 +1,1061 @@
-var e=require("react"),n=require("styled-components"),t=require("@charcoal-ui/styled"),r=require("@charcoal-ui/utils"),a=require("warning"),i=require("@react-aria/switch"),o=require("react-stately"),l=require("@react-aria/textfield"),u=require("@react-aria/visually-hidden");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@charcoal-ui/icons");var s=/*#__PURE__*/d(e),c=/*#__PURE__*/d(n),f=/*#__PURE__*/d(a);function p(){return p=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},p.apply(this,arguments)}function h(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(a[t]=e[t]);return a}function v(e,n){return n||(n=e.slice(0)),e.raw=n,e}function b(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function g(e,n){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return b(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?b(e,n):void 0}}(e))||n&&e&&"number"==typeof e.length){t&&(e=t);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var m=["to","children"],x={Link:s.default.forwardRef(function(e,n){var t=e.to,r=e.children,a=h(e,m);/*#__PURE__*/return s.default.createElement("a",p({href:t,ref:n},a),r)})},y=s.default.createContext(x);function w(){return e.useContext(y)}var E,k,C,S,R,P,q,z,T,L,N,O,D,M,H,j,A,I,F,G,B,X,V,Y,J,U,$,K,Q,W,Z,_,ee,ne,te,re=t.createTheme(c.default),ae=["onClick","disabled"],ie=s.default.forwardRef(function(e,n){var t=w().Link;if("to"in e){var r=e.onClick,a=e.disabled,i=void 0!==a&&a,o=h(e,ae);/*#__PURE__*/return s.default.createElement(ue,p({},o,{as:i?void 0:t,onClick:i?void 0:r,"aria-disabled":i,ref:n}))}/*#__PURE__*/return s.default.createElement(le,p({},e,{ref:n}))}),oe=n.css(E||(E=v(["\n  /* Clickable style */\n  cursor: pointer;\n\n  "," {\n    cursor: default;\n  }\n"])),r.disabledSelector),le=c.default.button(k||(k=v(["\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n\n  ","\n"])),oe),ue=c.default.span(C||(C=v(["\n  /* Reset a-tag appearance */\n  color: inherit;\n\n  &:focus {\n    outline: none;\n  }\n\n  .text {\n    top: calc(1em + 2em);\n  }\n\n  ","\n"])),oe),de=["children","variant","size","fixed","disabled"],se=s.default.forwardRef(function(e,n){var t=e.children,r=e.variant,a=void 0===r?"Default":r,i=e.size,o=void 0===i?"M":i,l=e.fixed,u=void 0!==l&&l,d=e.disabled,c=void 0!==d&&d,f=h(e,de);/*#__PURE__*/return s.default.createElement(ce,p({},f,{disabled:c,variant:a,size:o,fixed:u,ref:n}),t)}),ce=c.default(ie).withConfig({shouldForwardProp:function(e){return"fixed"!==e}}).attrs(function(e){return p({},e,function(e){switch(e){case"Overlay":return{font:"text5",background:"surface4"};case"Default":return{font:"text2",background:"surface3"};case"Primary":return{font:"text5",background:"brand"};case"Navigation":return{font:"text5",background:"surface6"};case"Danger":return{font:"text5",background:"assertive"};default:return function(e){throw new Error(0===arguments.length?"unreachable":"unreachable ("+JSON.stringify(e)+")")}(e)}}(e.variant),function(e){switch(e){case"S":return{height:32,padding:16};case"M":return{height:40,padding:24}}}(e.size))})(S||(S=v(["\n  width: ",";\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n\n  ","\n\n  /* よく考えたらheight=32って定義が存在しないな... */\n  height: ","px;\n"])),function(e){return e.fixed?"stretch":"min-content"},function(e){return re(function(n){return[n.font[e.font].hover.press,n.bg[e.background].hover.press,n.typography(14).bold.preserveHalfLeading,n.padding.horizontal(e.padding),n.disabled,n.borderRadius("oval"),n.outline.default.focus]})},function(e){return e.height}),fe=["variant","size","icon"],pe=s.default.forwardRef(function(e,n){var t=e.variant,r=void 0===t?"Default":t,a=e.size,i=void 0===a?"M":a,o=e.icon,l=h(e,fe);return function(e,n){var t;switch(e){case"XS":t="16";break;case"S":case"M":t="24"}var r=/^[0-9]*/.exec(n);if(null==r)throw new Error("Invalid icon name");var a=r[0];a!==t&&console.warn('IconButton with size "'+e+'" expect icon size "'+t+', but got "'+a+'"')}(i,o),/*#__PURE__*/s.default.createElement(he,p({},l,{ref:n,variant:r,size:i}),/*#__PURE__*/s.default.createElement("pixiv-icon",{name:o}))}),he=c.default(ie).attrs(function(e){return p({},e,function(e){switch(e){case"Default":return{font:"text3",background:"transparent"};case"Overlay":return{font:"text5",background:"surface4"}}}(e.variant),function(e){switch(e){case"XS":return{width:20,height:20};case"S":return{width:32,height:32};case"M":return{width:40,height:40}}}(e.size))})(R||(R=v(["\n  user-select: none;\n\n  width: ","px;\n  height: ","px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ","\n"])),function(e){return e.width},function(e){return e.height},function(e){var n=e.font,t=e.background;return re(function(e){return[e.font[n],e.bg[t].hover.press,e.disabled,e.borderRadius("oval"),e.outline.default.focus]})}),ve=c.default.label(P||(P=v(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: ",";\n  align-items: center;\n  cursor: pointer;\n\n  ","\n"])),function(e){return r.px(e.theme.spacing[4])},re(function(e){return[e.disabled]})),be=c.default.input.attrs({type:"radio"})(q||(q=v(["\n  /** Make prior to browser default style */\n  &[type='radio'] {\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n\n    padding: 6px;\n\n    width: 20px;\n    height: 20px;\n\n    ",";\n\n    &:not(:checked) {\n      border-width: 2px;\n      border-style: solid;\n      border-color: ",";\n    }\n\n    &:checked {\n      ","\n\n      &::after {\n        content: '';\n        display: block;\n        width: 8px;\n        height: 8px;\n        pointer-events: none;\n\n        ","\n      }\n    }\n\n    ","\n  }\n"])),function(e){var n=e.hasError,t=void 0!==n&&n;return re(function(e){return[e.borderRadius("oval"),e.bg.text5.hover.press,t&&e.outline.assertive]})},function(e){return e.theme.color.text4},re(function(e){return e.bg.brand.hover.press}),re(function(e){return[e.bg.text5.hover.press,e.borderRadius("oval")]}),re(function(e){return e.outline.default.focus})),ge=c.default.div(z||(z=v(["\n  ","\n"])),re(function(e){return[e.typography(14)]})),me=c.default.div(T||(T=v(["\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: ",";\n"])),function(e){return r.px(e.theme.spacing[8])}),xe=s.default.createContext({name:void 0,selected:void 0,disabled:!1,readonly:!1,hasError:!1,onChange:function(){throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?")}}),ye=e.createContext({name:void 0,selected:[],disabled:!1,readonly:!1,hasError:!1,onChange:function(){throw new Error("Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<SelectGroup />` ?")}}),we=c.default.label(L||(L=v(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  "," {\n    cursor: default;\n  }\n  gap: ",";\n  ","\n"])),r.disabledSelector,function(e){return r.px(e.theme.spacing[4])},re(function(e){return e.disabled})),Ee=c.default.div(N||(N=v(["\n  display: flex;\n  align-items: center;\n  ","\n"])),re(function(e){return[e.typography(14),e.font.text1]})),ke=c.default.input.attrs({type:"checkbox"})(O||(O=v(["\n  &[type='checkbox'] {\n    appearance: none;\n    display: block;\n    width: 20px;\n    height: 20px;\n    margin: 0;\n\n    &:checked {\n      ","\n    }\n\n    ",";\n  }\n"])),re(function(e){return e.bg.brand.hover.press}),function(e){var n=e.hasError,t=e.overlay;return re(function(e){return[e.bg.text3.hover.press,e.borderRadius("oval"),n&&!t&&e.outline.assertive,t&&e.bg.surface4]})}),Ce=c.default.div(D||(D=v(["\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ","\n\n  ","\n"])),function(e){var n=e.hasError,t=e.overlay;return re(function(e){return[e.width.px(24),e.height.px(24),e.borderRadius("oval"),e.font.text5,n&&t&&e.outline.assertive]})},function(e){return e.overlay&&n.css(M||(M=v(["\n      border-color: ",";\n      border-width: 2px;\n      border-style: solid;\n    "])),function(e){return e.theme.color.text5})}),Se=["className","type"],Re=c.default.label(H||(H=v(["\n  display: inline-grid;\n  grid-template-columns: auto 1fr;\n  gap: ",";\n  cursor: pointer;\n  outline: 0;\n\n  ","\n\n  "," {\n    cursor: default;\n  }\n"])),function(e){return r.px(e.theme.spacing[4])},re(function(e){return e.disabled}),r.disabledSelector),Pe=c.default.div(j||(j=v(["\n  ","\n"])),re(function(e){return e.typography(14)})),qe=c.default.input.attrs({type:"checkbox"})(A||(A=v(["\n  &[type='checkbox'] {\n    appearance: none;\n    display: inline-flex;\n    position: relative;\n    box-sizing: border-box;\n    width: 28px;\n    border: 2px solid transparent;\n    transition: box-shadow 0.2s, background-color 0.2s;\n    cursor: inherit;\n    ","\n\n    &::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      left: 0;\n      width: 12px;\n      height: 12px;\n      transform: translateX(0);\n      transition: transform 0.2s;\n      ","\n    }\n\n    &:checked {\n      ","\n\n      &::after {\n        transform: translateX(12px);\n      }\n    }\n  }\n"])),re(function(e){return[e.borderRadius(16),e.height.px(16),e.bg.text4.hover.press,e.outline.default.focus]}),re(function(e){return[e.bg.text5.hover.press,e.borderRadius("oval")]}),re(function(e){return e.bg.brand.hover.press})),ze=["style","className","label","required","requiredText","subLabel"],Te=s.default.forwardRef(function(e,n){var t=e.style,r=e.className,a=e.label,i=e.required,o=void 0!==i&&i,l=e.requiredText,u=e.subLabel,d=h(e,ze);/*#__PURE__*/return s.default.createElement(Me,{style:t,className:r},/*#__PURE__*/s.default.createElement(Ne,p({ref:n},d),a),o&&/*#__PURE__*/s.default.createElement(Oe,null,l),/*#__PURE__*/s.default.createElement(De,null,/*#__PURE__*/s.default.createElement("span",null,u)))}),Le=t.createTheme(c.default),Ne=c.default.label(I||(I=v(["\n  ","\n"])),Le(function(e){return[e.typography(14).bold,e.font.text1]})),Oe=c.default.span(F||(F=v(["\n  ","\n"])),Le(function(e){return[e.typography(14),e.font.text3]})),De=c.default.div(G||(G=v(["\n  ","\n"])),Le(function(e){return[e.typography(14),e.font.text3.hover.press,e.outline.default.focus]})),Me=c.default.div(B||(B=v(["\n  display: inline-flex;\n  align-items: center;\n\n  > "," {\n    ","\n  }\n\n  > "," {\n    ","\n  }\n"])),Oe,Le(function(e){return e.margin.left(4)}),De,Le(function(e){return e.margin.left("auto")})),He=["onChange"],je=["onChange"],Ae=t.createTheme(c.default);function Ie(){var e=arguments;return function(n){for(var t,r=g([].slice.call(e));!(t=r()).done;){var a=t.value;"function"==typeof a?a(n):null!==a&&(a.current=n)}}}function Fe(e){return Array.from(e).length}var Ge=s.default.forwardRef(function(e,n){/*#__PURE__*/return s.default.createElement(void 0!==e.multiline&&e.multiline?Xe:Be,p({ref:n},e))}),Be=s.default.forwardRef(function(n,t){var r,a=n.onChange,i=h(n,He),o=i.className,d=i.showLabel,c=void 0!==d&&d,f=i.showCount,v=void 0!==f&&f,b=i.label,g=i.requiredText,m=i.subLabel,x=i.disabled,y=void 0!==x&&x,w=i.required,E=i.invalid,k=void 0!==E&&E,C=i.assistiveText,S=i.maxLength,R=i.prefix,P=void 0===R?null:R,q=i.suffix,z=void 0===q?null:q,T=u.useVisuallyHidden().visuallyHiddenProps,L=e.useRef(null),N=e.useRef(null),O=e.useRef(null),D=e.useState(Fe(null!=(r=i.value)?r:"")),M=D[0],H=D[1],j=e.useState(0),A=j[0],I=j[1],F=e.useState(0),G=F[0],B=F[1],X=void 0===i.value,V=e.useCallback(function(e){var n=Fe(e);void 0!==S&&n>S||(X&&H(n),null==a||a(e))},[S,X,a]);e.useEffect(function(){var e;H(Fe(null!=(e=i.value)?e:""))},[i.value]);var Y=l.useTextField(p({inputElementType:"input",isDisabled:y,isRequired:w,validationState:k?"invalid":"valid",description:!k&&C,errorMessage:k&&C,onChange:V},i),L),J=Y.inputProps,U=Y.labelProps,$=Y.descriptionProps,K=Y.errorMessageProps;return e.useEffect(function(){var e=new ResizeObserver(function(e){I(e[0].contentRect.width)}),n=new ResizeObserver(function(e){B(e[0].contentRect.width)});return null!==N.current&&e.observe(N.current),null!==O.current&&n.observe(O.current),function(){n.disconnect(),e.disconnect()}},[]),/*#__PURE__*/s.default.createElement(Ve,{className:o,isDisabled:y},/*#__PURE__*/s.default.createElement(Ye,p({label:b,requiredText:g,required:w,subLabel:m},U,c?{}:T)),/*#__PURE__*/s.default.createElement(Je,null,/*#__PURE__*/s.default.createElement(Ue,{ref:N},/*#__PURE__*/s.default.createElement(Ke,null,P)),/*#__PURE__*/s.default.createElement(Qe,p({ref:Ie(t,L),invalid:k,extraLeftPadding:A,extraRightPadding:G},J)),/*#__PURE__*/s.default.createElement($e,{ref:O},/*#__PURE__*/s.default.createElement(Ke,null,z),v&&/*#__PURE__*/s.default.createElement(_e,null,void 0!==S?M+"/"+S:M))),null!=C&&0!==C.length&&/*#__PURE__*/s.default.createElement(nn,p({invalid:k},k?K:$),C))}),Xe=s.default.forwardRef(function(n,t){var r,a=n.onChange,i=h(n,je),o=i.className,d=i.showCount,c=void 0!==d&&d,f=i.showLabel,v=void 0!==f&&f,b=i.label,g=i.requiredText,m=i.subLabel,x=i.disabled,y=void 0!==x&&x,w=i.required,E=i.invalid,k=void 0!==E&&E,C=i.assistiveText,S=i.maxLength,R=i.autoHeight,P=void 0!==R&&R,q=i.rows,z=void 0===q?4:q,T=u.useVisuallyHidden().visuallyHiddenProps,L=e.useRef(null),N=e.useRef(null),O=e.useState(Fe(null!=(r=i.value)?r:"")),D=O[0],M=O[1],H=e.useState(z),j=H[0],A=H[1],I=e.useCallback(function(e){var n,t,r=null!=(n=null==(t=(e.value+"\n").match(/\n/g))?void 0:t.length)?n:1;z<=r&&A(r)},[z]),F=void 0===i.value,G=e.useCallback(function(e){var n=Fe(e);void 0!==S&&n>S||(F&&M(n),P&&null!==L.current&&I(L.current),null==a||a(e))},[P,S,F,a,I]);e.useEffect(function(){var e;M(Fe(null!=(e=i.value)?e:""))},[i.value]);var B=l.useTextField(p({inputElementType:"textarea",isDisabled:y,isRequired:w,validationState:k?"invalid":"valid",description:!k&&C,errorMessage:k&&C,onChange:G},i),N),X=B.inputProps,V=B.labelProps,Y=B.descriptionProps,J=B.errorMessageProps;return e.useEffect(function(){P&&null!==L.current&&I(L.current)},[P,I]),/*#__PURE__*/s.default.createElement(Ve,{className:o,isDisabled:y},/*#__PURE__*/s.default.createElement(Ye,p({label:b,requiredText:g,required:w,subLabel:m},V,v?{}:T)),/*#__PURE__*/s.default.createElement(We,{invalid:k,rows:c?j+1:j},/*#__PURE__*/s.default.createElement(Ze,p({ref:Ie(L,t,N),rows:j,noBottomPadding:c},X)),c&&/*#__PURE__*/s.default.createElement(en,null,void 0!==S?D+"/"+S:D)),null!=C&&0!==C.length&&/*#__PURE__*/s.default.createElement(nn,p({invalid:k},k?J:Y),C))}),Ve=c.default.div(X||(X=v(["\n  display: flex;\n  flex-direction: column;\n\n  ","\n"])),function(e){return e.isDisabled&&{opacity:e.theme.elementEffect.disabled.opacity}}),Ye=c.default(Te)(V||(V=v(["\n  ","\n"])),Ae(function(e){return e.margin.bottom(8)})),Je=c.default.div(Y||(Y=v(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"]))),Ue=c.default.span(J||(J=v(["\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n"]))),$e=c.default.span(U||(U=v(["\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\n  display: flex;\n  gap: 8px;\n"]))),Ke=c.default.span($||($=v(["\n  user-select: none;\n\n  ","\n"])),Ae(function(e){return[e.typography(14).preserveHalfLeading,e.font.text2]})),Qe=c.default.input(K||(K=v(["\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: calc((8px + ","px) / 0.875);\n  padding-right: calc((8px + ","px) / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  ","\n\n  &::placeholder {\n    ","\n  }\n"])),function(e){return e.extraLeftPadding},function(e){return e.extraRightPadding},function(e){return Ae(function(n){return[n.bg.surface3.hover,n.outline.default.focus,e.invalid&&n.outline.assertive,n.font.text2]})},Ae(function(e){return e.font.text3})),We=c.default.div(Q||(Q=v(["\n  position: relative;\n  overflow: hidden;\n  padding: 0 8px;\n\n  ","\n\n  &:focus-within {\n    ","\n  }\n\n  ",";\n"])),function(e){return Ae(function(n){return[n.bg.surface3.hover,e.invalid&&n.outline.assertive,n.font.text2,n.borderRadius(4)]})},function(e){return Ae(function(n){return e.invalid?n.outline.assertive:n.outline.default})},function(e){var t=e.rows;return n.css(W||(W=v(["\n    height: calc(22px * "," + 18px);\n  "])),t)}),Ze=c.default.textarea(Z||(Z=v(["\n  border: none;\n  outline: none;\n  resize: none;\n  font-family: inherit;\n  color: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) 0 ",";\n\n  ",";\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  background: none;\n\n  &::placeholder {\n    ","\n  }\n\n  /* Hide scrollbar for Chrome, Safari and Opera */\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  /* Hide scrollbar for IE, Edge and Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n"])),function(e){return e.noBottomPadding?0:""},function(e){var t=e.rows,r=void 0===t?1:t;return n.css(_||(_=v(["\n    height: calc(22px / 0.875 * ",");\n  "])),r)},Ae(function(e){return e.font.text3})),_e=c.default.span(ee||(ee=v(["\n  ","\n"])),Ae(function(e){return[e.typography(14).preserveHalfLeading,e.font.text3]})),en=c.default.span(ne||(ne=v(["\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  ","\n"])),Ae(function(e){return[e.typography(14).preserveHalfLeading,e.font.text3]})),nn=c.default.p(te||(te=v(["\n  ","\n"])),function(e){return Ae(function(n){return[n.typography(14),n.margin.top(8),n.margin.bottom(0),n.font[e.invalid?"assertive":"text1"]]})}),tn=["name","scale","unsafeNonGuidelineScale","className"],rn=s.default.forwardRef(function(e,n){var t=e.name,r=e.scale,a=e.unsafeNonGuidelineScale,i=e.className,o=h(e,tn);/*#__PURE__*/return s.default.createElement("pixiv-icon",p({ref:n,name:t,scale:r,"unsafe-non-guideline-scale":a,class:i},o))});exports.Button=se,exports.Clickable=ie,exports.ComponentAbstraction=function(e){var n=e.children;/*#__PURE__*/return s.default.createElement(y.Provider,{value:p({},x,e.components)},n)},exports.Icon=rn,exports.IconButton=pe,exports.Radio=function(n){var t=n.value,r=n.forceChecked,a=void 0!==r&&r,i=n.disabled,o=void 0!==i&&i,l=n.children,u=e.useContext(xe),d=u.name,c=u.selected,p=u.disabled,h=u.readonly,v=u.hasError,b=u.onChange;f.default(void 0!==d,'"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?');var g=t===c,m=o||p,x=h&&!g,y=e.useCallback(function(e){b(e.currentTarget.value)},[b]);/*#__PURE__*/return s.default.createElement(ve,{"aria-disabled":m||x},/*#__PURE__*/s.default.createElement(be,{name:d,value:t,checked:a||g,hasError:v,onChange:y,disabled:m||x}),null!=l&&/*#__PURE__*/s.default.createElement(ge,null,l))},exports.RadioGroup=function(n){var t=n.className,r=n.value,a=n.label,i=n.name,o=n.onChange,l=n.disabled,u=n.readonly,d=n.hasError,c=n.children,f=e.useCallback(function(e){o(e)},[o]);/*#__PURE__*/return s.default.createElement(xe.Provider,{value:{name:i,selected:r,disabled:null!=l&&l,readonly:null!=u&&u,hasError:null!=d&&d,onChange:f}},/*#__PURE__*/s.default.createElement(me,{role:"radiogroup","aria-orientation":"vertical","aria-label":a,"aria-invalid":d,className:t},c))},exports.Select=function(n){var t=n.value,r=n.forceChecked,a=void 0!==r&&r,i=n.disabled,o=void 0!==i&&i,l=n.onChange,u=n.variant,d=void 0===u?"default":u,c=n.children,p=e.useContext(ye),h=p.name,v=p.selected,b=p.disabled,g=p.readonly,m=p.hasError,x=p.onChange;f.default(void 0!==h,'"name" is not Provided for <Select>. Perhaps you forgot to wrap with <SelectGroup> ?');var y=v.includes(t)||a,w=o||b||g,E=e.useCallback(function(e){e.currentTarget instanceof HTMLInputElement&&(l&&l({value:t,selected:e.currentTarget.checked}),x({value:t,selected:e.currentTarget.checked}))},[l,x,t]);/*#__PURE__*/return s.default.createElement(we,{"aria-disabled":w},/*#__PURE__*/s.default.createElement(ke,{name:h,value:t,hasError:m,checked:y,disabled:w,onChange:E,overlay:"overlay"===d,"aria-invalid":m}),/*#__PURE__*/s.default.createElement(Ce,{overlay:"overlay"===d,hasError:m,"aria-hidden":!0},/*#__PURE__*/s.default.createElement("pixiv-icon",{name:"24/Check","unsafe-non-guideline-scale":16/24})),Boolean(c)&&/*#__PURE__*/s.default.createElement(Ee,null,c))},exports.SelectGroup=function(n){var t=n.className,r=n.name,a=n.ariaLabel,i=n.selected,o=n.onChange,l=n.disabled,u=void 0!==l&&l,d=n.readonly,c=void 0!==d&&d,f=n.hasError,p=void 0!==f&&f,h=n.children,v=e.useCallback(function(e){var n=i.indexOf(e.value);e.selected?n<0&&o([].concat(i,[e.value])):n>=0&&o([].concat(i.slice(0,n),i.slice(n+1)))},[o,i]);/*#__PURE__*/return s.default.createElement(ye.Provider,{value:{name:r,selected:Array.from(new Set(i)),disabled:u,readonly:c,hasError:p,onChange:v}},/*#__PURE__*/s.default.createElement("div",{className:t,"aria-label":a,"data-testid":"SelectGroup"},h))},exports.Switch=function(n){var t=n.disabled,r=n.className,a=e.useMemo(function(){return p({},n,{"aria-label":"children"in n?void 0:n.label,isDisabled:n.disabled,isSelected:n.checked})},[n]),l=o.useToggleState(a),u=e.useRef(null),d=h(i.useSwitch(a,l,u).inputProps,Se);/*#__PURE__*/return s.default.createElement(Re,{className:r,"aria-disabled":t},/*#__PURE__*/s.default.createElement(qe,p({},d,{ref:u})),"children"in n?/*#__PURE__*/s.default.createElement(Pe,null,n.children):void 0)},exports.TextField=Ge,exports.useComponentAbstraction=w;
+var React = require('react');
+var ssr = require('@react-aria/ssr');
+var styled$1 = require('styled-components');
+var styled = require('@charcoal-ui/styled');
+var utils = require('@charcoal-ui/utils');
+var warning = require('warning');
+var _switch = require('@react-aria/switch');
+var reactStately = require('react-stately');
+var textfield = require('@react-aria/textfield');
+var visuallyHidden = require('@react-aria/visually-hidden');
+require('@charcoal-ui/icons');
+
+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$1);
+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;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var _excluded$7 = ["to", "children"];
+var DefaultLink = React__default["default"].forwardRef(function DefaultLink(_ref, ref) {
+  var to = _ref.to,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
+  return /*#__PURE__*/React__default["default"].createElement("a", _extends({
+    href: to,
+    ref: ref
+  }, rest), children);
+});
+var DefaultValue = {
+  Link: DefaultLink
+};
+var ComponentAbstractionContext = React__default["default"].createContext(DefaultValue);
+function ComponentAbstraction(_ref2) {
+  var children = _ref2.children,
+      components = _ref2.components;
+  return /*#__PURE__*/React__default["default"].createElement(ComponentAbstractionContext.Provider, {
+    value: _extends({}, DefaultValue, components)
+  }, children);
+}
+function useComponentAbstraction() {
+  return React.useContext(ComponentAbstractionContext);
+}
+
+/**
+ * 今後ポートされる予定の汎用的な関数群
+ */
+function unreachable(value) {
+  throw new Error(arguments.length === 0 ? 'unreachable' : "unreachable (" + JSON.stringify(value) + ")");
+}
+
+var theme$2 = styled.createTheme(styled__default["default"]);
+
+var _templateObject$7, _templateObject2$5, _templateObject3$5;
+
+var _excluded$6 = ["onClick", "disabled"];
+var Clickable = React__default["default"].forwardRef(function Clickable(props, ref) {
+  var _useComponentAbstract = useComponentAbstraction(),
+      Link = _useComponentAbstract.Link;
+
+  if ('to' in props) {
+    var onClick = props.onClick,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        rest = _objectWithoutPropertiesLoose(props, _excluded$6);
+
+    return /*#__PURE__*/React__default["default"].createElement(A, _extends({}, rest, {
+      as: disabled ? undefined : Link,
+      onClick: disabled ? undefined : onClick,
+      "aria-disabled": disabled,
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, props, {
+      ref: ref
+    }));
+  }
+});
+var clickableCss = styled$1.css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  /* Clickable style */\n  cursor: pointer;\n\n  ", " {\n    cursor: default;\n  }\n"])), utils.disabledSelector);
+var Button$1 = styled__default["default"].button(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n\n  ", "\n"])), clickableCss);
+var A = styled__default["default"].span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  /* Reset a-tag appearance */\n  color: inherit;\n\n  &:focus {\n    outline: none;\n  }\n\n  .text {\n    top: calc(1em + 2em);\n  }\n\n  ", "\n"])), clickableCss);
+
+var _templateObject$6;
+
+var _excluded$5 = ["children", "variant", "size", "fixed", "disabled"];
+var Button = React__default["default"].forwardRef(function Button(_ref, ref) {
+  var children = _ref.children,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'Default' : _ref$variant,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'M' : _ref$size,
+      _ref$fixed = _ref.fixed,
+      fixed = _ref$fixed === void 0 ? false : _ref$fixed,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends({}, rest, {
+    disabled: disabled,
+    variant: variant,
+    size: size,
+    fixed: fixed,
+    ref: ref
+  }), children);
+});
+var StyledButton = styled__default["default"](Clickable).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    // fixed は <button> 要素に渡ってはいけない
+    return prop !== 'fixed';
+  }
+}).attrs(styledProps$1)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n\n  ", "\n\n  /* \u3088\u304F\u8003\u3048\u305F\u3089height=32\u3063\u3066\u5B9A\u7FA9\u304C\u5B58\u5728\u3057\u306A\u3044\u306A... */\n  height: ", "px;\n"])), function (p) {
+  return p.fixed ? 'stretch' : 'min-content';
+}, function (p) {
+  return theme$2(function (o) {
+    return [o.font[p.font].hover.press, o.bg[p.background].hover.press, o.typography(14).bold.preserveHalfLeading, o.padding.horizontal(p.padding), o.disabled, o.borderRadius('oval'), o.outline["default"].focus];
+  });
+}, function (p) {
+  return p.height;
+});
+
+function styledProps$1(props) {
+  return _extends({}, props, variantToProps$1(props.variant), sizeToProps$1(props.size));
+}
+
+function variantToProps$1(variant) {
+  switch (variant) {
+    case 'Overlay':
+      return {
+        font: 'text5',
+        background: 'surface4'
+      };
+
+    case 'Default':
+      return {
+        font: 'text2',
+        background: 'surface3'
+      };
+
+    case 'Primary':
+      return {
+        font: 'text5',
+        background: 'brand'
+      };
+
+    case 'Navigation':
+      return {
+        font: 'text5',
+        background: 'surface6'
+      };
+
+    case 'Danger':
+      return {
+        font: 'text5',
+        background: 'assertive'
+      };
+
+    default:
+      return unreachable(variant);
+  }
+}
+
+function sizeToProps$1(size) {
+  switch (size) {
+    case 'S':
+      return {
+        height: 32,
+        padding: 16
+      };
+
+    case 'M':
+      return {
+        height: 40,
+        padding: 24
+      };
+  }
+}
+
+var _templateObject$5;
+
+var _excluded$4 = ["variant", "size", "icon"];
+var IconButton = React__default["default"].forwardRef(function IconButtonInner(_ref, ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'Default' : _ref$variant,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'M' : _ref$size,
+      icon = _ref.icon,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+
+  validateIconSize(size, icon);
+  return /*#__PURE__*/React__default["default"].createElement(StyledIconButton, _extends({}, rest, {
+    ref: ref,
+    variant: variant,
+    size: size
+  }), /*#__PURE__*/React__default["default"].createElement("pixiv-icon", {
+    name: icon
+  }));
+});
+var StyledIconButton = styled__default["default"](Clickable).attrs(styledProps)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n"])), function (p) {
+  return p.width;
+}, function (p) {
+  return p.height;
+}, function (_ref2) {
+  var font = _ref2.font,
+      background = _ref2.background;
+  return theme$2(function (o) {
+    return [o.font[font], o.bg[background].hover.press, o.disabled, o.borderRadius('oval'), o.outline["default"].focus];
+  });
+});
+
+function styledProps(props) {
+  return _extends({}, props, variantToProps(props.variant), sizeToProps(props.size));
+}
+
+function variantToProps(variant) {
+  switch (variant) {
+    case 'Default':
+      return {
+        font: 'text3',
+        background: 'transparent'
+      };
+
+    case 'Overlay':
+      return {
+        font: 'text5',
+        background: 'surface4'
+      };
+  }
+}
+
+function sizeToProps(size) {
+  switch (size) {
+    case 'XS':
+      return {
+        width: 20,
+        height: 20
+      };
+
+    case 'S':
+      return {
+        width: 32,
+        height: 32
+      };
+
+    case 'M':
+      return {
+        width: 40,
+        height: 40
+      };
+  }
+}
+/**
+ * validates matches of size and icon
+ */
+
+
+function validateIconSize(size, icon) {
+  var requiredIconSize;
+
+  switch (size) {
+    case 'XS':
+      requiredIconSize = '16';
+      break;
+
+    case 'S':
+    case 'M':
+      requiredIconSize = '24';
+      break;
+  } // アイコン名は サイズ/名前
+
+
+  var result = /^[0-9]*/.exec(icon);
+
+  if (result == null) {
+    throw new Error('Invalid icon name');
+  }
+
+  var iconSize = result[0];
+
+  if (iconSize !== requiredIconSize) {
+    // eslint-disable-next-line no-console
+    console.warn("IconButton with size \"" + size + "\" expect icon size \"" + requiredIconSize + ", but got \"" + iconSize + "\"");
+  }
+}
+
+var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3;
+function Radio(_ref) {
+  var value = _ref.value,
+      _ref$forceChecked = _ref.forceChecked,
+      forceChecked = _ref$forceChecked === void 0 ? false : _ref$forceChecked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      children = _ref.children;
+
+  var _useContext = React.useContext(RadioGroupContext),
+      name = _useContext.name,
+      selected = _useContext.selected,
+      isParentDisabled = _useContext.disabled,
+      readonly = _useContext.readonly,
+      hasError = _useContext.hasError,
+      onChange = _useContext.onChange;
+
+  warning__default["default"]( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  name !== undefined, "\"name\" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?");
+  var isSelected = value === selected;
+  var isDisabled = disabled || isParentDisabled;
+  var isReadonly = readonly && !isSelected;
+  var handleChange = React.useCallback(function (e) {
+    onChange(e.currentTarget.value);
+  }, [onChange]);
+  return /*#__PURE__*/React__default["default"].createElement(RadioRoot, {
+    "aria-disabled": isDisabled || isReadonly
+  }, /*#__PURE__*/React__default["default"].createElement(RadioInput, {
+    name: name,
+    value: value,
+    checked: forceChecked || isSelected,
+    hasError: hasError,
+    onChange: handleChange,
+    disabled: isDisabled || isReadonly
+  }), children != null && /*#__PURE__*/React__default["default"].createElement(RadioLabel, null, children));
+}
+var RadioRoot = styled__default["default"].label(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  ", "\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return utils.px(theme.spacing[4]);
+}, theme$2(function (o) {
+  return [o.disabled];
+}));
+var RadioInput = styled__default["default"].input.attrs({
+  type: 'radio'
+})(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  /** Make prior to browser default style */\n  &[type='radio'] {\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n\n    padding: 6px;\n\n    width: 20px;\n    height: 20px;\n\n    ", ";\n\n    &:not(:checked) {\n      border-width: 2px;\n      border-style: solid;\n      border-color: ", ";\n    }\n\n    &:checked {\n      ", "\n\n      &::after {\n        content: '';\n        display: block;\n        width: 8px;\n        height: 8px;\n        pointer-events: none;\n\n        ", "\n      }\n    }\n\n    ", "\n  }\n"])), function (_ref3) {
+  var _ref3$hasError = _ref3.hasError,
+      hasError = _ref3$hasError === void 0 ? false : _ref3$hasError;
+  return theme$2(function (o) {
+    return [o.borderRadius('oval'), o.bg.text5.hover.press, hasError && o.outline.assertive];
+  });
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.color.text4;
+}, theme$2(function (o) {
+  return o.bg.brand.hover.press;
+}), theme$2(function (o) {
+  return [o.bg.text5.hover.press, o.borderRadius('oval')];
+}), theme$2(function (o) {
+  return o.outline["default"].focus;
+}));
+var RadioLabel = styled__default["default"].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
+  return [o.typography(14)];
+})); // TODO: use (or polyfill) flex gap
+
+var StyledRadioGroup = styled__default["default"].div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return utils.px(theme.spacing[8]);
+});
+var RadioGroupContext = React__default["default"].createContext({
+  name: undefined,
+  selected: undefined,
+  disabled: false,
+  readonly: false,
+  hasError: false,
+  onChange: function onChange() {
+    throw new Error('Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?');
+  }
+});
+function RadioGroup(_ref6) {
+  var className = _ref6.className,
+      value = _ref6.value,
+      label = _ref6.label,
+      name = _ref6.name,
+      onChange = _ref6.onChange,
+      disabled = _ref6.disabled,
+      readonly = _ref6.readonly,
+      hasError = _ref6.hasError,
+      children = _ref6.children;
+  var handleChange = React.useCallback(function (next) {
+    onChange(next);
+  }, [onChange]);
+  return /*#__PURE__*/React__default["default"].createElement(RadioGroupContext.Provider, {
+    value: {
+      name: name,
+      selected: value,
+      disabled: disabled != null ? disabled : false,
+      readonly: readonly != null ? readonly : false,
+      hasError: hasError != null ? hasError : false,
+      onChange: handleChange
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(StyledRadioGroup, {
+    role: "radiogroup",
+    "aria-orientation": "vertical",
+    "aria-label": label,
+    "aria-invalid": hasError,
+    className: className
+  }, children));
+}
+
+var SelectGroupContext = React.createContext({
+  name: undefined,
+  selected: [],
+  disabled: false,
+  readonly: false,
+  hasError: false,
+  onChange: function onChange() {
+    throw new Error('Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<SelectGroup />` ?');
+  }
+});
+
+var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$1;
+function Select(_ref) {
+  var value = _ref.value,
+      _ref$forceChecked = _ref.forceChecked,
+      forceChecked = _ref$forceChecked === void 0 ? false : _ref$forceChecked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onChange = _ref.onChange,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+      children = _ref.children;
+
+  var _useContext = React.useContext(SelectGroupContext),
+      name = _useContext.name,
+      selected = _useContext.selected,
+      parentDisabled = _useContext.disabled,
+      readonly = _useContext.readonly,
+      hasError = _useContext.hasError,
+      parentOnChange = _useContext.onChange;
+
+  warning__default["default"]( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  name !== undefined, "\"name\" is not Provided for <Select>. Perhaps you forgot to wrap with <SelectGroup> ?");
+  var isSelected = selected.includes(value) || forceChecked;
+  var isDisabled = disabled || parentDisabled || readonly;
+  var handleChange = React.useCallback(function (event) {
+    if (!(event.currentTarget instanceof HTMLInputElement)) {
+      return;
+    }
+
+    if (onChange) onChange({
+      value: value,
+      selected: event.currentTarget.checked
+    });
+    parentOnChange({
+      value: value,
+      selected: event.currentTarget.checked
+    });
+  }, [onChange, parentOnChange, value]);
+  return /*#__PURE__*/React__default["default"].createElement(SelectRoot, {
+    "aria-disabled": isDisabled
+  }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
+    name: name,
+    value: value,
+    hasError: hasError,
+    checked: isSelected,
+    disabled: isDisabled,
+    onChange: handleChange,
+    overlay: variant === 'overlay',
+    "aria-invalid": hasError
+  }), /*#__PURE__*/React__default["default"].createElement(SelectInputOverlay, {
+    overlay: variant === 'overlay',
+    hasError: hasError,
+    "aria-hidden": true
+  }, /*#__PURE__*/React__default["default"].createElement("pixiv-icon", {
+    name: "24/Check",
+    "unsafe-non-guideline-scale": 16 / 24
+  })), Boolean(children) && /*#__PURE__*/React__default["default"].createElement(SelectLabel, null, children));
+}
+var SelectRoot = styled__default["default"].label(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  ", " {\n    cursor: default;\n  }\n  gap: ", ";\n  ", "\n"])), utils.disabledSelector, function (_ref2) {
+  var theme = _ref2.theme;
+  return utils.px(theme.spacing[4]);
+}, theme$2(function (o) {
+  return o.disabled;
+}));
+var SelectLabel = styled__default["default"].div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  ", "\n"])), theme$2(function (o) {
+  return [o.typography(14), o.font.text1];
+}));
+var SelectInput = styled__default["default"].input.attrs({
+  type: 'checkbox'
+})(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  &[type='checkbox'] {\n    appearance: none;\n    display: block;\n    width: 20px;\n    height: 20px;\n    margin: 0;\n\n    &:checked {\n      ", "\n    }\n\n    ", ";\n  }\n"])), theme$2(function (o) {
+  return o.bg.brand.hover.press;
+}), function (_ref3) {
+  var hasError = _ref3.hasError,
+      overlay = _ref3.overlay;
+  return theme$2(function (o) {
+    return [o.bg.text3.hover.press, o.borderRadius('oval'), hasError && !overlay && o.outline.assertive, overlay && o.bg.surface4];
+  });
+});
+var SelectInputOverlay = styled__default["default"].div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  ", "\n"])), function (_ref4) {
+  var hasError = _ref4.hasError,
+      overlay = _ref4.overlay;
+  return theme$2(function (o) {
+    return [o.width.px(24), o.height.px(24), o.borderRadius('oval'), o.font.text5, hasError && overlay && o.outline.assertive];
+  });
+}, function (_ref5) {
+  var overlay = _ref5.overlay;
+  return overlay && styled$1.css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      border-width: 2px;\n      border-style: solid;\n    "])), function (_ref6) {
+    var theme = _ref6.theme;
+    return theme.color.text5;
+  });
+});
+function SelectGroup(_ref7) {
+  var className = _ref7.className,
+      name = _ref7.name,
+      ariaLabel = _ref7.ariaLabel,
+      selected = _ref7.selected,
+      onChange = _ref7.onChange,
+      _ref7$disabled = _ref7.disabled,
+      disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
+      _ref7$readonly = _ref7.readonly,
+      readonly = _ref7$readonly === void 0 ? false : _ref7$readonly,
+      _ref7$hasError = _ref7.hasError,
+      hasError = _ref7$hasError === void 0 ? false : _ref7$hasError,
+      children = _ref7.children;
+  var handleChange = React.useCallback(function (payload) {
+    var index = selected.indexOf(payload.value);
+
+    if (payload.selected) {
+      if (index < 0) {
+        onChange([].concat(selected, [payload.value]));
+      }
+    } else {
+      if (index >= 0) {
+        onChange([].concat(selected.slice(0, index), selected.slice(index + 1)));
+      }
+    }
+  }, [onChange, selected]);
+  return /*#__PURE__*/React__default["default"].createElement(SelectGroupContext.Provider, {
+    value: {
+      name: name,
+      selected: Array.from(new Set(selected)),
+      disabled: disabled,
+      readonly: readonly,
+      hasError: hasError,
+      onChange: handleChange
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className,
+    "aria-label": ariaLabel,
+    "data-testid": "SelectGroup"
+  }, children));
+}
+
+var _templateObject$2, _templateObject2$2, _templateObject3$2;
+
+var _excluded$3 = ["className", "type"];
+function SwitchCheckbox(props) {
+  var disabled = props.disabled,
+      className = props.className;
+  var ariaSwitchProps = React.useMemo(function () {
+    return _extends({}, props, {
+      // children がいない場合は aria-label をつけないといけない
+      'aria-label': 'children' in props ? undefined : props.label,
+      isDisabled: props.disabled,
+      isSelected: props.checked
+    });
+  }, [props]);
+  var state = reactStately.useToggleState(ariaSwitchProps);
+  var ref = React.useRef(null);
+
+  var _useSwitch = _switch.useSwitch(ariaSwitchProps, state, ref),
+      _useSwitch$inputProps = _useSwitch.inputProps,
+      rest = _objectWithoutPropertiesLoose(_useSwitch$inputProps, _excluded$3);
+
+  return /*#__PURE__*/React__default["default"].createElement(Label$1, {
+    className: className,
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React__default["default"].createElement(SwitchInput, _extends({}, rest, {
+    ref: ref
+  })), 'children' in props ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/destructuring-assignment
+  React__default["default"].createElement(LabelInner, null, props.children) : undefined);
+}
+var Label$1 = styled__default["default"].label(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  display: inline-grid;\n  grid-template-columns: auto 1fr;\n  gap: ", ";\n  cursor: pointer;\n  outline: 0;\n\n  ", "\n\n  ", " {\n    cursor: default;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return utils.px(theme.spacing[4]);
+}, theme$2(function (o) {
+  return o.disabled;
+}), utils.disabledSelector);
+var LabelInner = styled__default["default"].div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
+  return o.typography(14);
+}));
+var SwitchInput = styled__default["default"].input.attrs({
+  type: 'checkbox'
+})(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  &[type='checkbox'] {\n    appearance: none;\n    display: inline-flex;\n    position: relative;\n    box-sizing: border-box;\n    width: 28px;\n    border: 2px solid transparent;\n    transition: box-shadow 0.2s, background-color 0.2s;\n    cursor: inherit;\n    ", "\n\n    &::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      left: 0;\n      width: 12px;\n      height: 12px;\n      transform: translateX(0);\n      transition: transform 0.2s;\n      ", "\n    }\n\n    &:checked {\n      ", "\n\n      &::after {\n        transform: translateX(12px);\n      }\n    }\n  }\n"])), theme$2(function (o) {
+  return [o.borderRadius(16), o.height.px(16), o.bg.text4.hover.press, o.outline["default"].focus];
+}), theme$2(function (o) {
+  return [o.bg.text5.hover.press, o.borderRadius('oval')];
+}), theme$2(function (o) {
+  return o.bg.brand.hover.press;
+}));
+
+var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1;
+
+var _excluded$2 = ["style", "className", "label", "required", "requiredText", "subLabel"];
+var FieldLabel = React__default["default"].forwardRef(function FieldLabel(_ref, ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      label = _ref.label,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      requiredText = _ref.requiredText,
+      subLabel = _ref.subLabel,
+      labelProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  return /*#__PURE__*/React__default["default"].createElement(FieldLabelWrapper, {
+    style: style,
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement(Label, _extends({
+    ref: ref
+  }, labelProps), label), required && /*#__PURE__*/React__default["default"].createElement(RequiredText, null, requiredText), /*#__PURE__*/React__default["default"].createElement(SubLabelClickable, null, /*#__PURE__*/React__default["default"].createElement("span", null, subLabel)));
+});
+var theme$1 = styled.createTheme(styled__default["default"]);
+var Label = styled__default["default"].label(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+  return [o.typography(14).bold, o.font.text1];
+}));
+var RequiredText = styled__default["default"].span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+  return [o.typography(14), o.font.text3];
+}));
+var SubLabelClickable = styled__default["default"].div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+  return [o.typography(14), o.font.text3.hover.press, o.outline["default"].focus];
+}));
+var FieldLabelWrapper = styled__default["default"].div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n\n  > ", " {\n    ", "\n  }\n\n  > ", " {\n    ", "\n  }\n"])), RequiredText, theme$1(function (o) {
+  return o.margin.left(4);
+}), SubLabelClickable, theme$1(function (o) {
+  return o.margin.left('auto');
+}));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+
+var _excluded$1 = ["onChange"],
+    _excluded2 = ["onChange"];
+var theme = styled.createTheme(styled__default["default"]);
+
+function mergeRefs() {
+  var _arguments = arguments;
+  return function (value) {
+    for (var _iterator = _createForOfIteratorHelperLoose([].slice.call(_arguments)), _step; !(_step = _iterator()).done;) {
+      var ref = _step.value;
+
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref !== null) {
+        ref.current = value;
+      }
+    }
+  };
+}
+
+function countCodePointsInString(string) {
+  // [...string] とするとproduction buildで動かなくなる
+  // cf. https://twitter.com/f_subal/status/1497214727511891972
+  return Array.from(string).length;
+}
+
+var TextField = React__default["default"].forwardRef(function TextField(props, ref) {
+  return props.multiline !== undefined && props.multiline ? /*#__PURE__*/React__default["default"].createElement(MultiLineTextField, _extends({
+    ref: ref
+  }, props)) : /*#__PURE__*/React__default["default"].createElement(SingleLineTextField, _extends({
+    ref: ref
+  }, props));
+});
+var SingleLineTextField = React__default["default"].forwardRef(function SingleLineTextFieldInner(_ref, forwardRef) {
+  var _props$value;
+
+  var onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  var className = props.className,
+      _props$showLabel = props.showLabel,
+      showLabel = _props$showLabel === void 0 ? false : _props$showLabel,
+      _props$showCount = props.showCount,
+      showCount = _props$showCount === void 0 ? false : _props$showCount,
+      label = props.label,
+      requiredText = props.requiredText,
+      subLabel = props.subLabel,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      required = props.required,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      assistiveText = props.assistiveText,
+      maxLength = props.maxLength,
+      _props$prefix = props.prefix,
+      prefix = _props$prefix === void 0 ? null : _props$prefix,
+      _props$suffix = props.suffix,
+      suffix = _props$suffix === void 0 ? null : _props$suffix;
+
+  var _useVisuallyHidden = visuallyHidden.useVisuallyHidden(),
+      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+
+  var ariaRef = React.useRef(null);
+  var prefixRef = React.useRef(null);
+  var suffixRef = React.useRef(null);
+
+  var _useState = React.useState(countCodePointsInString((_props$value = props.value) != null ? _props$value : '')),
+      count = _useState[0],
+      setCount = _useState[1];
+
+  var _useState2 = React.useState(0),
+      prefixWidth = _useState2[0],
+      setPrefixWidth = _useState2[1];
+
+  var _useState3 = React.useState(0),
+      suffixWidth = _useState3[0],
+      setSuffixWidth = _useState3[1];
+
+  var nonControlled = props.value === undefined;
+  var handleChange = React.useCallback(function (value) {
+    var count = countCodePointsInString(value);
+
+    if (maxLength !== undefined && count > maxLength) {
+      return;
+    }
+
+    if (nonControlled) {
+      setCount(count);
+    }
+
+    onChange == null ? void 0 : onChange(value);
+  }, [maxLength, nonControlled, onChange]);
+  React.useEffect(function () {
+    var _props$value2;
+
+    setCount(countCodePointsInString((_props$value2 = props.value) != null ? _props$value2 : ''));
+  }, [props.value]);
+
+  var _useTextField = textfield.useTextField(_extends({
+    inputElementType: 'input',
+    isDisabled: disabled,
+    isRequired: required,
+    validationState: invalid ? 'invalid' : 'valid',
+    description: !invalid && assistiveText,
+    errorMessage: invalid && assistiveText,
+    onChange: handleChange
+  }, props), ariaRef),
+      inputProps = _useTextField.inputProps,
+      labelProps = _useTextField.labelProps,
+      descriptionProps = _useTextField.descriptionProps,
+      errorMessageProps = _useTextField.errorMessageProps;
+
+  React.useEffect(function () {
+    var prefixObserver = new ResizeObserver(function (entries) {
+      setPrefixWidth(entries[0].contentRect.width);
+    });
+    var suffixObserver = new ResizeObserver(function (entries) {
+      setSuffixWidth(entries[0].contentRect.width);
+    });
+
+    if (prefixRef.current !== null) {
+      prefixObserver.observe(prefixRef.current);
+    }
+
+    if (suffixRef.current !== null) {
+      suffixObserver.observe(suffixRef.current);
+    }
+
+    return function () {
+      suffixObserver.disconnect();
+      prefixObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(TextFieldRoot, {
+    className: className,
+    isDisabled: disabled
+  }, /*#__PURE__*/React__default["default"].createElement(TextFieldLabel, _extends({
+    label: label,
+    requiredText: requiredText,
+    required: required,
+    subLabel: subLabel
+  }, labelProps, !showLabel ? visuallyHiddenProps : {})), /*#__PURE__*/React__default["default"].createElement(StyledInputContainer, null, /*#__PURE__*/React__default["default"].createElement(PrefixContainer, {
+    ref: prefixRef
+  }, /*#__PURE__*/React__default["default"].createElement(Affix, null, prefix)), /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
+    ref: mergeRefs(forwardRef, ariaRef),
+    invalid: invalid,
+    extraLeftPadding: prefixWidth,
+    extraRightPadding: suffixWidth
+  }, inputProps)), /*#__PURE__*/React__default["default"].createElement(SuffixContainer, {
+    ref: suffixRef
+  }, /*#__PURE__*/React__default["default"].createElement(Affix, null, suffix), showCount && /*#__PURE__*/React__default["default"].createElement(SingleLineCounter, null, maxLength !== undefined ? count + "/" + maxLength : count))), assistiveText != null && assistiveText.length !== 0 && /*#__PURE__*/React__default["default"].createElement(AssistiveText, _extends({
+    invalid: invalid
+  }, invalid ? errorMessageProps : descriptionProps), assistiveText));
+});
+var MultiLineTextField = React__default["default"].forwardRef(function MultiLineTextFieldInner(_ref2, forwardRef) {
+  var _props$value3;
+
+  var onChange = _ref2.onChange,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  var className = props.className,
+      _props$showCount2 = props.showCount,
+      showCount = _props$showCount2 === void 0 ? false : _props$showCount2,
+      _props$showLabel2 = props.showLabel,
+      showLabel = _props$showLabel2 === void 0 ? false : _props$showLabel2,
+      label = props.label,
+      requiredText = props.requiredText,
+      subLabel = props.subLabel,
+      _props$disabled2 = props.disabled,
+      disabled = _props$disabled2 === void 0 ? false : _props$disabled2,
+      required = props.required,
+      _props$invalid2 = props.invalid,
+      invalid = _props$invalid2 === void 0 ? false : _props$invalid2,
+      assistiveText = props.assistiveText,
+      maxLength = props.maxLength,
+      _props$autoHeight = props.autoHeight,
+      autoHeight = _props$autoHeight === void 0 ? false : _props$autoHeight,
+      _props$rows = props.rows,
+      initialRows = _props$rows === void 0 ? 4 : _props$rows;
+
+  var _useVisuallyHidden2 = visuallyHidden.useVisuallyHidden(),
+      visuallyHiddenProps = _useVisuallyHidden2.visuallyHiddenProps;
+
+  var textareaRef = React.useRef(null);
+  var ariaRef = React.useRef(null);
+
+  var _useState4 = React.useState(countCodePointsInString((_props$value3 = props.value) != null ? _props$value3 : '')),
+      count = _useState4[0],
+      setCount = _useState4[1];
+
+  var _useState5 = React.useState(initialRows),
+      rows = _useState5[0],
+      setRows = _useState5[1];
+
+  var syncHeight = React.useCallback(function (textarea) {
+    var _$match$length, _$match;
+
+    var rows = (_$match$length = (_$match = (textarea.value + "\n").match(/\n/g)) == null ? void 0 : _$match.length) != null ? _$match$length : 1;
+
+    if (initialRows <= rows) {
+      setRows(rows);
+    }
+  }, [initialRows]);
+  var nonControlled = props.value === undefined;
+  var handleChange = React.useCallback(function (value) {
+    var count = countCodePointsInString(value);
+
+    if (maxLength !== undefined && count > maxLength) {
+      return;
+    }
+
+    if (nonControlled) {
+      setCount(count);
+    }
+
+    if (autoHeight && textareaRef.current !== null) {
+      syncHeight(textareaRef.current);
+    }
+
+    onChange == null ? void 0 : onChange(value);
+  }, [autoHeight, maxLength, nonControlled, onChange, syncHeight]);
+  React.useEffect(function () {
+    var _props$value4;
+
+    setCount(countCodePointsInString((_props$value4 = props.value) != null ? _props$value4 : ''));
+  }, [props.value]);
+
+  var _useTextField2 = textfield.useTextField(_extends({
+    inputElementType: 'textarea',
+    isDisabled: disabled,
+    isRequired: required,
+    validationState: invalid ? 'invalid' : 'valid',
+    description: !invalid && assistiveText,
+    errorMessage: invalid && assistiveText,
+    onChange: handleChange
+  }, props), ariaRef),
+      inputProps = _useTextField2.inputProps,
+      labelProps = _useTextField2.labelProps,
+      descriptionProps = _useTextField2.descriptionProps,
+      errorMessageProps = _useTextField2.errorMessageProps;
+
+  React.useEffect(function () {
+    if (autoHeight && textareaRef.current !== null) {
+      syncHeight(textareaRef.current);
+    }
+  }, [autoHeight, syncHeight]);
+  return /*#__PURE__*/React__default["default"].createElement(TextFieldRoot, {
+    className: className,
+    isDisabled: disabled
+  }, /*#__PURE__*/React__default["default"].createElement(TextFieldLabel, _extends({
+    label: label,
+    requiredText: requiredText,
+    required: required,
+    subLabel: subLabel
+  }, labelProps, !showLabel ? visuallyHiddenProps : {})), /*#__PURE__*/React__default["default"].createElement(StyledTextareaContainer, {
+    invalid: invalid,
+    rows: showCount ? rows + 1 : rows
+  }, /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({
+    ref: mergeRefs(textareaRef, forwardRef, ariaRef),
+    rows: rows,
+    noBottomPadding: showCount
+  }, inputProps)), showCount && /*#__PURE__*/React__default["default"].createElement(MultiLineCounter, null, maxLength !== undefined ? count + "/" + maxLength : count)), assistiveText != null && assistiveText.length !== 0 && /*#__PURE__*/React__default["default"].createElement(AssistiveText, _extends({
+    invalid: invalid
+  }, invalid ? errorMessageProps : descriptionProps), assistiveText));
+});
+var TextFieldRoot = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (p) {
+  return p.isDisabled && {
+    opacity: p.theme.elementEffect.disabled.opacity
+  };
+});
+var TextFieldLabel = styled__default["default"](FieldLabel)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme(function (o) {
+  return o.margin.bottom(8);
+}));
+var StyledInputContainer = styled__default["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"])));
+var PrefixContainer = styled__default["default"].span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n"])));
+var SuffixContainer = styled__default["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\n  display: flex;\n  gap: 8px;\n"])));
+var Affix = styled__default["default"].span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  ", "\n"])), theme(function (o) {
+  return [o.typography(14).preserveHalfLeading, o.font.text2];
+}));
+var StyledInput = styled__default["default"].input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: calc((8px + ", "px) / 0.875);\n  padding-right: calc((8px + ", "px) / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n"])), function (p) {
+  return p.extraLeftPadding;
+}, function (p) {
+  return p.extraRightPadding;
+}, function (p) {
+  return theme(function (o) {
+    return [o.bg.surface3.hover, o.outline["default"].focus, p.invalid && o.outline.assertive, o.font.text2];
+  });
+}, theme(function (o) {
+  return o.font.text3;
+}));
+var StyledTextareaContainer = styled__default["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  padding: 0 8px;\n\n  ", "\n\n  &:focus-within {\n    ", "\n  }\n\n  ", ";\n"])), function (p) {
+  return theme(function (o) {
+    return [o.bg.surface3.hover, p.invalid && o.outline.assertive, o.font.text2, o.borderRadius(4)];
+  });
+}, function (p) {
+  return theme(function (o) {
+    return p.invalid ? o.outline.assertive : o.outline["default"];
+  });
+}, function (_ref3) {
+  var rows = _ref3.rows;
+  return styled$1.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n    height: calc(22px * ", " + 18px);\n  "])), rows);
+});
+var StyledTextarea = styled__default["default"].textarea(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  resize: none;\n  font-family: inherit;\n  color: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) 0 ", ";\n\n  ", ";\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  background: none;\n\n  &::placeholder {\n    ", "\n  }\n\n  /* Hide scrollbar for Chrome, Safari and Opera */\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  /* Hide scrollbar for IE, Edge and Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n"])), function (p) {
+  return p.noBottomPadding ? 0 : '';
+}, function (_ref4) {
+  var _ref4$rows = _ref4.rows,
+      rows = _ref4$rows === void 0 ? 1 : _ref4$rows;
+  return styled$1.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n    height: calc(22px / 0.875 * ", ");\n  "])), rows);
+}, theme(function (o) {
+  return o.font.text3;
+}));
+var SingleLineCounter = styled__default["default"].span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme(function (o) {
+  return [o.typography(14).preserveHalfLeading, o.font.text3];
+}));
+var MultiLineCounter = styled__default["default"].span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  ", "\n"])), theme(function (o) {
+  return [o.typography(14).preserveHalfLeading, o.font.text3];
+}));
+var AssistiveText = styled__default["default"].p(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (p) {
+  return theme(function (o) {
+    return [o.typography(14), o.margin.top(8), o.margin.bottom(0), o.font[p.invalid ? 'assertive' : 'text1']];
+  });
+});
+
+var _excluded = ["name", "scale", "unsafeNonGuidelineScale", "className"];
+var Icon = React__default["default"].forwardRef(function IconInner(_ref, ref) {
+  var name = _ref.name,
+      scale = _ref.scale,
+      unsafeNonGuidelineScale = _ref.unsafeNonGuidelineScale,
+      className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement("pixiv-icon", _extends({
+    ref: ref,
+    name: name,
+    scale: scale,
+    "unsafe-non-guideline-scale": unsafeNonGuidelineScale,
+    "class": className
+  }, rest));
+});
+
+Object.defineProperty(exports, 'SSRProvider', {
+  enumerable: true,
+  get: function () { return ssr.SSRProvider; }
+});
+exports.Button = Button;
+exports.Clickable = Clickable;
+exports.ComponentAbstraction = ComponentAbstraction;
+exports.Icon = Icon;
+exports.IconButton = IconButton;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.Select = Select;
+exports.SelectGroup = SelectGroup;
+exports.Switch = SwitchCheckbox;
+exports.TextField = TextField;
+exports.useComponentAbstraction = useComponentAbstraction;
 //# sourceMappingURL=index.cjs.map