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

package/dist/index.module.js

@@ -1,2 +1,1040 @@
-import n,{useContext as e,useCallback as r,createContext as t,useMemo as a,useRef as i,useState as o,useEffect as l}from"react";import c,{css as u}from"styled-components";import{createTheme as s}from"@charcoal-ui/styled";import{disabledSelector as d,px as f}from"@charcoal-ui/utils";import p from"warning";import{useSwitch as h}from"@react-aria/switch";import{useToggleState as v}from"react-stately";import{useTextField as g}from"@react-aria/textfield";import{useVisuallyHidden as b}from"@react-aria/visually-hidden";import"@charcoal-ui/icons";function m(){return m=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},m.apply(this,arguments)}function x(n,e){if(null==n)return{};var r,t,a={},i=Object.keys(n);for(t=0;t<i.length;t++)e.indexOf(r=i[t])>=0||(a[r]=n[r]);return a}function y(n,e){return e||(e=n.slice(0)),n.raw=e,n}function w(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=new Array(e);r<e;r++)t[r]=n[r];return t}function E(n,e){var r="undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(r)return(r=r.call(n)).next.bind(r);if(Array.isArray(n)||(r=function(n,e){if(n){if("string"==typeof n)return w(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?w(n,e):void 0}}(n))||e&&n&&"number"==typeof n.length){r&&(n=r);var t=0;return function(){return t>=n.length?{done:!0}:{done:!1,value:n[t++]}}}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 k=["to","children"],C={Link:n.forwardRef(function(e,r){var t=e.to,a=e.children,i=x(e,k);/*#__PURE__*/return n.createElement("a",m({href:t,ref:r},i),a)})},R=n.createContext(C);function S(e){var r=e.children;/*#__PURE__*/return n.createElement(R.Provider,{value:m({},C,e.components)},r)}function P(){return e(R)}var z,L,N,O,T,q,D,M,H,j=s(c),A=["onClick","disabled"],I=n.forwardRef(function(e,r){var t=P().Link;if("to"in e){var a=e.onClick,i=e.disabled,o=void 0!==i&&i,l=x(e,A);/*#__PURE__*/return n.createElement(B,m({},l,{as:o?void 0:t,onClick:o?void 0:a,"aria-disabled":o,ref:r}))}/*#__PURE__*/return n.createElement(F,m({},e,{ref:r}))}),G=u(z||(z=y(["\n  /* Clickable style */\n  cursor: pointer;\n\n  "," {\n    cursor: default;\n  }\n"])),d),F=c.button(L||(L=y(["\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"])),G),B=c.span(N||(N=y(["\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"])),G),X=["children","variant","size","fixed","disabled"],Y=n.forwardRef(function(e,r){var t=e.children,a=e.variant,i=void 0===a?"Default":a,o=e.size,l=void 0===o?"M":o,c=e.fixed,u=void 0!==c&&c,s=e.disabled,d=void 0!==s&&s,f=x(e,X);/*#__PURE__*/return n.createElement(J,m({},f,{disabled:d,variant:i,size:l,fixed:u,ref:r}),t)}),J=c(I).withConfig({shouldForwardProp:function(n){return"fixed"!==n}}).attrs(function(n){return m({},n,function(n){switch(n){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(n){throw new Error(0===arguments.length?"unreachable":"unreachable ("+JSON.stringify(n)+")")}(n)}}(n.variant),function(n){switch(n){case"S":return{height:32,padding:16};case"M":return{height:40,padding:24}}}(n.size))})(O||(O=y(["\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(n){return n.fixed?"stretch":"min-content"},function(n){return j(function(e){return[e.font[n.font].hover.press,e.bg[n.background].hover.press,e.typography(14).bold.preserveHalfLeading,e.padding.horizontal(n.padding),e.disabled,e.borderRadius("oval"),e.outline.default.focus]})},function(n){return n.height}),U=["variant","size","icon"],$=n.forwardRef(function(e,r){var t=e.variant,a=void 0===t?"Default":t,i=e.size,o=void 0===i?"M":i,l=e.icon,c=x(e,U);return function(n,e){var r;switch(n){case"XS":r="16";break;case"S":case"M":r="24"}var t=/^[0-9]*/.exec(e);if(null==t)throw new Error("Invalid icon name");var a=t[0];a!==r&&console.warn('IconButton with size "'+n+'" expect icon size "'+r+', but got "'+a+'"')}(o,l),/*#__PURE__*/n.createElement(K,m({},c,{ref:r,variant:a,size:o}),/*#__PURE__*/n.createElement("pixiv-icon",{name:l}))}),K=c(I).attrs(function(n){return m({},n,function(n){switch(n){case"Default":return{font:"text3",background:"transparent"};case"Overlay":return{font:"text5",background:"surface4"}}}(n.variant),function(n){switch(n){case"XS":return{width:20,height:20};case"S":return{width:32,height:32};case"M":return{width:40,height:40}}}(n.size))})(T||(T=y(["\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(n){return n.width},function(n){return n.height},function(n){var e=n.font,r=n.background;return j(function(n){return[n.font[e],n.bg[r].hover.press,n.disabled,n.borderRadius("oval"),n.outline.default.focus]})});function Q(t){var a=t.value,i=t.forceChecked,o=void 0!==i&&i,l=t.disabled,c=void 0!==l&&l,u=t.children,s=e(nn),d=s.name,f=s.selected,h=s.disabled,v=s.readonly,g=s.hasError,b=s.onChange;p(void 0!==d,'"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?');var m=a===f,x=c||h,y=v&&!m,w=r(function(n){b(n.currentTarget.value)},[b]);/*#__PURE__*/return n.createElement(V,{"aria-disabled":x||y},/*#__PURE__*/n.createElement(W,{name:d,value:a,checked:o||m,hasError:g,onChange:w,disabled:x||y}),null!=u&&/*#__PURE__*/n.createElement(Z,null,u))}var V=c.label(q||(q=y(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: ",";\n  align-items: center;\n  cursor: pointer;\n\n  ","\n"])),function(n){return f(n.theme.spacing[4])},j(function(n){return[n.disabled]})),W=c.input.attrs({type:"radio"})(D||(D=y(["\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(n){var e=n.hasError,r=void 0!==e&&e;return j(function(n){return[n.borderRadius("oval"),n.bg.text5.hover.press,r&&n.outline.assertive]})},function(n){return n.theme.color.text4},j(function(n){return n.bg.brand.hover.press}),j(function(n){return[n.bg.text5.hover.press,n.borderRadius("oval")]}),j(function(n){return n.outline.default.focus})),Z=c.div(M||(M=y(["\n  ","\n"])),j(function(n){return[n.typography(14)]})),_=c.div(H||(H=y(["\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: ",";\n"])),function(n){return f(n.theme.spacing[8])}),nn=n.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> ?")}});function en(e){var t=e.className,a=e.value,i=e.label,o=e.name,l=e.onChange,c=e.disabled,u=e.readonly,s=e.hasError,d=e.children,f=r(function(n){l(n)},[l]);/*#__PURE__*/return n.createElement(nn.Provider,{value:{name:o,selected:a,disabled:null!=c&&c,readonly:null!=u&&u,hasError:null!=s&&s,onChange:f}},/*#__PURE__*/n.createElement(_,{role:"radiogroup","aria-orientation":"vertical","aria-label":i,"aria-invalid":s,className:t},d))}var rn,tn,an,on,ln,cn=t({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 />` ?")}});function un(t){var a=t.value,i=t.forceChecked,o=void 0!==i&&i,l=t.disabled,c=void 0!==l&&l,u=t.onChange,s=t.variant,d=void 0===s?"default":s,f=t.children,h=e(cn),v=h.name,g=h.selected,b=h.disabled,m=h.readonly,x=h.hasError,y=h.onChange;p(void 0!==v,'"name" is not Provided for <Select>. Perhaps you forgot to wrap with <SelectGroup> ?');var w=g.includes(a)||o,E=c||b||m,k=r(function(n){n.currentTarget instanceof HTMLInputElement&&(u&&u({value:a,selected:n.currentTarget.checked}),y({value:a,selected:n.currentTarget.checked}))},[u,y,a]);/*#__PURE__*/return n.createElement(pn,{"aria-disabled":E},/*#__PURE__*/n.createElement(vn,{name:v,value:a,hasError:x,checked:w,disabled:E,onChange:k,overlay:"overlay"===d,"aria-invalid":x}),/*#__PURE__*/n.createElement(gn,{overlay:"overlay"===d,hasError:x,"aria-hidden":!0},/*#__PURE__*/n.createElement("pixiv-icon",{name:"24/Check","unsafe-non-guideline-scale":16/24})),Boolean(f)&&/*#__PURE__*/n.createElement(hn,null,f))}var sn,dn,fn,pn=c.label(rn||(rn=y(["\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"])),d,function(n){return f(n.theme.spacing[4])},j(function(n){return n.disabled})),hn=c.div(tn||(tn=y(["\n  display: flex;\n  align-items: center;\n  ","\n"])),j(function(n){return[n.typography(14),n.font.text1]})),vn=c.input.attrs({type:"checkbox"})(an||(an=y(["\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"])),j(function(n){return n.bg.brand.hover.press}),function(n){var e=n.hasError,r=n.overlay;return j(function(n){return[n.bg.text3.hover.press,n.borderRadius("oval"),e&&!r&&n.outline.assertive,r&&n.bg.surface4]})}),gn=c.div(on||(on=y(["\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(n){var e=n.hasError,r=n.overlay;return j(function(n){return[n.width.px(24),n.height.px(24),n.borderRadius("oval"),n.font.text5,e&&r&&n.outline.assertive]})},function(n){return n.overlay&&u(ln||(ln=y(["\n      border-color: ",";\n      border-width: 2px;\n      border-style: solid;\n    "])),function(n){return n.theme.color.text5})});function bn(e){var t=e.className,a=e.name,i=e.ariaLabel,o=e.selected,l=e.onChange,c=e.disabled,u=void 0!==c&&c,s=e.readonly,d=void 0!==s&&s,f=e.hasError,p=void 0!==f&&f,h=e.children,v=r(function(n){var e=o.indexOf(n.value);n.selected?e<0&&l([].concat(o,[n.value])):e>=0&&l([].concat(o.slice(0,e),o.slice(e+1)))},[l,o]);/*#__PURE__*/return n.createElement(cn.Provider,{value:{name:a,selected:Array.from(new Set(o)),disabled:u,readonly:d,hasError:p,onChange:v}},/*#__PURE__*/n.createElement("div",{className:t,"aria-label":i,"data-testid":"SelectGroup"},h))}var mn=["className","type"];function xn(e){var r=e.disabled,t=e.className,o=a(function(){return m({},e,{"aria-label":"children"in e?void 0:e.label,isDisabled:e.disabled,isSelected:e.checked})},[e]),l=v(o),c=i(null),u=x(h(o,l,c).inputProps,mn);/*#__PURE__*/return n.createElement(An,{className:t,"aria-disabled":r},/*#__PURE__*/n.createElement(Gn,m({},u,{ref:c})),"children"in e?/*#__PURE__*/n.createElement(In,null,e.children):void 0)}var yn,wn,En,kn,Cn,Rn,Sn,Pn,zn,Ln,Nn,On,Tn,qn,Dn,Mn,Hn,jn,An=c.label(sn||(sn=y(["\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(n){return f(n.theme.spacing[4])},j(function(n){return n.disabled}),d),In=c.div(dn||(dn=y(["\n  ","\n"])),j(function(n){return n.typography(14)})),Gn=c.input.attrs({type:"checkbox"})(fn||(fn=y(["\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"])),j(function(n){return[n.borderRadius(16),n.height.px(16),n.bg.text4.hover.press,n.outline.default.focus]}),j(function(n){return[n.bg.text5.hover.press,n.borderRadius("oval")]}),j(function(n){return n.bg.brand.hover.press})),Fn=["style","className","label","required","requiredText","subLabel"],Bn=n.forwardRef(function(e,r){var t=e.style,a=e.className,i=e.label,o=e.required,l=void 0!==o&&o,c=e.requiredText,u=e.subLabel,s=x(e,Fn);/*#__PURE__*/return n.createElement($n,{style:t,className:a},/*#__PURE__*/n.createElement(Yn,m({ref:r},s),i),l&&/*#__PURE__*/n.createElement(Jn,null,c),/*#__PURE__*/n.createElement(Un,null,/*#__PURE__*/n.createElement("span",null,u)))}),Xn=s(c),Yn=c.label(yn||(yn=y(["\n  ","\n"])),Xn(function(n){return[n.typography(14).bold,n.font.text1]})),Jn=c.span(wn||(wn=y(["\n  ","\n"])),Xn(function(n){return[n.typography(14),n.font.text3]})),Un=c.div(En||(En=y(["\n  ","\n"])),Xn(function(n){return[n.typography(14),n.font.text3.hover.press,n.outline.default.focus]})),$n=c.div(kn||(kn=y(["\n  display: inline-flex;\n  align-items: center;\n\n  > "," {\n    ","\n  }\n\n  > "," {\n    ","\n  }\n"])),Jn,Xn(function(n){return n.margin.left(4)}),Un,Xn(function(n){return n.margin.left("auto")})),Kn=["onChange"],Qn=["onChange"],Vn=s(c);function Wn(){var n=arguments;return function(e){for(var r,t=E([].slice.call(n));!(r=t()).done;){var a=r.value;"function"==typeof a?a(e):null!==a&&(a.current=e)}}}function Zn(n){return Array.from(n).length}var _n=n.forwardRef(function(e,r){/*#__PURE__*/return n.createElement(void 0!==e.multiline&&e.multiline?ee:ne,m({ref:r},e))}),ne=n.forwardRef(function(e,t){var a,c=e.onChange,u=x(e,Kn),s=u.className,d=u.showLabel,f=void 0!==d&&d,p=u.showCount,h=void 0!==p&&p,v=u.label,y=u.requiredText,w=u.subLabel,E=u.disabled,k=void 0!==E&&E,C=u.required,R=u.invalid,S=void 0!==R&&R,P=u.assistiveText,z=u.maxLength,L=u.prefix,N=void 0===L?null:L,O=u.suffix,T=void 0===O?null:O,q=b().visuallyHiddenProps,D=i(null),M=i(null),H=i(null),j=o(Zn(null!=(a=u.value)?a:"")),A=j[0],I=j[1],G=o(0),F=G[0],B=G[1],X=o(0),Y=X[0],J=X[1],U=void 0===u.value,$=r(function(n){var e=Zn(n);void 0!==z&&e>z||(U&&I(e),null==c||c(n))},[z,U,c]);l(function(){var n;I(Zn(null!=(n=u.value)?n:""))},[u.value]);var K=g(m({inputElementType:"input",isDisabled:k,isRequired:C,validationState:S?"invalid":"valid",description:!S&&P,errorMessage:S&&P,onChange:$},u),D),Q=K.inputProps,V=K.labelProps,W=K.descriptionProps,Z=K.errorMessageProps;return l(function(){var n=new ResizeObserver(function(n){B(n[0].contentRect.width)}),e=new ResizeObserver(function(n){J(n[0].contentRect.width)});return null!==M.current&&n.observe(M.current),null!==H.current&&e.observe(H.current),function(){e.disconnect(),n.disconnect()}},[]),/*#__PURE__*/n.createElement(re,{className:s,isDisabled:k},/*#__PURE__*/n.createElement(te,m({label:v,requiredText:y,required:C,subLabel:w},V,f?{}:q)),/*#__PURE__*/n.createElement(ae,null,/*#__PURE__*/n.createElement(ie,{ref:M},/*#__PURE__*/n.createElement(le,null,N)),/*#__PURE__*/n.createElement(ce,m({ref:Wn(t,D),invalid:S,extraLeftPadding:F,extraRightPadding:Y},Q)),/*#__PURE__*/n.createElement(oe,{ref:H},/*#__PURE__*/n.createElement(le,null,T),h&&/*#__PURE__*/n.createElement(de,null,void 0!==z?A+"/"+z:A))),null!=P&&0!==P.length&&/*#__PURE__*/n.createElement(pe,m({invalid:S},S?Z:W),P))}),ee=n.forwardRef(function(e,t){var a,c=e.onChange,u=x(e,Qn),s=u.className,d=u.showCount,f=void 0!==d&&d,p=u.showLabel,h=void 0!==p&&p,v=u.label,y=u.requiredText,w=u.subLabel,E=u.disabled,k=void 0!==E&&E,C=u.required,R=u.invalid,S=void 0!==R&&R,P=u.assistiveText,z=u.maxLength,L=u.autoHeight,N=void 0!==L&&L,O=u.rows,T=void 0===O?4:O,q=b().visuallyHiddenProps,D=i(null),M=i(null),H=o(Zn(null!=(a=u.value)?a:"")),j=H[0],A=H[1],I=o(T),G=I[0],F=I[1],B=r(function(n){var e,r,t=null!=(e=null==(r=(n.value+"\n").match(/\n/g))?void 0:r.length)?e:1;T<=t&&F(t)},[T]),X=void 0===u.value,Y=r(function(n){var e=Zn(n);void 0!==z&&e>z||(X&&A(e),N&&null!==D.current&&B(D.current),null==c||c(n))},[N,z,X,c,B]);l(function(){var n;A(Zn(null!=(n=u.value)?n:""))},[u.value]);var J=g(m({inputElementType:"textarea",isDisabled:k,isRequired:C,validationState:S?"invalid":"valid",description:!S&&P,errorMessage:S&&P,onChange:Y},u),M),U=J.inputProps,$=J.labelProps,K=J.descriptionProps,Q=J.errorMessageProps;return l(function(){N&&null!==D.current&&B(D.current)},[N,B]),/*#__PURE__*/n.createElement(re,{className:s,isDisabled:k},/*#__PURE__*/n.createElement(te,m({label:v,requiredText:y,required:C,subLabel:w},$,h?{}:q)),/*#__PURE__*/n.createElement(ue,{invalid:S,rows:f?G+1:G},/*#__PURE__*/n.createElement(se,m({ref:Wn(D,t,M),rows:G,noBottomPadding:f},U)),f&&/*#__PURE__*/n.createElement(fe,null,void 0!==z?j+"/"+z:j)),null!=P&&0!==P.length&&/*#__PURE__*/n.createElement(pe,m({invalid:S},S?Q:K),P))}),re=c.div(Cn||(Cn=y(["\n  display: flex;\n  flex-direction: column;\n\n  ","\n"])),function(n){return n.isDisabled&&{opacity:n.theme.elementEffect.disabled.opacity}}),te=c(Bn)(Rn||(Rn=y(["\n  ","\n"])),Vn(function(n){return n.margin.bottom(8)})),ae=c.div(Sn||(Sn=y(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"]))),ie=c.span(Pn||(Pn=y(["\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n"]))),oe=c.span(zn||(zn=y(["\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\n  display: flex;\n  gap: 8px;\n"]))),le=c.span(Ln||(Ln=y(["\n  user-select: none;\n\n  ","\n"])),Vn(function(n){return[n.typography(14).preserveHalfLeading,n.font.text2]})),ce=c.input(Nn||(Nn=y(["\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(n){return n.extraLeftPadding},function(n){return n.extraRightPadding},function(n){return Vn(function(e){return[e.bg.surface3.hover,e.outline.default.focus,n.invalid&&e.outline.assertive,e.font.text2]})},Vn(function(n){return n.font.text3})),ue=c.div(On||(On=y(["\n  position: relative;\n  overflow: hidden;\n  padding: 0 8px;\n\n  ","\n\n  &:focus-within {\n    ","\n  }\n\n  ",";\n"])),function(n){return Vn(function(e){return[e.bg.surface3.hover,n.invalid&&e.outline.assertive,e.font.text2,e.borderRadius(4)]})},function(n){return Vn(function(e){return n.invalid?e.outline.assertive:e.outline.default})},function(n){var e=n.rows;return u(Tn||(Tn=y(["\n    height: calc(22px * "," + 18px);\n  "])),e)}),se=c.textarea(qn||(qn=y(["\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(n){return n.noBottomPadding?0:""},function(n){var e=n.rows,r=void 0===e?1:e;return u(Dn||(Dn=y(["\n    height: calc(22px / 0.875 * ",");\n  "])),r)},Vn(function(n){return n.font.text3})),de=c.span(Mn||(Mn=y(["\n  ","\n"])),Vn(function(n){return[n.typography(14).preserveHalfLeading,n.font.text3]})),fe=c.span(Hn||(Hn=y(["\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  ","\n"])),Vn(function(n){return[n.typography(14).preserveHalfLeading,n.font.text3]})),pe=c.p(jn||(jn=y(["\n  ","\n"])),function(n){return Vn(function(e){return[e.typography(14),e.margin.top(8),e.margin.bottom(0),e.font[n.invalid?"assertive":"text1"]]})}),he=["name","scale","unsafeNonGuidelineScale","className"],ve=n.forwardRef(function(e,r){var t=e.name,a=e.scale,i=e.unsafeNonGuidelineScale,o=e.className,l=x(e,he);/*#__PURE__*/return n.createElement("pixiv-icon",m({ref:r,name:t,scale:a,"unsafe-non-guideline-scale":i,class:o},l))});export{Y as Button,I as Clickable,S as ComponentAbstraction,ve as Icon,$ as IconButton,Q as Radio,en as RadioGroup,un as Select,bn as SelectGroup,xn as Switch,_n as TextField,P as useComponentAbstraction};
+import React, { useContext, useCallback, createContext, useMemo, useRef, useState, useEffect } from 'react';
+export { SSRProvider } from '@react-aria/ssr';
+import styled, { css } from 'styled-components';
+import { createTheme } from '@charcoal-ui/styled';
+import { disabledSelector, px } from '@charcoal-ui/utils';
+import warning from 'warning';
+import { useSwitch } from '@react-aria/switch';
+import { useToggleState } from 'react-stately';
+import { useTextField } from '@react-aria/textfield';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import '@charcoal-ui/icons';
+
+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.forwardRef(function DefaultLink(_ref, ref) {
+  var to = _ref.to,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: to,
+    ref: ref
+  }, rest), children);
+});
+var DefaultValue = {
+  Link: DefaultLink
+};
+var ComponentAbstractionContext = React.createContext(DefaultValue);
+function ComponentAbstraction(_ref2) {
+  var children = _ref2.children,
+      components = _ref2.components;
+  return /*#__PURE__*/React.createElement(ComponentAbstractionContext.Provider, {
+    value: _extends({}, DefaultValue, components)
+  }, children);
+}
+function useComponentAbstraction() {
+  return useContext(ComponentAbstractionContext);
+}
+
+/**
+ * 今後ポートされる予定の汎用的な関数群
+ */
+function unreachable(value) {
+  throw new Error(arguments.length === 0 ? 'unreachable' : "unreachable (" + JSON.stringify(value) + ")");
+}
+
+var theme$2 = createTheme(styled);
+
+var _templateObject$7, _templateObject2$5, _templateObject3$5;
+
+var _excluded$6 = ["onClick", "disabled"];
+var Clickable = React.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.createElement(A, _extends({}, rest, {
+      as: disabled ? undefined : Link,
+      onClick: disabled ? undefined : onClick,
+      "aria-disabled": disabled,
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(Button$1, _extends({}, props, {
+      ref: ref
+    }));
+  }
+});
+var clickableCss = css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  /* Clickable style */\n  cursor: pointer;\n\n  ", " {\n    cursor: default;\n  }\n"])), disabledSelector);
+var Button$1 = styled.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.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.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.createElement(StyledButton, _extends({}, rest, {
+    disabled: disabled,
+    variant: variant,
+    size: size,
+    fixed: fixed,
+    ref: ref
+  }), children);
+});
+var StyledButton = styled(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.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.createElement(StyledIconButton, _extends({}, rest, {
+    ref: ref,
+    variant: variant,
+    size: size
+  }), /*#__PURE__*/React.createElement("pixiv-icon", {
+    name: icon
+  }));
+});
+var StyledIconButton = styled(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 = useContext(RadioGroupContext),
+      name = _useContext.name,
+      selected = _useContext.selected,
+      isParentDisabled = _useContext.disabled,
+      readonly = _useContext.readonly,
+      hasError = _useContext.hasError,
+      onChange = _useContext.onChange;
+
+  warning( // 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 = useCallback(function (e) {
+    onChange(e.currentTarget.value);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(RadioRoot, {
+    "aria-disabled": isDisabled || isReadonly
+  }, /*#__PURE__*/React.createElement(RadioInput, {
+    name: name,
+    value: value,
+    checked: forceChecked || isSelected,
+    hasError: hasError,
+    onChange: handleChange,
+    disabled: isDisabled || isReadonly
+  }), children != null && /*#__PURE__*/React.createElement(RadioLabel, null, children));
+}
+var RadioRoot = styled.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 px(theme.spacing[4]);
+}, theme$2(function (o) {
+  return [o.disabled];
+}));
+var RadioInput = styled.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.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.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 px(theme.spacing[8]);
+});
+var RadioGroupContext = React.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 = useCallback(function (next) {
+    onChange(next);
+  }, [onChange]);
+  return /*#__PURE__*/React.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.createElement(StyledRadioGroup, {
+    role: "radiogroup",
+    "aria-orientation": "vertical",
+    "aria-label": label,
+    "aria-invalid": hasError,
+    className: className
+  }, children));
+}
+
+var SelectGroupContext = 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 = useContext(SelectGroupContext),
+      name = _useContext.name,
+      selected = _useContext.selected,
+      parentDisabled = _useContext.disabled,
+      readonly = _useContext.readonly,
+      hasError = _useContext.hasError,
+      parentOnChange = _useContext.onChange;
+
+  warning( // 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 = 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.createElement(SelectRoot, {
+    "aria-disabled": isDisabled
+  }, /*#__PURE__*/React.createElement(SelectInput, {
+    name: name,
+    value: value,
+    hasError: hasError,
+    checked: isSelected,
+    disabled: isDisabled,
+    onChange: handleChange,
+    overlay: variant === 'overlay',
+    "aria-invalid": hasError
+  }), /*#__PURE__*/React.createElement(SelectInputOverlay, {
+    overlay: variant === 'overlay',
+    hasError: hasError,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("pixiv-icon", {
+    name: "24/Check",
+    "unsafe-non-guideline-scale": 16 / 24
+  })), Boolean(children) && /*#__PURE__*/React.createElement(SelectLabel, null, children));
+}
+var SelectRoot = styled.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"])), disabledSelector, function (_ref2) {
+  var theme = _ref2.theme;
+  return px(theme.spacing[4]);
+}, theme$2(function (o) {
+  return o.disabled;
+}));
+var SelectLabel = styled.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.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.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 && 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 = 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.createElement(SelectGroupContext.Provider, {
+    value: {
+      name: name,
+      selected: Array.from(new Set(selected)),
+      disabled: disabled,
+      readonly: readonly,
+      hasError: hasError,
+      onChange: handleChange
+    }
+  }, /*#__PURE__*/React.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 = 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 = useToggleState(ariaSwitchProps);
+  var ref = useRef(null);
+
+  var _useSwitch = useSwitch(ariaSwitchProps, state, ref),
+      _useSwitch$inputProps = _useSwitch.inputProps,
+      rest = _objectWithoutPropertiesLoose(_useSwitch$inputProps, _excluded$3);
+
+  return /*#__PURE__*/React.createElement(Label$1, {
+    className: className,
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React.createElement(SwitchInput, _extends({}, rest, {
+    ref: ref
+  })), 'children' in props ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/destructuring-assignment
+  React.createElement(LabelInner, null, props.children) : undefined);
+}
+var Label$1 = styled.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 px(theme.spacing[4]);
+}, theme$2(function (o) {
+  return o.disabled;
+}), disabledSelector);
+var LabelInner = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
+  return o.typography(14);
+}));
+var SwitchInput = styled.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.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.createElement(FieldLabelWrapper, {
+    style: style,
+    className: className
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    ref: ref
+  }, labelProps), label), required && /*#__PURE__*/React.createElement(RequiredText, null, requiredText), /*#__PURE__*/React.createElement(SubLabelClickable, null, /*#__PURE__*/React.createElement("span", null, subLabel)));
+});
+var theme$1 = createTheme(styled);
+var Label = styled.label(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+  return [o.typography(14).bold, o.font.text1];
+}));
+var RequiredText = styled.span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+  return [o.typography(14), o.font.text3];
+}));
+var SubLabelClickable = styled.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.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 = createTheme(styled);
+
+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.forwardRef(function TextField(props, ref) {
+  return props.multiline !== undefined && props.multiline ? /*#__PURE__*/React.createElement(MultiLineTextField, _extends({
+    ref: ref
+  }, props)) : /*#__PURE__*/React.createElement(SingleLineTextField, _extends({
+    ref: ref
+  }, props));
+});
+var SingleLineTextField = React.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 = useVisuallyHidden(),
+      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+
+  var ariaRef = useRef(null);
+  var prefixRef = useRef(null);
+  var suffixRef = useRef(null);
+
+  var _useState = useState(countCodePointsInString((_props$value = props.value) != null ? _props$value : '')),
+      count = _useState[0],
+      setCount = _useState[1];
+
+  var _useState2 = useState(0),
+      prefixWidth = _useState2[0],
+      setPrefixWidth = _useState2[1];
+
+  var _useState3 = useState(0),
+      suffixWidth = _useState3[0],
+      setSuffixWidth = _useState3[1];
+
+  var nonControlled = props.value === undefined;
+  var handleChange = 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]);
+  useEffect(function () {
+    var _props$value2;
+
+    setCount(countCodePointsInString((_props$value2 = props.value) != null ? _props$value2 : ''));
+  }, [props.value]);
+
+  var _useTextField = 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;
+
+  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.createElement(TextFieldRoot, {
+    className: className,
+    isDisabled: disabled
+  }, /*#__PURE__*/React.createElement(TextFieldLabel, _extends({
+    label: label,
+    requiredText: requiredText,
+    required: required,
+    subLabel: subLabel
+  }, labelProps, !showLabel ? visuallyHiddenProps : {})), /*#__PURE__*/React.createElement(StyledInputContainer, null, /*#__PURE__*/React.createElement(PrefixContainer, {
+    ref: prefixRef
+  }, /*#__PURE__*/React.createElement(Affix, null, prefix)), /*#__PURE__*/React.createElement(StyledInput, _extends({
+    ref: mergeRefs(forwardRef, ariaRef),
+    invalid: invalid,
+    extraLeftPadding: prefixWidth,
+    extraRightPadding: suffixWidth
+  }, inputProps)), /*#__PURE__*/React.createElement(SuffixContainer, {
+    ref: suffixRef
+  }, /*#__PURE__*/React.createElement(Affix, null, suffix), showCount && /*#__PURE__*/React.createElement(SingleLineCounter, null, maxLength !== undefined ? count + "/" + maxLength : count))), assistiveText != null && assistiveText.length !== 0 && /*#__PURE__*/React.createElement(AssistiveText, _extends({
+    invalid: invalid
+  }, invalid ? errorMessageProps : descriptionProps), assistiveText));
+});
+var MultiLineTextField = React.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 = useVisuallyHidden(),
+      visuallyHiddenProps = _useVisuallyHidden2.visuallyHiddenProps;
+
+  var textareaRef = useRef(null);
+  var ariaRef = useRef(null);
+
+  var _useState4 = useState(countCodePointsInString((_props$value3 = props.value) != null ? _props$value3 : '')),
+      count = _useState4[0],
+      setCount = _useState4[1];
+
+  var _useState5 = useState(initialRows),
+      rows = _useState5[0],
+      setRows = _useState5[1];
+
+  var syncHeight = 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 = 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]);
+  useEffect(function () {
+    var _props$value4;
+
+    setCount(countCodePointsInString((_props$value4 = props.value) != null ? _props$value4 : ''));
+  }, [props.value]);
+
+  var _useTextField2 = 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;
+
+  useEffect(function () {
+    if (autoHeight && textareaRef.current !== null) {
+      syncHeight(textareaRef.current);
+    }
+  }, [autoHeight, syncHeight]);
+  return /*#__PURE__*/React.createElement(TextFieldRoot, {
+    className: className,
+    isDisabled: disabled
+  }, /*#__PURE__*/React.createElement(TextFieldLabel, _extends({
+    label: label,
+    requiredText: requiredText,
+    required: required,
+    subLabel: subLabel
+  }, labelProps, !showLabel ? visuallyHiddenProps : {})), /*#__PURE__*/React.createElement(StyledTextareaContainer, {
+    invalid: invalid,
+    rows: showCount ? rows + 1 : rows
+  }, /*#__PURE__*/React.createElement(StyledTextarea, _extends({
+    ref: mergeRefs(textareaRef, forwardRef, ariaRef),
+    rows: rows,
+    noBottomPadding: showCount
+  }, inputProps)), showCount && /*#__PURE__*/React.createElement(MultiLineCounter, null, maxLength !== undefined ? count + "/" + maxLength : count)), assistiveText != null && assistiveText.length !== 0 && /*#__PURE__*/React.createElement(AssistiveText, _extends({
+    invalid: invalid
+  }, invalid ? errorMessageProps : descriptionProps), assistiveText));
+});
+var TextFieldRoot = styled.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(FieldLabel)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme(function (o) {
+  return o.margin.bottom(8);
+}));
+var StyledInputContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"])));
+var PrefixContainer = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n"])));
+var SuffixContainer = styled.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.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.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.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 css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n    height: calc(22px * ", " + 18px);\n  "])), rows);
+});
+var StyledTextarea = styled.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 css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n    height: calc(22px / 0.875 * ", ");\n  "])), rows);
+}, theme(function (o) {
+  return o.font.text3;
+}));
+var SingleLineCounter = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme(function (o) {
+  return [o.typography(14).preserveHalfLeading, o.font.text3];
+}));
+var MultiLineCounter = styled.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.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.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.createElement("pixiv-icon", _extends({
+    ref: ref,
+    name: name,
+    scale: scale,
+    "unsafe-non-guideline-scale": unsafeNonGuidelineScale,
+    "class": className
+  }, rest));
+});
+
+export { Button, Clickable, ComponentAbstraction, Icon, IconButton, Radio, RadioGroup, Select, SelectGroup, SwitchCheckbox as Switch, TextField, useComponentAbstraction };
 //# sourceMappingURL=index.module.js.map