@charcoal-ui/react 1.0.0 → 2.0.0-alpha.0

package/dist/index.modern.js

@@ -1,11 +1,11 @@
-import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as i,useEffect as o}from"react";import l,{css as s}from"styled-components";import c from"@charcoal-ui/styled";import{disabledSelector as d,px as u}from"@charcoal-ui/utils";import p from"warning";import{useSwitch as f}from"@react-aria/switch";import{useToggleState as h}from"react-stately";import{useTextField as g}from"@react-aria/textfield";import{useVisuallyHidden as b}from"@react-aria/visually-hidden";function m(){return m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},m.apply(this,arguments)}function v(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t.indexOf(r=i[n])>=0||(a[r]=e[r]);return a}const x=["to","children"],y={Link:e.forwardRef(function(t,r){let{to:n,children:a}=t,i=v(t,x);/*#__PURE__*/return e.createElement("a",m({href:n,ref:r},i),a)})},w=e.createContext(y);function E({children:t,components:r}){/*#__PURE__*/return e.createElement(w.Provider,{value:m({},y,r)},t)}function $(){return t(w)}const k=c(l);let C,R,z,P=e=>e;const S=["onClick","disabled"],L=e.forwardRef(function(t,r){const{Link:n}=$();if("to"in t){const{onClick:a,disabled:i=!1}=t,o=v(t,S);/*#__PURE__*/return e.createElement(D,m({},o,{as:i?void 0:n,onClick:i?void 0:a,"aria-disabled":i,ref:r}))}/*#__PURE__*/return e.createElement(N,m({},t,{ref:r}))}),q=s(C||(C=P`
+import e,{useContext as t,useCallback as r,useMemo as n,useRef as a,useState as i,useEffect as o}from"react";import l,{css as s}from"styled-components";import c from"@charcoal-ui/styled";import{disabledSelector as d,px as u}from"@charcoal-ui/utils";import p from"warning";import{useSwitch as f}from"@react-aria/switch";import{useToggleState as h}from"react-stately";import{useTextField as g}from"@react-aria/textfield";import{useVisuallyHidden as b}from"@react-aria/visually-hidden";function m(){return m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},m.apply(this,arguments)}function x(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t.indexOf(r=i[n])>=0||(a[r]=e[r]);return a}const v=["to","children"],y={Link:e.forwardRef(function(t,r){let{to:n,children:a}=t,i=x(t,v);/*#__PURE__*/return e.createElement("a",m({href:n,ref:r},i),a)})},w=e.createContext(y);function E({children:t,components:r}){/*#__PURE__*/return e.createElement(w.Provider,{value:m({},y,r)},t)}function $(){return t(w)}const k=c(l);let R,C,P,z=e=>e;const S=["onClick","disabled"],L=e.forwardRef(function(t,r){const{Link:n}=$();if("to"in t){const{onClick:a,disabled:i=!1}=t,o=x(t,S);/*#__PURE__*/return e.createElement(N,m({},o,{as:i?void 0:n,onClick:i?void 0:a,"aria-disabled":i,ref:r}))}/*#__PURE__*/return e.createElement(q,m({},t,{ref:r}))}),O=s(R||(R=z`
   /* Clickable style */
   cursor: pointer;
 
   ${0} {
     cursor: default;
   }
-`),d),N=l.button(R||(R=P`
+`),d),q=l.button(C||(C=z`
   /* Reset button appearance */
   appearance: none;
   background: transparent;
@@ -40,7 +40,7 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
   }
 
   ${0}
-`),q),D=l.span(z||(z=P`
+`),O),N=l.span(P||(P=z`
   /* Reset a-tag appearance */
   color: inherit;
 
@@ -53,7 +53,7 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
   }
 
   ${0}
-`),q);let O;const T=["children","variant","size","fixed","disabled"],M=e.forwardRef(function(t,r){let{children:n,variant:a="Default",size:i="M",fixed:o=!1,disabled:l=!1}=t,s=v(t,T);/*#__PURE__*/return e.createElement(H,m({},s,{disabled:l,variant:a,size:i,fixed:o,ref:r}),n)}),H=l(L).withConfig({shouldForwardProp:e=>"fixed"!==e}).attrs(function(e){return m({},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))})(O||(O=(e=>e)`
+`),O);let D;const T=["children","variant","size","fixed","disabled"],M=e.forwardRef(function(t,r){let{children:n,variant:a="Default",size:i="M",fixed:o=!1,disabled:l=!1}=t,s=x(t,T);/*#__PURE__*/return e.createElement(H,m({},s,{disabled:l,variant:a,size:i,fixed:o,ref:r}),n)}),H=l(L).withConfig({shouldForwardProp:e=>"fixed"!==e}).attrs(function(e){return m({},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))})(D||(D=(e=>e)`
   width: ${0};
   display: inline-grid;
   align-items: center;
@@ -66,7 +66,7 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
 
   /* よく考えたらheight=32って定義が存在しないな... */
   height: ${0}px;
-`),e=>e.fixed?"stretch":"min-content",e=>k(t=>[t.font[e.font].hover.press,t.bg[e.background].hover.press,t.typography(14).bold.preserveHalfLeading,t.padding.horizontal(e.padding),t.disabled,t.borderRadius("oval"),t.outline.default.focus]),e=>e.height);let F;const j=["variant","size","icon"],I=e.forwardRef(function(t,r){let{variant:n="Default",size:a="M",icon:i}=t,o=v(t,j);return function(e,t){let r;switch(e){case"XS":r="16";break;case"S":case"M":r="24"}const n=/^[0-9]*/.exec(t);if(null==n)throw new Error("Invalid icon name");const[a]=n;a!==r&&console.warn(`IconButton with size "${e}" expect icon size "${r}, but got "${a}"`)}(a,i),/*#__PURE__*/e.createElement(X,m({},o,{ref:r,variant:n,size:a}),/*#__PURE__*/e.createElement("pixiv-icon",{name:i}))}),X=l(L).attrs(function(e){return m({},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))})(F||(F=(e=>e)`
+`),e=>e.fixed?"stretch":"min-content",e=>k(t=>[t.font[e.font].hover.press,t.bg[e.background].hover.press,t.typography(14).bold.preserveHalfLeading,t.padding.horizontal(e.padding),t.disabled,t.borderRadius("oval"),t.outline.default.focus]),e=>e.height);let F;const j=["variant","size","icon"],I=e.forwardRef(function(t,r){let{variant:n="Default",size:a="M",icon:i}=t,o=x(t,j);return function(e,t){let r;switch(e){case"XS":r="16";break;case"S":case"M":r="24"}const n=/^[0-9]*/.exec(t);if(null==n)throw new Error("Invalid icon name");const[a]=n;a!==r&&console.warn(`IconButton with size "${e}" expect icon size "${r}, but got "${a}"`)}(a,i),/*#__PURE__*/e.createElement(X,m({},o,{ref:r,variant:n,size:a}),/*#__PURE__*/e.createElement("pixiv-icon",{name:i}))}),X=l(L).attrs(function(e){return m({},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))})(F||(F=(e=>e)`
   user-select: none;
 
   width: ${0}px;
@@ -76,7 +76,7 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
   justify-content: center;
 
   ${0}
-`),e=>e.width,e=>e.height,({font:e,background:t})=>k(r=>[r.font[e],r.bg[t].hover.press,r.disabled,r.borderRadius("oval"),r.outline.default.focus]));let G,B,J,V,Y=e=>e;function A({value:n,forceChecked:a=!1,disabled:i=!1,children:o}){const{name:l,selected:s,disabled:c,readonly:d,hasError:u,onChange:f}=t(Z);p(void 0!==l,'"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?');const h=n===s,g=i||c,b=d&&!h,m=r(e=>{f(e.currentTarget.value)},[f]);/*#__PURE__*/return e.createElement(K,{"aria-disabled":g||b},/*#__PURE__*/e.createElement(Q,{name:l,value:n,checked:a||h,hasError:u,onChange:m,disabled:g||b}),null!=o&&/*#__PURE__*/e.createElement(U,null,o))}const K=l.label(G||(G=Y`
+`),e=>e.width,e=>e.height,({font:e,background:t})=>k(r=>[r.font[e],r.bg[t].hover.press,r.disabled,r.borderRadius("oval"),r.outline.default.focus]));let G,Y,B,J,A=e=>e;function K({value:n,forceChecked:a=!1,disabled:i=!1,children:o}){const{name:l,selected:s,disabled:c,readonly:d,hasError:u,onChange:f}=t(Z);p(void 0!==l,'"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?');const h=n===s,g=i||c,b=d&&!h,m=r(e=>{f(e.currentTarget.value)},[f]);/*#__PURE__*/return e.createElement(Q,{"aria-disabled":g||b},/*#__PURE__*/e.createElement(U,{name:l,value:n,checked:a||h,hasError:u,onChange:m,disabled:g||b}),null!=o&&/*#__PURE__*/e.createElement(V,null,o))}const Q=l.label(G||(G=A`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: ${0};
@@ -84,7 +84,7 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
   cursor: pointer;
 
   ${0}
-`),({theme:e})=>u(e.spacing[4]),k(e=>[e.disabled])),Q=l.input.attrs({type:"radio"})(B||(B=Y`
+`),({theme:e})=>u(e.spacing[4]),k(e=>[e.disabled])),U=l.input.attrs({type:"radio"})(Y||(Y=A`
   /** Make prior to browser default style */
   &[type='radio'] {
     appearance: none;
@@ -120,13 +120,13 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
 
     ${0}
   }
-`),({hasError:e=!1})=>k(t=>[t.borderRadius("oval"),t.bg.text5.hover.press,e&&t.outline.assertive]),({theme:e})=>e.color.text4,k(e=>e.bg.brand.hover.press),k(e=>[e.bg.text5.hover.press,e.borderRadius("oval")]),k(e=>e.outline.default.focus)),U=l.div(J||(J=Y`
+`),({hasError:e=!1})=>k(t=>[t.borderRadius("oval"),t.bg.text5.hover.press,e&&t.outline.assertive]),({theme:e})=>e.color.text4,k(e=>e.bg.brand.hover.press),k(e=>[e.bg.text5.hover.press,e.borderRadius("oval")]),k(e=>e.outline.default.focus)),V=l.div(B||(B=A`
   ${0}
-`),k(e=>[e.typography(14)])),W=l.div(V||(V=Y`
+`),k(e=>[e.typography(14)])),W=l.div(J||(J=A`
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: ${0};
-`),({theme:e})=>u(e.spacing[8])),Z=e.createContext({name:void 0,selected:void 0,disabled:!1,readonly:!1,hasError:!1,onChange(){throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?")}});function _({className:t,defaultValue:a,label:i,name:o,onChange:l,disabled:s,readonly:c,hasError:d,children:u}){const[p,f]=n(a),h=r(e=>{f(e),l(e)},[l]);/*#__PURE__*/return e.createElement(Z.Provider,{value:{name:o,selected:p,disabled:null!=s&&s,readonly:null!=c&&c,hasError:null!=d&&d,onChange:h}},/*#__PURE__*/e.createElement(W,{role:"radiogroup","aria-orientation":"vertical","aria-label":i,"aria-invalid":d,className:t},u))}let ee,te,re,ne=e=>e;const ae=["className","type"];function ie(t){const{disabled:r,className:n}=t,o=a(()=>m({},t,{"aria-label":"children"in t?void 0:t.label,isDisabled:t.disabled,isSelected:t.checked}),[t]),l=h(o),s=i(null),c=v(f(o,l,s).inputProps,ae);/*#__PURE__*/return e.createElement(oe,{className:n,"aria-disabled":r},/*#__PURE__*/e.createElement(se,m({},c,{ref:s})),"children"in t?/*#__PURE__*/e.createElement(le,null,t.children):void 0)}const oe=l.label(ee||(ee=ne`
+`),({theme:e})=>u(e.spacing[8])),Z=e.createContext({name:void 0,selected:void 0,disabled:!1,readonly:!1,hasError:!1,onChange(){throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?")}});function _({className:t,value:n,label:a,name:i,onChange:o,disabled:l,readonly:s,hasError:c,children:d}){const u=r(e=>{o(e)},[o]);/*#__PURE__*/return e.createElement(Z.Provider,{value:{name:i,selected:n,disabled:null!=l&&l,readonly:null!=s&&s,hasError:null!=c&&c,onChange:u}},/*#__PURE__*/e.createElement(W,{role:"radiogroup","aria-orientation":"vertical","aria-label":a,"aria-invalid":c,className:t},d))}let ee,te,re,ne=e=>e;const ae=["className","type"];function ie(t){const{disabled:r,className:i}=t,o=n(()=>m({},t,{"aria-label":"children"in t?void 0:t.label,isDisabled:t.disabled,isSelected:t.checked}),[t]),l=h(o),s=a(null),c=x(f(o,l,s).inputProps,ae);/*#__PURE__*/return e.createElement(oe,{className:i,"aria-disabled":r},/*#__PURE__*/e.createElement(se,m({},c,{ref:s})),"children"in t?/*#__PURE__*/e.createElement(le,null,t.children):void 0)}const oe=l.label(ee||(ee=ne`
   display: inline-grid;
   grid-template-columns: auto 1fr;
   gap: ${0};
@@ -173,11 +173,11 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
       }
     }
   }
-`),k(e=>[e.borderRadius(16),e.height.px(16),e.bg.text4.hover.press,e.outline.default.focus]),k(e=>[e.bg.text5.hover.press,e.borderRadius("oval")]),k(e=>e.bg.brand.hover.press));let ce,de,ue,pe,fe=e=>e;const he=["style","className","label","required","requiredText","subLabel"],ge=e.forwardRef(function(t,r){let{style:n,className:a,label:i,required:o=!1,requiredText:l,subLabel:s}=t,c=v(t,he);/*#__PURE__*/return e.createElement(ye,{style:n,className:a},/*#__PURE__*/e.createElement(me,m({ref:r},c),i),o&&/*#__PURE__*/e.createElement(ve,null,l),/*#__PURE__*/e.createElement(xe,null,/*#__PURE__*/e.createElement("span",null,s)))}),be=c(l),me=l.label(ce||(ce=fe`
+`),k(e=>[e.borderRadius(16),e.height.px(16),e.bg.text4.hover.press,e.outline.default.focus]),k(e=>[e.bg.text5.hover.press,e.borderRadius("oval")]),k(e=>e.bg.brand.hover.press));let ce,de,ue,pe,fe=e=>e;const he=["style","className","label","required","requiredText","subLabel"],ge=e.forwardRef(function(t,r){let{style:n,className:a,label:i,required:o=!1,requiredText:l,subLabel:s}=t,c=x(t,he);/*#__PURE__*/return e.createElement(ye,{style:n,className:a},/*#__PURE__*/e.createElement(me,m({ref:r},c),i),o&&/*#__PURE__*/e.createElement(xe,null,l),/*#__PURE__*/e.createElement(ve,null,/*#__PURE__*/e.createElement("span",null,s)))}),be=c(l),me=l.label(ce||(ce=fe`
   ${0}
-`),be(e=>[e.typography(14).bold,e.font.text1])),ve=l.span(de||(de=fe`
+`),be(e=>[e.typography(14).bold,e.font.text1])),xe=l.span(de||(de=fe`
   ${0}
-`),be(e=>[e.typography(14),e.font.text3])),xe=l.div(ue||(ue=fe`
+`),be(e=>[e.typography(14),e.font.text3])),ve=l.div(ue||(ue=fe`
   ${0}
 `),be(e=>[e.typography(14),e.font.text3.hover.press,e.outline.default.focus])),ye=l.div(pe||(pe=fe`
   display: inline-flex;
@@ -190,30 +190,51 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
   > ${0} {
     ${0}
   }
-`),ve,be(e=>e.margin.left(4)),xe,be(e=>e.margin.left("auto")));let we,Ee,$e,ke,Ce,Re,ze,Pe,Se,Le,qe,Ne=e=>e;const De=["onChange"],Oe=["onChange"],Te=c(l);function Me(...e){return t=>{for(const r of e)"function"==typeof r?r(t):null!==r&&(r.current=t)}}function He(e){return[...e].length}const Fe=e.forwardRef(function(t,r){/*#__PURE__*/return e.createElement(void 0!==t.multiline&&t.multiline?Ie:je,m({ref:r},t))}),je=e.forwardRef(function(t,a){var o;let{onChange:l}=t,s=v(t,De);const{className:c,showLabel:d=!1,showCount:u=!1,label:p,requiredText:f,subLabel:h,disabled:x=!1,required:y,invalid:w=!1,assistiveText:E,maxLength:$}=s,{visuallyHiddenProps:k}=b(),C=i(null),[R,z]=n(He(null!=(o=s.value)?o:"")),P=r(e=>{const t=He(e);void 0!==$&&t>$||(z(t),null==l||l(e))},[$,l]),{inputProps:S,labelProps:L,descriptionProps:q,errorMessageProps:N}=g(m({inputElementType:"input",isDisabled:x,isRequired:y,validationState:w?"invalid":"valid",description:!w&&E,errorMessage:w&&E,onChange:P},s),C);/*#__PURE__*/return e.createElement(Xe,{className:c,isDisabled:x},/*#__PURE__*/e.createElement(Ge,m({label:p,requiredText:f,required:y,subLabel:h},L,d?{}:k)),/*#__PURE__*/e.createElement(Be,null,/*#__PURE__*/e.createElement(Je,m({ref:Me(a,C),invalid:w},S)),u&&$&&/*#__PURE__*/e.createElement(Ae,null,R,"/",$)),null!=E&&0!==E.length&&/*#__PURE__*/e.createElement(Qe,m({invalid:w},w?N:q),E))}),Ie=e.forwardRef(function(t,a){var l;let{onChange:s}=t,c=v(t,Oe);const{className:d,showCount:u=!1,showLabel:p=!1,label:f,requiredText:h,subLabel:x,disabled:y=!1,required:w,invalid:E=!1,assistiveText:$,maxLength:k,autoHeight:C=!1,rows:R=4}=c,{visuallyHiddenProps:z}=b(),P=i(null),S=i(null),[L,q]=n(He(null!=(l=c.value)?l:"")),[N,D]=n(R),O=r(e=>{var t,r;const n=null!=(t=null==(r=`${e.value}\n`.match(/\n/g))?void 0:r.length)?t:1;R<=n&&D(n)},[R]),T=r(e=>{const t=He(e);void 0!==k&&t>k||(q(t),C&&null!==P.current&&O(P.current),null==s||s(e))},[C,k,s,O]),{inputProps:M,labelProps:H,descriptionProps:F,errorMessageProps:j}=g(m({inputElementType:"textarea",isDisabled:y,isRequired:w,validationState:E?"invalid":"valid",description:!E&&$,errorMessage:E&&$,onChange:T},c),S);return o(()=>{C&&null!==P.current&&O(P.current)},[C,O]),/*#__PURE__*/e.createElement(Xe,{className:d,isDisabled:y},/*#__PURE__*/e.createElement(Ge,m({label:f,requiredText:h,required:w,subLabel:x},H,p?z:{})),/*#__PURE__*/e.createElement(Ve,{rows:N},/*#__PURE__*/e.createElement(Ye,m({ref:Me(P,a,S),invalid:E,rows:N},M)),u&&/*#__PURE__*/e.createElement(Ke,null,L)),null!=$&&0!==$.length&&/*#__PURE__*/e.createElement(Qe,m({invalid:E},E?j:F),$))}),Xe=l.div(we||(we=Ne`
+`),xe,be(e=>e.margin.left(4)),ve,be(e=>e.margin.left("auto")));let we,Ee,$e,ke,Re,Ce,Pe,ze,Se,Le,Oe,qe,Ne,De,Te=e=>e;const Me=["onChange"],He=["onChange"],Fe=c(l);function je(...e){return t=>{for(const r of e)"function"==typeof r?r(t):null!==r&&(r.current=t)}}function Ie(e){return[...e].length}const Xe=e.forwardRef(function(t,r){/*#__PURE__*/return e.createElement(void 0!==t.multiline&&t.multiline?Ye:Ge,m({ref:r},t))}),Ge=e.forwardRef(function(t,n){var l;let{onChange:s}=t,c=x(t,Me);const{className:d,showLabel:u=!1,showCount:p=!1,label:f,requiredText:h,subLabel:v,disabled:y=!1,required:w,invalid:E=!1,assistiveText:$,maxLength:k,prefix:R="",suffix:C=""}=c,{visuallyHiddenProps:P}=b(),z=a(null),S=a(null),L=a(null),[O,q]=i(Ie(null!=(l=c.value)?l:"")),[N,D]=i(0),[T,M]=i(0),H=r(e=>{const t=Ie(e);void 0!==k&&t>k||(q(t),null==s||s(e))},[k,s]),{inputProps:F,labelProps:j,descriptionProps:I,errorMessageProps:X}=g(m({inputElementType:"input",isDisabled:y,isRequired:w,validationState:E?"invalid":"valid",description:!E&&$,errorMessage:E&&$,onChange:H},c),z);return o(()=>{const e=new ResizeObserver(e=>{D(e[0].contentRect.width)}),t=new ResizeObserver(e=>{M(e[0].contentRect.width)});return null!==S.current&&e.observe(S.current),null!==L.current&&t.observe(L.current),()=>{t.disconnect(),e.disconnect()}},[]),/*#__PURE__*/e.createElement(Be,{className:d,isDisabled:y},/*#__PURE__*/e.createElement(Je,m({label:f,requiredText:h,required:w,subLabel:v},j,u?{}:P)),/*#__PURE__*/e.createElement(Ae,null,/*#__PURE__*/e.createElement(Ke,{ref:S},/*#__PURE__*/e.createElement(Ue,null,R)),/*#__PURE__*/e.createElement(Ve,m({ref:je(n,z),invalid:E,extraLeftPadding:N,extraRightPadding:T},F)),/*#__PURE__*/e.createElement(Qe,{ref:L},/*#__PURE__*/e.createElement(Ue,null,C),p&&k&&/*#__PURE__*/e.createElement(_e,null,O,"/",k))),null!=$&&0!==$.length&&/*#__PURE__*/e.createElement(tt,m({invalid:E},E?X:I),$))}),Ye=e.forwardRef(function(t,n){var l;let{onChange:s}=t,c=x(t,He);const{className:d,showCount:u=!1,showLabel:p=!1,label:f,requiredText:h,subLabel:v,disabled:y=!1,required:w,invalid:E=!1,assistiveText:$,maxLength:k,autoHeight:R=!1,rows:C=4}=c,{visuallyHiddenProps:P}=b(),z=a(null),S=a(null),[L,O]=i(Ie(null!=(l=c.value)?l:"")),[q,N]=i(C),D=r(e=>{var t,r;const n=null!=(t=null==(r=`${e.value}\n`.match(/\n/g))?void 0:r.length)?t:1;C<=n&&N(n)},[C]),T=r(e=>{const t=Ie(e);void 0!==k&&t>k||(O(t),R&&null!==z.current&&D(z.current),null==s||s(e))},[R,k,s,D]),{inputProps:M,labelProps:H,descriptionProps:F,errorMessageProps:j}=g(m({inputElementType:"textarea",isDisabled:y,isRequired:w,validationState:E?"invalid":"valid",description:!E&&$,errorMessage:E&&$,onChange:T},c),S);return o(()=>{R&&null!==z.current&&D(z.current)},[R,D]),/*#__PURE__*/e.createElement(Be,{className:d,isDisabled:y},/*#__PURE__*/e.createElement(Je,m({label:f,requiredText:h,required:w,subLabel:v},H,p?P:{})),/*#__PURE__*/e.createElement(We,{rows:q},/*#__PURE__*/e.createElement(Ze,m({ref:je(z,n,S),invalid:E,rows:q},M)),u&&/*#__PURE__*/e.createElement(et,null,L)),null!=$&&0!==$.length&&/*#__PURE__*/e.createElement(tt,m({invalid:E},E?j:F),$))}),Be=l.div(we||(we=Te`
   display: flex;
   flex-direction: column;
 
   ${0}
-`),e=>e.isDisabled&&{opacity:e.theme.elementEffect.disabled.opacity}),Ge=l(ge)(Ee||(Ee=Ne`
+`),e=>e.isDisabled&&{opacity:e.theme.elementEffect.disabled.opacity}),Je=l(ge)(Ee||(Ee=Te`
   ${0}
-`),Te(e=>e.margin.bottom(8))),Be=l.div($e||($e=Ne`
+`),Fe(e=>e.margin.bottom(8))),Ae=l.div($e||($e=Te`
   height: 40px;
   display: grid;
   position: relative;
-`)),Je=l.input(ke||(ke=Ne`
+`)),Ke=l.span(ke||(ke=Te`
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  transform: translateY(-50%);
+`)),Qe=l.span(Re||(Re=Te`
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+
+  display: flex;
+  gap: 8px;
+`)),Ue=l.span(Ce||(Ce=Te`
+  user-select: none;
+
+  ${0}
+`),Fe(e=>[e.typography(14).preserveHalfLeading,e.font.text2])),Ve=l.input(Pe||(Pe=Te`
   border: none;
   box-sizing: border-box;
   outline: none;
+  font-family: inherit;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
   transform: scale(0.875);
   width: calc(100% / 0.875);
-  height: calc(40px / 0.875);
+  height: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
+  padding-top: calc(9px / 0.875);
+  padding-bottom: calc(9px / 0.875);
+  padding-left: calc((8px + ${0}px) / 0.875);
+  padding-right: calc((8px + ${0}px) / 0.875);
   border-radius: calc(4px / 0.875);
 
   /* Display box-shadow for iOS Safari */
@@ -224,18 +245,19 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
   &::placeholder {
     ${0}
   }
-`),e=>Te(t=>[t.bg.surface3.hover,t.outline.default.focus,e.invalid&&t.outline.assertive,t.font.text2]),Te(e=>e.font.text3)),Ve=l.div(Ce||(Ce=Ne`
+`),e=>e.extraLeftPadding,e=>e.extraRightPadding,e=>Fe(t=>[t.bg.surface3.hover,t.outline.default.focus,e.invalid&&t.outline.assertive,t.font.text2]),Fe(e=>e.font.text3)),We=l.div(ze||(ze=Te`
   display: grid;
   position: relative;
 
   ${0};
-`),({rows:e})=>s(Re||(Re=Ne`
+`),({rows:e})=>s(Se||(Se=Te`
     max-height: calc(22px * ${0} + 18px);
-  `),e)),Ye=l.textarea(ze||(ze=Ne`
+  `),e)),Ze=l.textarea(Le||(Le=Te`
   border: none;
   box-sizing: border-box;
   outline: none;
   resize: none;
+  font-family: inherit;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
@@ -264,22 +286,17 @@ import e,{useContext as t,useCallback as r,useState as n,useMemo as a,useRef as
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
-`),({rows:e})=>s(Pe||(Pe=Ne`
+`),({rows:e})=>s(Oe||(Oe=Te`
     height: calc(22px / 0.875 * ${0} + 18px / 0.875);
-  `),e),e=>Te(t=>[t.bg.surface3.hover,t.outline.default.focus,e.invalid&&t.outline.assertive,t.font.text2]),Te(e=>e.font.text3)),Ae=l.span(Se||(Se=Ne`
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  transform: translateY(-50%);
-
+  `),e),e=>Fe(t=>[t.bg.surface3.hover,t.outline.default.focus,e.invalid&&t.outline.assertive,t.font.text2]),Fe(e=>e.font.text3)),_e=l.span(qe||(qe=Te`
   ${0}
-`),Te(e=>[e.typography(14).preserveHalfLeading,e.font.text3])),Ke=l.span(Le||(Le=Ne`
+`),Fe(e=>[e.typography(14).preserveHalfLeading,e.font.text3])),et=l.span(Ne||(Ne=Te`
   position: absolute;
   bottom: 9px;
   right: 8px;
 
   ${0}
-`),Te(e=>[e.typography(14).preserveHalfLeading,e.font.text3])),Qe=l.p(qe||(qe=Ne`
+`),Fe(e=>[e.typography(14).preserveHalfLeading,e.font.text3])),tt=l.p(De||(De=Te`
   ${0}
-`),e=>Te(t=>[t.typography(14),t.margin.top(8),t.margin.bottom(0),t.font[e.invalid?"assertive":"text1"]]));export{M as Button,L as Clickable,E as ComponentAbstraction,I as IconButton,A as Radio,_ as RadioGroup,ie as Switch,Fe as TextField,$ as useComponentAbstraction};
+`),e=>Fe(t=>[t.typography(14),t.margin.top(8),t.margin.bottom(0),t.font[e.invalid?"assertive":"text1"]]));export{M as Button,L as Clickable,E as ComponentAbstraction,I as IconButton,K as Radio,_ as RadioGroup,ie as Switch,Xe as TextField,$ as useComponentAbstraction};
 //# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/core/ComponentAbstraction.tsx","../src/styled.ts","../src/components/Clickable/index.tsx","../src/components/Button/index.tsx","../src/_lib/index.ts","../src/components/IconButton/index.tsx","../src/components/Radio/index.tsx","../src/components/Switch/index.tsx","../src/components/FieldLabel/index.tsx","../src/components/TextField/index.tsx"],"sourcesContent":["import React, { useContext } from 'react'\n\nexport type LinkProps = {\n  /**\n   * リンクのURL\n   */\n  to: string\n} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>\n\nexport const DefaultLink = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  function DefaultLink({ to, children, ...rest }, ref) {\n    return (\n      <a href={to} ref={ref} {...rest}>\n        {children}\n      </a>\n    )\n  }\n)\n\ninterface Components {\n  Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>\n}\n\nconst DefaultValue: Components = {\n  Link: DefaultLink,\n}\n\nconst ComponentAbstractionContext = React.createContext(DefaultValue)\n\ninterface Props {\n  children: React.ReactNode\n  components: Partial<Components>\n}\n\nexport default function ComponentAbstraction({ children, components }: Props) {\n  return (\n    <ComponentAbstractionContext.Provider\n      value={{ ...DefaultValue, ...components }}\n    >\n      {children}\n    </ComponentAbstractionContext.Provider>\n  )\n}\n\nexport function useComponentAbstraction() {\n  return useContext(ComponentAbstractionContext)\n}\n","import styled from 'styled-components'\nimport createTheme from '@charcoal-ui/styled'\nexport const theme = createTheme(styled)\n","import React from 'react'\nimport styled, { css } from 'styled-components'\nimport {\n  LinkProps,\n  useComponentAbstraction,\n} from '../../core/ComponentAbstraction'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\ninterface BaseProps {\n  /**\n   * クリックの無効化\n   */\n  disabled?: boolean\n}\n\ninterface LinkBaseProps {\n  /**\n   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される\n   */\n  to: string\n}\n\nexport type ClickableProps =\n  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)\n  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n\nconst Clickable = React.forwardRef<ClickableElement, ClickableProps>(\n  function Clickable(props, ref) {\n    const { Link } = useComponentAbstraction()\n    if ('to' in props) {\n      const { onClick, disabled = false, ...rest } = props\n      return (\n        <A<typeof Link>\n          {...rest}\n          as={disabled ? undefined : Link}\n          onClick={disabled ? undefined : onClick}\n          aria-disabled={disabled}\n          ref={ref}\n        />\n      )\n    } else {\n      return <Button {...props} ref={ref} />\n    }\n  }\n)\nexport default Clickable\n\nconst clickableCss = css`\n  /* Clickable style */\n  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n`\n\nconst Button = styled.button`\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  ${clickableCss}\n`\n\nconst A = styled.span`\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  ${clickableCss}\n`\n","import React from 'react'\nimport styled from 'styled-components'\nimport { unreachable } from '../../_lib'\nimport { theme } from '../../styled'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\n\ntype Variant = 'Primary' | 'Default' | 'Overlay' | 'Danger' | 'Navigation'\ntype Size = 'S' | 'M'\n\ninterface StyledProps {\n  /**\n   * ボタンのスタイル\n   */\n  variant: Variant\n  /**\n   * ボタンのサイズ\n   */\n  size: Size\n  /**\n   * 幅を最大まで広げて描画\n   */\n  fixed: boolean\n}\n\nexport type ButtonProps = Partial<StyledProps> & ClickableProps\n\nconst Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(\n  {\n    children,\n    variant = 'Default',\n    size = 'M',\n    fixed = false,\n    disabled = false,\n    ...rest\n  },\n  ref\n) {\n  return (\n    <StyledButton\n      {...rest}\n      disabled={disabled}\n      variant={variant}\n      size={size}\n      fixed={fixed}\n      ref={ref}\n    >\n      {children}\n    </StyledButton>\n  )\n})\nexport default Button\n\nconst StyledButton = styled(Clickable)\n  .withConfig<StyledProps>({\n    shouldForwardProp(prop) {\n      // fixed は <button> 要素に渡ってはいけない\n      return prop !== 'fixed'\n    },\n  })\n  .attrs<StyledProps, ReturnType<typeof styledProps>>(styledProps)`\n  width: ${(p) => (p.fixed ? 'stretch' : 'min-content')};\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  ${(p) =>\n    theme((o) => [\n      o.font[p.font].hover.press,\n      o.bg[p.background].hover.press,\n      o.typography(14).bold.preserveHalfLeading,\n      o.padding.horizontal(p.padding),\n      o.disabled,\n      o.borderRadius('oval'),\n      o.outline.default.focus,\n    ])}\n\n  /* よく考えたらheight=32って定義が存在しないな... */\n  height: ${(p) => p.height}px;\n`\n\nfunction styledProps(props: StyledProps) {\n  return {\n    ...props,\n    ...variantToProps(props.variant),\n    ...sizeToProps(props.size),\n  }\n}\n\nfunction variantToProps(variant: Variant) {\n  switch (variant) {\n    case 'Overlay':\n      return { font: 'text5', background: 'surface4' } as const\n    case 'Default':\n      return { font: 'text2', background: 'surface3' } as const\n    case 'Primary':\n      return { font: 'text5', background: 'brand' } as const\n    case 'Navigation':\n      return { font: 'text5', background: 'surface6' } as const\n    case 'Danger':\n      return { font: 'text5', background: 'assertive' } as const\n    default:\n      return unreachable(variant)\n  }\n}\n\nfunction sizeToProps(size: Size) {\n  switch (size) {\n    case 'S':\n      return {\n        height: 32,\n        padding: 16,\n      } as const\n    case 'M':\n      return {\n        height: 40,\n        padding: 24,\n      } as const\n  }\n}\n","/**\n * 今後ポートされる予定の汎用的な関数群\n */\n\n/**\n * Function used to assert a given code path is unreachable\n */\nexport function unreachable(): never\n/**\n * Function used to assert a given code path is unreachable.\n * Very useful for ensuring switches are exhaustive:\n *\n * ```ts\n * switch (a.type) {\n *   case Types.A:\n *   case Types.B:\n *     break\n *   default:\n *     unreachable(a) // will cause a build error if there was\n *                    // a Types.C that was not checked\n * }\n * ```\n *\n * @param value Value to be asserted as unreachable\n */\n// NOTE: Uses separate overloads, _not_ `value?: never`, to not allow `undefined` to be passed\n// eslint-disable-next-line @typescript-eslint/unified-signatures\nexport function unreachable(value: never): never\nexport function unreachable(value?: never): never {\n  throw new Error(\n    arguments.length === 0\n      ? 'unreachable'\n      : `unreachable (${JSON.stringify(value)})`\n  )\n}\n","import React from 'react'\nimport styled from 'styled-components'\nimport { theme } from '../../styled'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\nimport type { KnownIconType } from '@charcoal-ui/icons'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\ninterface StyledProps {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n}\n\nexport type IconButtonProps = StyledProps & ClickableProps\n\nconst IconButton = React.forwardRef<ClickableElement, IconButtonProps>(\n  function IconButtonInner(\n    { variant = 'Default', size = 'M', icon, ...rest }: IconButtonProps,\n    ref\n  ) {\n    validateIconSize(size, icon)\n    return (\n      <StyledIconButton {...rest} ref={ref} variant={variant} size={size}>\n        <pixiv-icon name={icon} />\n      </StyledIconButton>\n    )\n  }\n)\n\nexport default IconButton\n\nconst StyledIconButton = styled(Clickable).attrs<\n  Required<StyledProps>,\n  ReturnType<typeof styledProps>\n>(styledProps)`\n  user-select: none;\n\n  width: ${(p) => p.width}px;\n  height: ${(p) => p.height}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ${({ font, background }) =>\n    theme((o) => [\n      o.font[font],\n      o.bg[background].hover.press,\n      o.disabled,\n      o.borderRadius('oval'),\n      o.outline.default.focus,\n    ])}\n`\n\nfunction styledProps(props: Required<StyledProps>) {\n  return {\n    ...props,\n    ...variantToProps(props.variant),\n    ...sizeToProps(props.size),\n  }\n}\n\nfunction variantToProps(variant: Variant) {\n  switch (variant) {\n    case 'Default':\n      return { font: 'text3', background: 'transparent' } as const\n    case 'Overlay':\n      return { font: 'text5', background: 'surface4' } as const\n  }\n}\n\nfunction sizeToProps(size: Size) {\n  switch (size) {\n    case 'XS':\n      return {\n        width: 20,\n        height: 20,\n      }\n    case 'S':\n      return {\n        width: 32,\n        height: 32,\n      }\n    case 'M':\n      return {\n        width: 40,\n        height: 40,\n      }\n  }\n}\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`\n    )\n  }\n}\n","import React, { useCallback, useContext, useState } from 'react'\nimport styled from 'styled-components'\nimport warning from 'warning'\nimport { theme } from '../../styled'\nimport { px } from '@charcoal-ui/utils'\n\nexport type RadioProps = React.PropsWithChildren<{\n  value: string\n  forceChecked?: boolean\n  disabled?: boolean\n}>\n\nexport default function Radio({\n  value,\n  forceChecked = false,\n  disabled = false,\n  children,\n}: RadioProps) {\n  const {\n    name,\n    selected,\n    disabled: isParentDisabled,\n    readonly,\n    hasError,\n    onChange,\n  } = useContext(RadioGroupContext)\n\n  warning(\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    name !== undefined,\n    `\"name\" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`\n  )\n\n  const isSelected = value === selected\n  const isDisabled = disabled || isParentDisabled\n  const isReadonly = readonly && !isSelected\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.value)\n    },\n    [onChange]\n  )\n\n  return (\n    <RadioRoot aria-disabled={isDisabled || isReadonly}>\n      <RadioInput\n        name={name}\n        value={value}\n        checked={forceChecked || isSelected}\n        hasError={hasError}\n        onChange={handleChange}\n        disabled={isDisabled || isReadonly}\n      />\n      {children != null && <RadioLabel>{children}</RadioLabel>}\n    </RadioRoot>\n  )\n}\n\nconst RadioRoot = styled.label`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: ${({ theme }) => px(theme.spacing[4])};\n  align-items: center;\n  cursor: pointer;\n\n  ${theme((o) => [o.disabled])}\n`\n\nexport const RadioInput = styled.input.attrs({ type: 'radio' })<{\n  hasError?: boolean\n}>`\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    ${({ hasError = false }) =>\n      theme((o) => [\n        o.borderRadius('oval'),\n        o.bg.text5.hover.press,\n        hasError && o.outline.assertive,\n      ])};\n\n    &:not(:checked) {\n      border-width: 2px;\n      border-style: solid;\n      border-color: ${({ theme }) => theme.color.text4};\n    }\n\n    &:checked {\n      ${theme((o) => o.bg.brand.hover.press)}\n\n      &::after {\n        content: '';\n        display: block;\n        width: 8px;\n        height: 8px;\n        pointer-events: none;\n\n        ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}\n      }\n    }\n\n    ${theme((o) => o.outline.default.focus)}\n  }\n`\n\nconst RadioLabel = styled.div`\n  ${theme((o) => [o.typography(14)])}\n`\n\nexport type RadioGroupProps = React.PropsWithChildren<{\n  className?: string\n  defaultValue?: string\n  label: string\n  name: string\n  onChange(next: string): void\n  disabled?: boolean\n  readonly?: boolean\n  hasError?: boolean\n}>\n\n// TODO: use (or polyfill) flex gap\nconst StyledRadioGroup = styled.div`\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: ${({ theme }) => px(theme.spacing[8])};\n`\n\ninterface RadioGroupContext {\n  name: string\n  selected?: string\n  disabled: boolean\n  readonly: boolean\n  hasError: boolean\n  onChange: (next: string) => void\n}\n\nconst RadioGroupContext = React.createContext<RadioGroupContext>({\n  name: undefined as never,\n  selected: undefined,\n  disabled: false,\n  readonly: false,\n  hasError: false,\n  onChange() {\n    throw new Error(\n      'Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?'\n    )\n  },\n})\n\nexport function RadioGroup({\n  className,\n  defaultValue,\n  label,\n  name,\n  onChange,\n  disabled,\n  readonly,\n  hasError,\n  children,\n}: RadioGroupProps) {\n  const [selected, setSelected] = useState(defaultValue)\n\n  const handleChange = useCallback(\n    (next: string) => {\n      setSelected(next)\n      onChange(next)\n    },\n    [onChange]\n  )\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        name,\n        selected,\n        disabled: disabled ?? false,\n        readonly: readonly ?? false,\n        hasError: hasError ?? false,\n        onChange: handleChange,\n      }}\n    >\n      <StyledRadioGroup\n        role=\"radiogroup\"\n        aria-orientation=\"vertical\"\n        aria-label={label}\n        aria-invalid={hasError}\n        className={className}\n      >\n        {children}\n      </StyledRadioGroup>\n    </RadioGroupContext.Provider>\n  )\n}\n","import { useSwitch } from '@react-aria/switch'\nimport type { AriaSwitchProps } from '@react-types/switch'\nimport React, { useRef, useMemo } from 'react'\nimport { useToggleState } from 'react-stately'\nimport styled from 'styled-components'\nimport { theme } from '../../styled'\nimport { disabledSelector, px } from '@charcoal-ui/utils'\n\nexport type SwitchProps = {\n  name: string\n  className?: string\n  value?: string\n  checked?: boolean\n  disabled?: boolean\n  onChange(checked: boolean): void\n} & (\n  | // children か label は片方が必須\n  {\n      children: React.ReactNode\n    }\n  | {\n      label: string\n    }\n)\n\nexport default function SwitchCheckbox(props: SwitchProps) {\n  const { disabled, className } = props\n\n  const ariaSwitchProps: AriaSwitchProps = useMemo(\n    () => ({\n      ...props,\n\n      // children がいない場合は aria-label をつけないといけない\n      'aria-label': 'children' in props ? undefined : props.label,\n      isDisabled: props.disabled,\n      isSelected: props.checked,\n    }),\n    [props]\n  )\n\n  const state = useToggleState(ariaSwitchProps)\n  const ref = useRef<HTMLInputElement>(null)\n  const {\n    inputProps: { className: _className, type: _type, ...rest },\n  } = useSwitch(ariaSwitchProps, state, ref)\n\n  return (\n    <Label className={className} aria-disabled={disabled}>\n      <SwitchInput {...rest} ref={ref} />\n      {'children' in props ? (\n        // eslint-disable-next-line react/destructuring-assignment\n        <LabelInner>{props.children}</LabelInner>\n      ) : undefined}\n    </Label>\n  )\n}\n\nconst Label = styled.label`\n  display: inline-grid;\n  grid-template-columns: auto 1fr;\n  gap: ${({ theme }) => px(theme.spacing[4])};\n  cursor: pointer;\n  outline: 0;\n\n  ${theme((o) => o.disabled)}\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n`\n\nconst LabelInner = styled.div`\n  ${theme((o) => o.typography(14))}\n`\n\nconst SwitchInput = styled.input.attrs({\n  type: 'checkbox',\n})`\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    ${theme((o) => [\n      o.borderRadius(16),\n      o.height.px(16),\n      o.bg.text4.hover.press,\n      o.outline.default.focus,\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      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}\n    }\n\n    &:checked {\n      ${theme((o) => o.bg.brand.hover.press)}\n\n      &::after {\n        transform: translateX(12px);\n      }\n    }\n  }\n`\n","import React from 'react'\nimport styled from 'styled-components'\nimport createTheme from '@charcoal-ui/styled'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref\n  ) {\n    return (\n      <FieldLabelWrapper style={style} className={className}>\n        <Label ref={ref} {...labelProps}>\n          {label}\n        </Label>\n        {required && <RequiredText>{requiredText}</RequiredText>}\n        <SubLabelClickable>\n          <span>{subLabel}</span>\n        </SubLabelClickable>\n      </FieldLabelWrapper>\n    )\n  }\n)\n\nexport default FieldLabel\n\nconst theme = createTheme(styled)\n\nconst Label = styled.label`\n  ${theme((o) => [o.typography(14).bold, o.font.text1])}\n`\n\nconst RequiredText = styled.span`\n  ${theme((o) => [o.typography(14), o.font.text3])}\n`\n\nconst SubLabelClickable = styled.div`\n  ${theme((o) => [\n    o.typography(14),\n    o.font.text3.hover.press,\n    o.outline.default.focus,\n  ])}\n`\n\nconst FieldLabelWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > ${RequiredText} {\n    ${theme((o) => o.margin.left(4))}\n  }\n\n  > ${SubLabelClickable} {\n    ${theme((o) => o.margin.left('auto'))}\n  }\n`\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport styled, { css } from 'styled-components'\nimport FieldLabel, { FieldLabelProps } from '../FieldLabel'\nimport createTheme from '@charcoal-ui/styled'\n\nconst theme = createTheme(styled)\n\ninterface TextFieldBaseProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'> {\n  readonly className?: string\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly placeholder?: string\n  readonly assistiveText?: string\n  readonly disabled?: boolean\n  readonly required?: boolean\n  readonly invalid?: boolean\n  readonly maxLength?: number\n  /**\n   * tab-indexがｰ1かどうか\n   */\n  readonly excludeFromTabOrder?: boolean\n}\n\nexport interface SingleLineTextFieldProps extends TextFieldBaseProps {\n  readonly autoHeight?: never\n  readonly multiline?: false\n  readonly rows?: never\n  readonly type?: string\n}\n\nexport interface MultiLineTextFieldProps extends TextFieldBaseProps {\n  readonly autoHeight?: boolean\n  readonly multiline: true\n  readonly rows?: number\n  readonly type?: never\n}\n\nexport type TextFieldProps = SingleLineTextFieldProps | MultiLineTextFieldProps\ntype TextFieldElement = HTMLInputElement & HTMLTextAreaElement\n\nfunction mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\n  return (value) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(value)\n      } else if (ref !== null) {\n        ;(ref as React.MutableRefObject<T | null>).current = value\n      }\n    }\n  }\n}\n\nfunction countStringInCodePoints(string: string) {\n  return [...string].length\n}\n\nconst TextField = React.forwardRef<TextFieldElement, TextFieldProps>(\n  function TextField(props, ref) {\n    return props.multiline !== undefined && props.multiline ? (\n      <MultiLineTextField ref={ref} {...props} />\n    ) : (\n      <SingleLineTextField ref={ref} {...props} />\n    )\n  }\n)\n\nexport default TextField\n\nconst SingleLineTextField = React.forwardRef<\n  HTMLInputElement,\n  SingleLineTextFieldProps\n>(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {\n  const {\n    className,\n    showLabel = false,\n    showCount = false,\n    label,\n    requiredText,\n    subLabel,\n    disabled = false,\n    required,\n    invalid = false,\n    assistiveText,\n    maxLength,\n  } = props\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n  const ariaRef = useRef<HTMLInputElement>(null)\n  const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))\n\n  const handleChange = useCallback(\n    (value: string) => {\n      const count = countStringInCodePoints(value)\n      if (maxLength !== undefined && count > maxLength) {\n        return\n      }\n      setCount(count)\n      onChange?.(value)\n    },\n    [maxLength, onChange]\n  )\n\n  const { inputProps, labelProps, descriptionProps, errorMessageProps } =\n    useTextField(\n      {\n        inputElementType: 'input',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n  return (\n    <TextFieldRoot className={className} isDisabled={disabled}>\n      <TextFieldLabel\n        label={label}\n        requiredText={requiredText}\n        required={required}\n        subLabel={subLabel}\n        {...labelProps}\n        {...(!showLabel ? visuallyHiddenProps : {})}\n      />\n      <StyledInputContainer>\n        <StyledInput\n          ref={mergeRefs(forwardRef, ariaRef)}\n          invalid={invalid}\n          {...inputProps}\n        />\n        {showCount && maxLength && (\n          <SingleLineCounter>\n            {count}/{maxLength}\n          </SingleLineCounter>\n        )}\n      </StyledInputContainer>\n      {assistiveText != null && assistiveText.length !== 0 && (\n        <AssistiveText\n          invalid={invalid}\n          {...(invalid ? errorMessageProps : descriptionProps)}\n        >\n          {assistiveText}\n        </AssistiveText>\n      )}\n    </TextFieldRoot>\n  )\n})\n\nconst MultiLineTextField = React.forwardRef<\n  HTMLTextAreaElement,\n  MultiLineTextFieldProps\n>(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef) {\n  const {\n    className,\n    showCount = false,\n    showLabel = false,\n    label,\n    requiredText,\n    subLabel,\n    disabled = false,\n    required,\n    invalid = false,\n    assistiveText,\n    maxLength,\n    autoHeight = false,\n    rows: initialRows = 4,\n  } = props\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n  const ariaRef = useRef<HTMLTextAreaElement>(null)\n  const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))\n  const [rows, setRows] = useState(initialRows)\n\n  const syncHeight = useCallback(\n    (textarea: HTMLTextAreaElement) => {\n      const rows = `${textarea.value}\\n`.match(/\\n/gu)?.length ?? 1\n      if (initialRows <= rows) {\n        setRows(rows)\n      }\n    },\n    [initialRows]\n  )\n\n  const handleChange = useCallback(\n    (value: string) => {\n      const count = countStringInCodePoints(value)\n      if (maxLength !== undefined && count > maxLength) {\n        return\n      }\n      setCount(count)\n      if (autoHeight && textareaRef.current !== null) {\n        syncHeight(textareaRef.current)\n      }\n      onChange?.(value)\n    },\n    [autoHeight, maxLength, onChange, syncHeight]\n  )\n\n  const { inputProps, labelProps, descriptionProps, errorMessageProps } =\n    useTextField(\n      {\n        inputElementType: 'textarea',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n  useEffect(() => {\n    if (autoHeight && textareaRef.current !== null) {\n      syncHeight(textareaRef.current)\n    }\n  }, [autoHeight, syncHeight])\n\n  return (\n    <TextFieldRoot className={className} isDisabled={disabled}>\n      <TextFieldLabel\n        label={label}\n        requiredText={requiredText}\n        required={required}\n        subLabel={subLabel}\n        {...labelProps}\n        {...(showLabel ? visuallyHiddenProps : {})}\n      />\n      <StyledTextareaContainer rows={rows}>\n        <StyledTextarea\n          ref={mergeRefs(textareaRef, forwardRef, ariaRef)}\n          invalid={invalid}\n          rows={rows}\n          {...inputProps}\n        />\n        {showCount && <MultiLineCounter>{count}</MultiLineCounter>}\n      </StyledTextareaContainer>\n      {assistiveText != null && assistiveText.length !== 0 && (\n        <AssistiveText\n          invalid={invalid}\n          {...(invalid ? errorMessageProps : descriptionProps)}\n        >\n          {assistiveText}\n        </AssistiveText>\n      )}\n    </TextFieldRoot>\n  )\n})\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nconst TextFieldLabel = styled(FieldLabel)`\n  ${theme((o) => o.margin.bottom(8))}\n`\n\nconst StyledInputContainer = styled.div`\n  height: 40px;\n  display: grid;\n  position: relative;\n`\n\nconst StyledInput = styled.input<{ invalid: boolean }>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\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(40px / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) calc(8px / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  ${(p) =>\n    theme((o) => [\n      o.bg.surface3.hover,\n      o.outline.default.focus,\n      p.invalid && o.outline.assertive,\n      o.font.text2,\n    ])}\n\n  &::placeholder {\n    ${theme((o) => o.font.text3)}\n  }\n`\n\nconst StyledTextareaContainer = styled.div<{ rows: number }>`\n  display: grid;\n  position: relative;\n\n  ${({ rows }) => css`\n    max-height: calc(22px * ${rows} + 18px);\n  `};\n`\n\nconst StyledTextarea = styled.textarea<{ invalid: boolean }>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  resize: none;\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) calc(8px / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  ${({ rows }) => css`\n    height: calc(22px / 0.875 * ${rows} + 18px / 0.875);\n  `};\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  ${(p) =>\n    theme((o) => [\n      o.bg.surface3.hover,\n      o.outline.default.focus,\n      p.invalid && o.outline.assertive,\n      o.font.text2,\n    ])}\n\n  &::placeholder {\n    ${theme((o) => o.font.text3)}\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`\n\nconst SingleLineCounter = styled.span`\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\n  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}\n`\n\nconst MultiLineCounter = styled.span`\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}\n`\n\nconst AssistiveText = styled.p<{ invalid: boolean }>`\n  ${(p) =>\n    theme((o) => [\n      o.typography(14),\n      o.margin.top(8),\n      o.margin.bottom(0),\n      o.font[p.invalid ? 'assertive' : 'text1'],\n    ])}\n`\n"],"names":["DefaultValue","Link","React","forwardRef","ref","to","children","rest","href","ComponentAbstractionContext","createContext","ComponentAbstraction","components","Provider","value","useComponentAbstraction","useContext","theme","createTheme","styled","Clickable","props","onClick","disabled","A","as","undefined","Button","clickableCss","css","disabledSelector","button","span","variant","size","fixed","StyledButton","withConfig","shouldForwardProp","prop","attrs","font","background","Error","arguments","length","JSON","stringify","unreachable","variantToProps","height","padding","sizeToProps","p","o","hover","press","bg","typography","bold","preserveHalfLeading","horizontal","borderRadius","outline","default","focus","IconButton","icon","requiredIconSize","result","exec","iconSize","console","warn","validateIconSize","StyledIconButton","name","width","Radio","forceChecked","selected","isParentDisabled","readonly","hasError","onChange","RadioGroupContext","warning","isSelected","isDisabled","isReadonly","handleChange","useCallback","e","currentTarget","RadioRoot","RadioInput","checked","RadioLabel","label","px","spacing","input","type","text5","assertive","color","text4","brand","div","StyledRadioGroup","RadioGroup","className","defaultValue","setSelected","useState","next","role","SwitchCheckbox","ariaSwitchProps","useMemo","state","useToggleState","useRef","useSwitch","inputProps","Label","SwitchInput","LabelInner","FieldLabel","style","required","requiredText","subLabel","labelProps","FieldLabelWrapper","RequiredText","SubLabelClickable","text1","text3","margin","left","mergeRefs","refs","current","countStringInCodePoints","string","TextField","multiline","MultiLineTextField","SingleLineTextField","showLabel","showCount","invalid","assistiveText","maxLength","visuallyHiddenProps","useVisuallyHidden","ariaRef","count","setCount","descriptionProps","errorMessageProps","useTextField","inputElementType","isRequired","validationState","description","errorMessage","TextFieldRoot","TextFieldLabel","StyledInputContainer","StyledInput","SingleLineCounter","AssistiveText","autoHeight","rows","initialRows","textareaRef","setRows","syncHeight","textarea","match","_$match","useEffect","StyledTextareaContainer","StyledTextarea","MultiLineCounter","opacity","elementEffect","bottom","surface3","text2","top"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/core/ComponentAbstraction.tsx","../src/styled.ts","../src/components/Clickable/index.tsx","../src/components/Button/index.tsx","../src/_lib/index.ts","../src/components/IconButton/index.tsx","../src/components/Radio/index.tsx","../src/components/Switch/index.tsx","../src/components/FieldLabel/index.tsx","../src/components/TextField/index.tsx"],"sourcesContent":["import React, { useContext } from 'react'\n\nexport type LinkProps = {\n  /**\n   * リンクのURL\n   */\n  to: string\n} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>\n\nexport const DefaultLink = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  function DefaultLink({ to, children, ...rest }, ref) {\n    return (\n      <a href={to} ref={ref} {...rest}>\n        {children}\n      </a>\n    )\n  }\n)\n\ninterface Components {\n  Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>\n}\n\nconst DefaultValue: Components = {\n  Link: DefaultLink,\n}\n\nconst ComponentAbstractionContext = React.createContext(DefaultValue)\n\ninterface Props {\n  children: React.ReactNode\n  components: Partial<Components>\n}\n\nexport default function ComponentAbstraction({ children, components }: Props) {\n  return (\n    <ComponentAbstractionContext.Provider\n      value={{ ...DefaultValue, ...components }}\n    >\n      {children}\n    </ComponentAbstractionContext.Provider>\n  )\n}\n\nexport function useComponentAbstraction() {\n  return useContext(ComponentAbstractionContext)\n}\n","import styled from 'styled-components'\nimport createTheme from '@charcoal-ui/styled'\nexport const theme = createTheme(styled)\n","import React from 'react'\nimport styled, { css } from 'styled-components'\nimport {\n  LinkProps,\n  useComponentAbstraction,\n} from '../../core/ComponentAbstraction'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\ninterface BaseProps {\n  /**\n   * クリックの無効化\n   */\n  disabled?: boolean\n}\n\ninterface LinkBaseProps {\n  /**\n   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される\n   */\n  to: string\n}\n\nexport type ClickableProps =\n  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)\n  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n\nconst Clickable = React.forwardRef<ClickableElement, ClickableProps>(\n  function Clickable(props, ref) {\n    const { Link } = useComponentAbstraction()\n    if ('to' in props) {\n      const { onClick, disabled = false, ...rest } = props\n      return (\n        <A<typeof Link>\n          {...rest}\n          as={disabled ? undefined : Link}\n          onClick={disabled ? undefined : onClick}\n          aria-disabled={disabled}\n          ref={ref}\n        />\n      )\n    } else {\n      return <Button {...props} ref={ref} />\n    }\n  }\n)\nexport default Clickable\n\nconst clickableCss = css`\n  /* Clickable style */\n  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n`\n\nconst Button = styled.button`\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  ${clickableCss}\n`\n\nconst A = styled.span`\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  ${clickableCss}\n`\n","import React from 'react'\nimport styled from 'styled-components'\nimport { unreachable } from '../../_lib'\nimport { theme } from '../../styled'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\n\ntype Variant = 'Primary' | 'Default' | 'Overlay' | 'Danger' | 'Navigation'\ntype Size = 'S' | 'M'\n\ninterface StyledProps {\n  /**\n   * ボタンのスタイル\n   */\n  variant: Variant\n  /**\n   * ボタンのサイズ\n   */\n  size: Size\n  /**\n   * 幅を最大まで広げて描画\n   */\n  fixed: boolean\n}\n\nexport type ButtonProps = Partial<StyledProps> & ClickableProps\n\nconst Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(\n  {\n    children,\n    variant = 'Default',\n    size = 'M',\n    fixed = false,\n    disabled = false,\n    ...rest\n  },\n  ref\n) {\n  return (\n    <StyledButton\n      {...rest}\n      disabled={disabled}\n      variant={variant}\n      size={size}\n      fixed={fixed}\n      ref={ref}\n    >\n      {children}\n    </StyledButton>\n  )\n})\nexport default Button\n\nconst StyledButton = styled(Clickable)\n  .withConfig<StyledProps>({\n    shouldForwardProp(prop) {\n      // fixed は <button> 要素に渡ってはいけない\n      return prop !== 'fixed'\n    },\n  })\n  .attrs<StyledProps, ReturnType<typeof styledProps>>(styledProps)`\n  width: ${(p) => (p.fixed ? 'stretch' : 'min-content')};\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  ${(p) =>\n    theme((o) => [\n      o.font[p.font].hover.press,\n      o.bg[p.background].hover.press,\n      o.typography(14).bold.preserveHalfLeading,\n      o.padding.horizontal(p.padding),\n      o.disabled,\n      o.borderRadius('oval'),\n      o.outline.default.focus,\n    ])}\n\n  /* よく考えたらheight=32って定義が存在しないな... */\n  height: ${(p) => p.height}px;\n`\n\nfunction styledProps(props: StyledProps) {\n  return {\n    ...props,\n    ...variantToProps(props.variant),\n    ...sizeToProps(props.size),\n  }\n}\n\nfunction variantToProps(variant: Variant) {\n  switch (variant) {\n    case 'Overlay':\n      return { font: 'text5', background: 'surface4' } as const\n    case 'Default':\n      return { font: 'text2', background: 'surface3' } as const\n    case 'Primary':\n      return { font: 'text5', background: 'brand' } as const\n    case 'Navigation':\n      return { font: 'text5', background: 'surface6' } as const\n    case 'Danger':\n      return { font: 'text5', background: 'assertive' } as const\n    default:\n      return unreachable(variant)\n  }\n}\n\nfunction sizeToProps(size: Size) {\n  switch (size) {\n    case 'S':\n      return {\n        height: 32,\n        padding: 16,\n      } as const\n    case 'M':\n      return {\n        height: 40,\n        padding: 24,\n      } as const\n  }\n}\n","/**\n * 今後ポートされる予定の汎用的な関数群\n */\n\n/**\n * Function used to assert a given code path is unreachable\n */\nexport function unreachable(): never\n/**\n * Function used to assert a given code path is unreachable.\n * Very useful for ensuring switches are exhaustive:\n *\n * ```ts\n * switch (a.type) {\n *   case Types.A:\n *   case Types.B:\n *     break\n *   default:\n *     unreachable(a) // will cause a build error if there was\n *                    // a Types.C that was not checked\n * }\n * ```\n *\n * @param value Value to be asserted as unreachable\n */\n// NOTE: Uses separate overloads, _not_ `value?: never`, to not allow `undefined` to be passed\n// eslint-disable-next-line @typescript-eslint/unified-signatures\nexport function unreachable(value: never): never\nexport function unreachable(value?: never): never {\n  throw new Error(\n    arguments.length === 0\n      ? 'unreachable'\n      : `unreachable (${JSON.stringify(value)})`\n  )\n}\n","import React from 'react'\nimport styled from 'styled-components'\nimport { theme } from '../../styled'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\nimport type { KnownIconType } from '@charcoal-ui/icons'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\ninterface StyledProps {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n}\n\nexport type IconButtonProps = StyledProps & ClickableProps\n\nconst IconButton = React.forwardRef<ClickableElement, IconButtonProps>(\n  function IconButtonInner(\n    { variant = 'Default', size = 'M', icon, ...rest }: IconButtonProps,\n    ref\n  ) {\n    validateIconSize(size, icon)\n    return (\n      <StyledIconButton {...rest} ref={ref} variant={variant} size={size}>\n        <pixiv-icon name={icon} />\n      </StyledIconButton>\n    )\n  }\n)\n\nexport default IconButton\n\nconst StyledIconButton = styled(Clickable).attrs<\n  Required<StyledProps>,\n  ReturnType<typeof styledProps>\n>(styledProps)`\n  user-select: none;\n\n  width: ${(p) => p.width}px;\n  height: ${(p) => p.height}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ${({ font, background }) =>\n    theme((o) => [\n      o.font[font],\n      o.bg[background].hover.press,\n      o.disabled,\n      o.borderRadius('oval'),\n      o.outline.default.focus,\n    ])}\n`\n\nfunction styledProps(props: Required<StyledProps>) {\n  return {\n    ...props,\n    ...variantToProps(props.variant),\n    ...sizeToProps(props.size),\n  }\n}\n\nfunction variantToProps(variant: Variant) {\n  switch (variant) {\n    case 'Default':\n      return { font: 'text3', background: 'transparent' } as const\n    case 'Overlay':\n      return { font: 'text5', background: 'surface4' } as const\n  }\n}\n\nfunction sizeToProps(size: Size) {\n  switch (size) {\n    case 'XS':\n      return {\n        width: 20,\n        height: 20,\n      }\n    case 'S':\n      return {\n        width: 32,\n        height: 32,\n      }\n    case 'M':\n      return {\n        width: 40,\n        height: 40,\n      }\n  }\n}\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`\n    )\n  }\n}\n","import React, { useCallback, useContext } from 'react'\nimport styled from 'styled-components'\nimport warning from 'warning'\nimport { theme } from '../../styled'\nimport { px } from '@charcoal-ui/utils'\n\nexport type RadioProps = React.PropsWithChildren<{\n  value: string\n  forceChecked?: boolean\n  disabled?: boolean\n}>\n\nexport default function Radio({\n  value,\n  forceChecked = false,\n  disabled = false,\n  children,\n}: RadioProps) {\n  const {\n    name,\n    selected,\n    disabled: isParentDisabled,\n    readonly,\n    hasError,\n    onChange,\n  } = useContext(RadioGroupContext)\n\n  warning(\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    name !== undefined,\n    `\"name\" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`\n  )\n\n  const isSelected = value === selected\n  const isDisabled = disabled || isParentDisabled\n  const isReadonly = readonly && !isSelected\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.value)\n    },\n    [onChange]\n  )\n\n  return (\n    <RadioRoot aria-disabled={isDisabled || isReadonly}>\n      <RadioInput\n        name={name}\n        value={value}\n        checked={forceChecked || isSelected}\n        hasError={hasError}\n        onChange={handleChange}\n        disabled={isDisabled || isReadonly}\n      />\n      {children != null && <RadioLabel>{children}</RadioLabel>}\n    </RadioRoot>\n  )\n}\n\nconst RadioRoot = styled.label`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: ${({ theme }) => px(theme.spacing[4])};\n  align-items: center;\n  cursor: pointer;\n\n  ${theme((o) => [o.disabled])}\n`\n\nexport const RadioInput = styled.input.attrs({ type: 'radio' })<{\n  hasError?: boolean\n}>`\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    ${({ hasError = false }) =>\n      theme((o) => [\n        o.borderRadius('oval'),\n        o.bg.text5.hover.press,\n        hasError && o.outline.assertive,\n      ])};\n\n    &:not(:checked) {\n      border-width: 2px;\n      border-style: solid;\n      border-color: ${({ theme }) => theme.color.text4};\n    }\n\n    &:checked {\n      ${theme((o) => o.bg.brand.hover.press)}\n\n      &::after {\n        content: '';\n        display: block;\n        width: 8px;\n        height: 8px;\n        pointer-events: none;\n\n        ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}\n      }\n    }\n\n    ${theme((o) => o.outline.default.focus)}\n  }\n`\n\nconst RadioLabel = styled.div`\n  ${theme((o) => [o.typography(14)])}\n`\n\nexport type RadioGroupProps = React.PropsWithChildren<{\n  className?: string\n  value?: string\n  label: string\n  name: string\n  onChange(next: string): void\n  disabled?: boolean\n  readonly?: boolean\n  hasError?: boolean\n}>\n\n// TODO: use (or polyfill) flex gap\nconst StyledRadioGroup = styled.div`\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: ${({ theme }) => px(theme.spacing[8])};\n`\n\ninterface RadioGroupContext {\n  name: string\n  selected?: string\n  disabled: boolean\n  readonly: boolean\n  hasError: boolean\n  onChange: (next: string) => void\n}\n\nconst RadioGroupContext = React.createContext<RadioGroupContext>({\n  name: undefined as never,\n  selected: undefined,\n  disabled: false,\n  readonly: false,\n  hasError: false,\n  onChange() {\n    throw new Error(\n      'Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?'\n    )\n  },\n})\n\nexport function RadioGroup({\n  className,\n  value,\n  label,\n  name,\n  onChange,\n  disabled,\n  readonly,\n  hasError,\n  children,\n}: RadioGroupProps) {\n  const handleChange = useCallback(\n    (next: string) => {\n      onChange(next)\n    },\n    [onChange]\n  )\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        name,\n        selected: value,\n        disabled: disabled ?? false,\n        readonly: readonly ?? false,\n        hasError: hasError ?? false,\n        onChange: handleChange,\n      }}\n    >\n      <StyledRadioGroup\n        role=\"radiogroup\"\n        aria-orientation=\"vertical\"\n        aria-label={label}\n        aria-invalid={hasError}\n        className={className}\n      >\n        {children}\n      </StyledRadioGroup>\n    </RadioGroupContext.Provider>\n  )\n}\n","import { useSwitch } from '@react-aria/switch'\nimport type { AriaSwitchProps } from '@react-types/switch'\nimport React, { useRef, useMemo } from 'react'\nimport { useToggleState } from 'react-stately'\nimport styled from 'styled-components'\nimport { theme } from '../../styled'\nimport { disabledSelector, px } from '@charcoal-ui/utils'\n\nexport type SwitchProps = {\n  name: string\n  className?: string\n  value?: string\n  checked?: boolean\n  disabled?: boolean\n  onChange(checked: boolean): void\n} & (\n  | // children か label は片方が必須\n  {\n      children: React.ReactNode\n    }\n  | {\n      label: string\n    }\n)\n\nexport default function SwitchCheckbox(props: SwitchProps) {\n  const { disabled, className } = props\n\n  const ariaSwitchProps: AriaSwitchProps = useMemo(\n    () => ({\n      ...props,\n\n      // children がいない場合は aria-label をつけないといけない\n      'aria-label': 'children' in props ? undefined : props.label,\n      isDisabled: props.disabled,\n      isSelected: props.checked,\n    }),\n    [props]\n  )\n\n  const state = useToggleState(ariaSwitchProps)\n  const ref = useRef<HTMLInputElement>(null)\n  const {\n    inputProps: { className: _className, type: _type, ...rest },\n  } = useSwitch(ariaSwitchProps, state, ref)\n\n  return (\n    <Label className={className} aria-disabled={disabled}>\n      <SwitchInput {...rest} ref={ref} />\n      {'children' in props ? (\n        // eslint-disable-next-line react/destructuring-assignment\n        <LabelInner>{props.children}</LabelInner>\n      ) : undefined}\n    </Label>\n  )\n}\n\nconst Label = styled.label`\n  display: inline-grid;\n  grid-template-columns: auto 1fr;\n  gap: ${({ theme }) => px(theme.spacing[4])};\n  cursor: pointer;\n  outline: 0;\n\n  ${theme((o) => o.disabled)}\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n`\n\nconst LabelInner = styled.div`\n  ${theme((o) => o.typography(14))}\n`\n\nconst SwitchInput = styled.input.attrs({\n  type: 'checkbox',\n})`\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    ${theme((o) => [\n      o.borderRadius(16),\n      o.height.px(16),\n      o.bg.text4.hover.press,\n      o.outline.default.focus,\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      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}\n    }\n\n    &:checked {\n      ${theme((o) => o.bg.brand.hover.press)}\n\n      &::after {\n        transform: translateX(12px);\n      }\n    }\n  }\n`\n","import React from 'react'\nimport styled from 'styled-components'\nimport createTheme from '@charcoal-ui/styled'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref\n  ) {\n    return (\n      <FieldLabelWrapper style={style} className={className}>\n        <Label ref={ref} {...labelProps}>\n          {label}\n        </Label>\n        {required && <RequiredText>{requiredText}</RequiredText>}\n        <SubLabelClickable>\n          <span>{subLabel}</span>\n        </SubLabelClickable>\n      </FieldLabelWrapper>\n    )\n  }\n)\n\nexport default FieldLabel\n\nconst theme = createTheme(styled)\n\nconst Label = styled.label`\n  ${theme((o) => [o.typography(14).bold, o.font.text1])}\n`\n\nconst RequiredText = styled.span`\n  ${theme((o) => [o.typography(14), o.font.text3])}\n`\n\nconst SubLabelClickable = styled.div`\n  ${theme((o) => [\n    o.typography(14),\n    o.font.text3.hover.press,\n    o.outline.default.focus,\n  ])}\n`\n\nconst FieldLabelWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > ${RequiredText} {\n    ${theme((o) => o.margin.left(4))}\n  }\n\n  > ${SubLabelClickable} {\n    ${theme((o) => o.margin.left('auto'))}\n  }\n`\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport styled, { css } from 'styled-components'\nimport FieldLabel, { FieldLabelProps } from '../FieldLabel'\nimport createTheme from '@charcoal-ui/styled'\n\nconst theme = createTheme(styled)\n\ninterface TextFieldBaseProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'> {\n  readonly className?: string\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly placeholder?: string\n  readonly assistiveText?: string\n  readonly disabled?: boolean\n  readonly required?: boolean\n  readonly invalid?: boolean\n  readonly maxLength?: number\n  /**\n   * tab-indexがｰ1かどうか\n   */\n  readonly excludeFromTabOrder?: boolean\n}\n\nexport interface SingleLineTextFieldProps extends TextFieldBaseProps {\n  readonly autoHeight?: never\n  readonly multiline?: false\n  readonly rows?: never\n  readonly type?: string\n  readonly prefix?: string\n  readonly suffix?: string\n}\n\nexport interface MultiLineTextFieldProps extends TextFieldBaseProps {\n  readonly autoHeight?: boolean\n  readonly multiline: true\n  readonly rows?: number\n  readonly type?: never\n  readonly prefix?: never\n  readonly suffix?: never\n}\n\nexport type TextFieldProps = SingleLineTextFieldProps | MultiLineTextFieldProps\ntype TextFieldElement = HTMLInputElement & HTMLTextAreaElement\n\nfunction mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\n  return (value) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(value)\n      } else if (ref !== null) {\n        ;(ref as React.MutableRefObject<T | null>).current = value\n      }\n    }\n  }\n}\n\nfunction countStringInCodePoints(string: string) {\n  return [...string].length\n}\n\nconst TextField = React.forwardRef<TextFieldElement, TextFieldProps>(\n  function TextField(props, ref) {\n    return props.multiline !== undefined && props.multiline ? (\n      <MultiLineTextField ref={ref} {...props} />\n    ) : (\n      <SingleLineTextField ref={ref} {...props} />\n    )\n  }\n)\n\nexport default TextField\n\nconst SingleLineTextField = React.forwardRef<\n  HTMLInputElement,\n  SingleLineTextFieldProps\n>(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {\n  const {\n    className,\n    showLabel = false,\n    showCount = false,\n    label,\n    requiredText,\n    subLabel,\n    disabled = false,\n    required,\n    invalid = false,\n    assistiveText,\n    maxLength,\n    prefix = '',\n    suffix = '',\n  } = props\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n  const ariaRef = useRef<HTMLInputElement>(null)\n  const prefixRef = useRef<HTMLSpanElement>(null)\n  const suffixRef = useRef<HTMLSpanElement>(null)\n  const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))\n  const [prefixWidth, setPrefixWidth] = useState(0)\n  const [suffixWidth, setSuffixWidth] = useState(0)\n\n  const handleChange = useCallback(\n    (value: string) => {\n      const count = countStringInCodePoints(value)\n      if (maxLength !== undefined && count > maxLength) {\n        return\n      }\n      setCount(count)\n      onChange?.(value)\n    },\n    [maxLength, onChange]\n  )\n\n  const { inputProps, labelProps, descriptionProps, errorMessageProps } =\n    useTextField(\n      {\n        inputElementType: 'input',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n  useEffect(() => {\n    const prefixObserver = new ResizeObserver((entries) => {\n      setPrefixWidth(entries[0].contentRect.width)\n    })\n    const suffixObserver = new ResizeObserver((entries) => {\n      setSuffixWidth(entries[0].contentRect.width)\n    })\n\n    if (prefixRef.current !== null) {\n      prefixObserver.observe(prefixRef.current)\n    }\n    if (suffixRef.current !== null) {\n      suffixObserver.observe(suffixRef.current)\n    }\n\n    return () => {\n      suffixObserver.disconnect()\n      prefixObserver.disconnect()\n    }\n  }, [])\n\n  return (\n    <TextFieldRoot className={className} isDisabled={disabled}>\n      <TextFieldLabel\n        label={label}\n        requiredText={requiredText}\n        required={required}\n        subLabel={subLabel}\n        {...labelProps}\n        {...(!showLabel ? visuallyHiddenProps : {})}\n      />\n      <StyledInputContainer>\n        <PrefixContainer ref={prefixRef}>\n          <Affix>{prefix}</Affix>\n        </PrefixContainer>\n        <StyledInput\n          ref={mergeRefs(forwardRef, ariaRef)}\n          invalid={invalid}\n          extraLeftPadding={prefixWidth}\n          extraRightPadding={suffixWidth}\n          {...inputProps}\n        />\n        <SuffixContainer ref={suffixRef}>\n          <Affix>{suffix}</Affix>\n          {showCount && maxLength && (\n            <SingleLineCounter>\n              {count}/{maxLength}\n            </SingleLineCounter>\n          )}\n        </SuffixContainer>\n      </StyledInputContainer>\n      {assistiveText != null && assistiveText.length !== 0 && (\n        <AssistiveText\n          invalid={invalid}\n          {...(invalid ? errorMessageProps : descriptionProps)}\n        >\n          {assistiveText}\n        </AssistiveText>\n      )}\n    </TextFieldRoot>\n  )\n})\n\nconst MultiLineTextField = React.forwardRef<\n  HTMLTextAreaElement,\n  MultiLineTextFieldProps\n>(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef) {\n  const {\n    className,\n    showCount = false,\n    showLabel = false,\n    label,\n    requiredText,\n    subLabel,\n    disabled = false,\n    required,\n    invalid = false,\n    assistiveText,\n    maxLength,\n    autoHeight = false,\n    rows: initialRows = 4,\n  } = props\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n  const ariaRef = useRef<HTMLTextAreaElement>(null)\n  const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))\n  const [rows, setRows] = useState(initialRows)\n\n  const syncHeight = useCallback(\n    (textarea: HTMLTextAreaElement) => {\n      const rows = `${textarea.value}\\n`.match(/\\n/gu)?.length ?? 1\n      if (initialRows <= rows) {\n        setRows(rows)\n      }\n    },\n    [initialRows]\n  )\n\n  const handleChange = useCallback(\n    (value: string) => {\n      const count = countStringInCodePoints(value)\n      if (maxLength !== undefined && count > maxLength) {\n        return\n      }\n      setCount(count)\n      if (autoHeight && textareaRef.current !== null) {\n        syncHeight(textareaRef.current)\n      }\n      onChange?.(value)\n    },\n    [autoHeight, maxLength, onChange, syncHeight]\n  )\n\n  const { inputProps, labelProps, descriptionProps, errorMessageProps } =\n    useTextField(\n      {\n        inputElementType: 'textarea',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n  useEffect(() => {\n    if (autoHeight && textareaRef.current !== null) {\n      syncHeight(textareaRef.current)\n    }\n  }, [autoHeight, syncHeight])\n\n  return (\n    <TextFieldRoot className={className} isDisabled={disabled}>\n      <TextFieldLabel\n        label={label}\n        requiredText={requiredText}\n        required={required}\n        subLabel={subLabel}\n        {...labelProps}\n        {...(showLabel ? visuallyHiddenProps : {})}\n      />\n      <StyledTextareaContainer rows={rows}>\n        <StyledTextarea\n          ref={mergeRefs(textareaRef, forwardRef, ariaRef)}\n          invalid={invalid}\n          rows={rows}\n          {...inputProps}\n        />\n        {showCount && <MultiLineCounter>{count}</MultiLineCounter>}\n      </StyledTextareaContainer>\n      {assistiveText != null && assistiveText.length !== 0 && (\n        <AssistiveText\n          invalid={invalid}\n          {...(invalid ? errorMessageProps : descriptionProps)}\n        >\n          {assistiveText}\n        </AssistiveText>\n      )}\n    </TextFieldRoot>\n  )\n})\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nconst TextFieldLabel = styled(FieldLabel)`\n  ${theme((o) => o.margin.bottom(8))}\n`\n\nconst StyledInputContainer = styled.div`\n  height: 40px;\n  display: grid;\n  position: relative;\n`\n\nconst PrefixContainer = styled.span`\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n`\n\nconst SuffixContainer = styled.span`\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\n  display: flex;\n  gap: 8px;\n`\n\nconst Affix = styled.span`\n  user-select: none;\n\n  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}\n`\n\nconst StyledInput = styled.input<{\n  invalid: boolean\n  extraLeftPadding: number\n  extraRightPadding: number\n}>`\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-top: calc(9px / 0.875);\n  padding-bottom: calc(9px / 0.875);\n  padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);\n  padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  ${(p) =>\n    theme((o) => [\n      o.bg.surface3.hover,\n      o.outline.default.focus,\n      p.invalid && o.outline.assertive,\n      o.font.text2,\n    ])}\n\n  &::placeholder {\n    ${theme((o) => o.font.text3)}\n  }\n`\n\nconst StyledTextareaContainer = styled.div<{ rows: number }>`\n  display: grid;\n  position: relative;\n\n  ${({ rows }) => css`\n    max-height: calc(22px * ${rows} + 18px);\n  `};\n`\n\nconst StyledTextarea = styled.textarea<{ invalid: boolean }>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  resize: 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  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) calc(8px / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  ${({ rows }) => css`\n    height: calc(22px / 0.875 * ${rows} + 18px / 0.875);\n  `};\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  ${(p) =>\n    theme((o) => [\n      o.bg.surface3.hover,\n      o.outline.default.focus,\n      p.invalid && o.outline.assertive,\n      o.font.text2,\n    ])}\n\n  &::placeholder {\n    ${theme((o) => o.font.text3)}\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`\n\nconst SingleLineCounter = styled.span`\n  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}\n`\n\nconst MultiLineCounter = styled.span`\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}\n`\n\nconst AssistiveText = styled.p<{ invalid: boolean }>`\n  ${(p) =>\n    theme((o) => [\n      o.typography(14),\n      o.margin.top(8),\n      o.margin.bottom(0),\n      o.font[p.invalid ? 'assertive' : 'text1'],\n    ])}\n`\n"],"names":["DefaultValue","Link","React","forwardRef","ref","to","children","rest","href","ComponentAbstractionContext","createContext","ComponentAbstraction","components","Provider","value","useComponentAbstraction","useContext","theme","createTheme","styled","Clickable","props","onClick","disabled","A","as","undefined","Button","clickableCss","css","disabledSelector","button","span","variant","size","fixed","StyledButton","withConfig","shouldForwardProp","prop","attrs","font","background","Error","arguments","length","JSON","stringify","unreachable","variantToProps","height","padding","sizeToProps","p","o","hover","press","bg","typography","bold","preserveHalfLeading","horizontal","borderRadius","outline","default","focus","IconButton","icon","requiredIconSize","result","exec","iconSize","console","warn","validateIconSize","StyledIconButton","name","width","Radio","forceChecked","selected","isParentDisabled","readonly","hasError","onChange","RadioGroupContext","warning","isSelected","isDisabled","isReadonly","handleChange","useCallback","e","currentTarget","RadioRoot","RadioInput","checked","RadioLabel","label","px","spacing","input","type","text5","assertive","color","text4","brand","div","StyledRadioGroup","RadioGroup","className","next","role","SwitchCheckbox","ariaSwitchProps","useMemo","state","useToggleState","useRef","useSwitch","inputProps","Label","SwitchInput","LabelInner","FieldLabel","style","required","requiredText","subLabel","labelProps","FieldLabelWrapper","RequiredText","SubLabelClickable","text1","text3","margin","left","mergeRefs","refs","current","countStringInCodePoints","string","TextField","multiline","MultiLineTextField","SingleLineTextField","showLabel","showCount","invalid","assistiveText","maxLength","prefix","suffix","visuallyHiddenProps","useVisuallyHidden","ariaRef","prefixRef","suffixRef","count","setCount","useState","prefixWidth","setPrefixWidth","suffixWidth","setSuffixWidth","descriptionProps","errorMessageProps","useTextField","inputElementType","isRequired","validationState","description","errorMessage","useEffect","prefixObserver","ResizeObserver","entries","contentRect","suffixObserver","observe","disconnect","TextFieldRoot","TextFieldLabel","StyledInputContainer","PrefixContainer","Affix","StyledInput","extraLeftPadding","extraRightPadding","SuffixContainer","SingleLineCounter","AssistiveText","autoHeight","rows","initialRows","textareaRef","setRows","syncHeight","textarea","match","_$match","StyledTextareaContainer","StyledTextarea","MultiLineCounter","opacity","elementEffect","bottom","text2","surface3","top"],"mappings":"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"}

package/dist/index.module.js

@@ -1,2 +1,2 @@
-import n,{useContext as e,useCallback as r,useState as t,useMemo as i,useRef as a,useEffect as o}from"react";import l,{css as u}from"styled-components";import c from"@charcoal-ui/styled";import{disabledSelector as s,px as d}from"@charcoal-ui/utils";import f from"warning";import{useSwitch as p}from"@react-aria/switch";import{useToggleState as h}from"react-stately";import{useTextField as v}from"@react-aria/textfield";import{useVisuallyHidden as b}from"@react-aria/visually-hidden";function g(){return g=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},g.apply(this,arguments)}function m(n,e){if(null==n)return{};var r,t,i={},a=Object.keys(n);for(t=0;t<a.length;t++)e.indexOf(r=a[t])>=0||(i[r]=n[r]);return i}function x(n,e){return e||(e=n.slice(0)),n.raw=e,n}function y(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 w(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 y(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)?y(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 E=["to","children"],k={Link:n.forwardRef(function(e,r){var t=e.to,i=e.children,a=m(e,E);/*#__PURE__*/return n.createElement("a",g({href:t,ref:r},a),i)})},C=n.createContext(k);function S(e){var r=e.children;/*#__PURE__*/return n.createElement(C.Provider,{value:g({},k,e.components)},r)}function R(){return e(C)}var z,P,L,O,q,N,D,T,M,j=c(l),H=["onClick","disabled"],I=n.forwardRef(function(e,r){var t=R().Link;if("to"in e){var i=e.onClick,a=e.disabled,o=void 0!==a&&a,l=m(e,H);/*#__PURE__*/return n.createElement(X,g({},l,{as:o?void 0:t,onClick:o?void 0:i,"aria-disabled":o,ref:r}))}/*#__PURE__*/return n.createElement(F,g({},e,{ref:r}))}),A=u(z||(z=x(["\n  /* Clickable style */\n  cursor: pointer;\n\n  "," {\n    cursor: default;\n  }\n"])),s),F=l.button(P||(P=x(["\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"])),A),X=l.span(L||(L=x(["\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"])),A),G=["children","variant","size","fixed","disabled"],B=n.forwardRef(function(e,r){var t=e.children,i=e.variant,a=void 0===i?"Default":i,o=e.size,l=void 0===o?"M":o,u=e.fixed,c=void 0!==u&&u,s=e.disabled,d=void 0!==s&&s,f=m(e,G);/*#__PURE__*/return n.createElement(J,g({},f,{disabled:d,variant:a,size:l,fixed:c,ref:r}),t)}),J=l(I).withConfig({shouldForwardProp:function(n){return"fixed"!==n}}).attrs(function(n){return g({},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=x(["\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"],V=n.forwardRef(function(e,r){var t=e.variant,i=void 0===t?"Default":t,a=e.size,o=void 0===a?"M":a,l=e.icon,u=m(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 i=t[0];i!==r&&console.warn('IconButton with size "'+n+'" expect icon size "'+r+', but got "'+i+'"')}(o,l),/*#__PURE__*/n.createElement(Y,g({},u,{ref:r,variant:i,size:o}),/*#__PURE__*/n.createElement("pixiv-icon",{name:l}))}),Y=l(I).attrs(function(n){return g({},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))})(q||(q=x(["\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 $(t){var i=t.value,a=t.forceChecked,o=void 0!==a&&a,l=t.disabled,u=void 0!==l&&l,c=t.children,s=e(rn),d=s.name,p=s.selected,h=s.disabled,v=s.readonly,b=s.hasError,g=s.onChange;f(void 0!==d,'"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?');var m=i===p,x=u||h,y=v&&!m,w=r(function(n){g(n.currentTarget.value)},[g]);/*#__PURE__*/return n.createElement(Z,{"aria-disabled":x||y},/*#__PURE__*/n.createElement(_,{name:d,value:i,checked:o||m,hasError:b,onChange:w,disabled:x||y}),null!=c&&/*#__PURE__*/n.createElement(nn,null,c))}var K,Q,W,Z=l.label(N||(N=x(["\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 d(n.theme.spacing[4])},j(function(n){return[n.disabled]})),_=l.input.attrs({type:"radio"})(D||(D=x(["\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})),nn=l.div(T||(T=x(["\n  ","\n"])),j(function(n){return[n.typography(14)]})),en=l.div(M||(M=x(["\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: ",";\n"])),function(n){return d(n.theme.spacing[8])}),rn=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 tn(e){var i=e.className,a=e.label,o=e.name,l=e.onChange,u=e.disabled,c=e.readonly,s=e.hasError,d=e.children,f=t(e.defaultValue),p=f[0],h=f[1],v=r(function(n){h(n),l(n)},[l]);/*#__PURE__*/return n.createElement(rn.Provider,{value:{name:o,selected:p,disabled:null!=u&&u,readonly:null!=c&&c,hasError:null!=s&&s,onChange:v}},/*#__PURE__*/n.createElement(en,{role:"radiogroup","aria-orientation":"vertical","aria-label":a,"aria-invalid":s,className:i},d))}var an=["className","type"];function on(e){var r=e.disabled,t=e.className,o=i(function(){return g({},e,{"aria-label":"children"in e?void 0:e.label,isDisabled:e.disabled,isSelected:e.checked})},[e]),l=h(o),u=a(null),c=m(p(o,l,u).inputProps,an);/*#__PURE__*/return n.createElement(En,{className:t,"aria-disabled":r},/*#__PURE__*/n.createElement(Cn,g({},c,{ref:u})),"children"in e?/*#__PURE__*/n.createElement(kn,null,e.children):void 0)}var ln,un,cn,sn,dn,fn,pn,hn,vn,bn,gn,mn,xn,yn,wn,En=l.label(K||(K=x(["\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 d(n.theme.spacing[4])},j(function(n){return n.disabled}),s),kn=l.div(Q||(Q=x(["\n  ","\n"])),j(function(n){return n.typography(14)})),Cn=l.input.attrs({type:"checkbox"})(W||(W=x(["\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})),Sn=["style","className","label","required","requiredText","subLabel"],Rn=n.forwardRef(function(e,r){var t=e.style,i=e.className,a=e.label,o=e.required,l=void 0!==o&&o,u=e.requiredText,c=e.subLabel,s=m(e,Sn);/*#__PURE__*/return n.createElement(qn,{style:t,className:i},/*#__PURE__*/n.createElement(Pn,g({ref:r},s),a),l&&/*#__PURE__*/n.createElement(Ln,null,u),/*#__PURE__*/n.createElement(On,null,/*#__PURE__*/n.createElement("span",null,c)))}),zn=c(l),Pn=l.label(ln||(ln=x(["\n  ","\n"])),zn(function(n){return[n.typography(14).bold,n.font.text1]})),Ln=l.span(un||(un=x(["\n  ","\n"])),zn(function(n){return[n.typography(14),n.font.text3]})),On=l.div(cn||(cn=x(["\n  ","\n"])),zn(function(n){return[n.typography(14),n.font.text3.hover.press,n.outline.default.focus]})),qn=l.div(sn||(sn=x(["\n  display: inline-flex;\n  align-items: center;\n\n  > "," {\n    ","\n  }\n\n  > "," {\n    ","\n  }\n"])),Ln,zn(function(n){return n.margin.left(4)}),On,zn(function(n){return n.margin.left("auto")})),Nn=["onChange"],Dn=["onChange"],Tn=c(l);function Mn(){var n=arguments;return function(e){for(var r,t=w([].slice.call(n));!(r=t()).done;){var i=r.value;"function"==typeof i?i(e):null!==i&&(i.current=e)}}}function jn(n){return[].concat(n).length}var Hn=n.forwardRef(function(e,r){/*#__PURE__*/return n.createElement(void 0!==e.multiline&&e.multiline?An:In,g({ref:r},e))}),In=n.forwardRef(function(e,i){var o,l=e.onChange,u=m(e,Nn),c=u.className,s=u.showLabel,d=void 0!==s&&s,f=u.showCount,p=void 0!==f&&f,h=u.label,x=u.requiredText,y=u.subLabel,w=u.disabled,E=void 0!==w&&w,k=u.required,C=u.invalid,S=void 0!==C&&C,R=u.assistiveText,z=u.maxLength,P=b().visuallyHiddenProps,L=a(null),O=t(jn(null!=(o=u.value)?o:"")),q=O[0],N=O[1],D=r(function(n){var e=jn(n);void 0!==z&&e>z||(N(e),null==l||l(n))},[z,l]),T=v(g({inputElementType:"input",isDisabled:E,isRequired:k,validationState:S?"invalid":"valid",description:!S&&R,errorMessage:S&&R,onChange:D},u),L),M=T.inputProps,j=T.descriptionProps,H=T.errorMessageProps;/*#__PURE__*/return n.createElement(Fn,{className:c,isDisabled:E},/*#__PURE__*/n.createElement(Xn,g({label:h,requiredText:x,required:k,subLabel:y},T.labelProps,d?{}:P)),/*#__PURE__*/n.createElement(Gn,null,/*#__PURE__*/n.createElement(Bn,g({ref:Mn(i,L),invalid:S},M)),p&&z&&/*#__PURE__*/n.createElement(Vn,null,q,"/",z)),null!=R&&0!==R.length&&/*#__PURE__*/n.createElement($n,g({invalid:S},S?H:j),R))}),An=n.forwardRef(function(e,i){var l,u=e.onChange,c=m(e,Dn),s=c.className,d=c.showCount,f=void 0!==d&&d,p=c.showLabel,h=void 0!==p&&p,x=c.label,y=c.requiredText,w=c.subLabel,E=c.disabled,k=void 0!==E&&E,C=c.required,S=c.invalid,R=void 0!==S&&S,z=c.assistiveText,P=c.maxLength,L=c.autoHeight,O=void 0!==L&&L,q=c.rows,N=void 0===q?4:q,D=b().visuallyHiddenProps,T=a(null),M=a(null),j=t(jn(null!=(l=c.value)?l:"")),H=j[0],I=j[1],A=t(N),F=A[0],X=A[1],G=r(function(n){var e,r,t=null!=(e=null==(r=(n.value+"\n").match(/\n/g))?void 0:r.length)?e:1;N<=t&&X(t)},[N]),B=r(function(n){var e=jn(n);void 0!==P&&e>P||(I(e),O&&null!==T.current&&G(T.current),null==u||u(n))},[O,P,u,G]),J=v(g({inputElementType:"textarea",isDisabled:k,isRequired:C,validationState:R?"invalid":"valid",description:!R&&z,errorMessage:R&&z,onChange:B},c),M),U=J.inputProps,V=J.labelProps,Y=J.descriptionProps,$=J.errorMessageProps;return o(function(){O&&null!==T.current&&G(T.current)},[O,G]),/*#__PURE__*/n.createElement(Fn,{className:s,isDisabled:k},/*#__PURE__*/n.createElement(Xn,g({label:x,requiredText:y,required:C,subLabel:w},V,h?D:{})),/*#__PURE__*/n.createElement(Jn,{rows:F},/*#__PURE__*/n.createElement(Un,g({ref:Mn(T,i,M),invalid:R,rows:F},U)),f&&/*#__PURE__*/n.createElement(Yn,null,H)),null!=z&&0!==z.length&&/*#__PURE__*/n.createElement($n,g({invalid:R},R?$:Y),z))}),Fn=l.div(dn||(dn=x(["\n  display: flex;\n  flex-direction: column;\n\n  ","\n"])),function(n){return n.isDisabled&&{opacity:n.theme.elementEffect.disabled.opacity}}),Xn=l(Rn)(fn||(fn=x(["\n  ","\n"])),Tn(function(n){return n.margin.bottom(8)})),Gn=l.div(pn||(pn=x(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"]))),Bn=l.input(hn||(hn=x(["\n  border: none;\n  box-sizing: border-box;\n  outline: none;\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(40px / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) calc(8px / 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 Tn(function(e){return[e.bg.surface3.hover,e.outline.default.focus,n.invalid&&e.outline.assertive,e.font.text2]})},Tn(function(n){return n.font.text3})),Jn=l.div(vn||(vn=x(["\n  display: grid;\n  position: relative;\n\n  ",";\n"])),function(n){var e=n.rows;return u(bn||(bn=x(["\n    max-height: calc(22px * "," + 18px);\n  "])),e)}),Un=l.textarea(gn||(gn=x(["\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  resize: none;\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) calc(8px / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  ",";\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  ","\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){var e=n.rows;return u(mn||(mn=x(["\n    height: calc(22px / 0.875 * "," + 18px / 0.875);\n  "])),e)},function(n){return Tn(function(e){return[e.bg.surface3.hover,e.outline.default.focus,n.invalid&&e.outline.assertive,e.font.text2]})},Tn(function(n){return n.font.text3})),Vn=l.span(xn||(xn=x(["\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\n  ","\n"])),Tn(function(n){return[n.typography(14).preserveHalfLeading,n.font.text3]})),Yn=l.span(yn||(yn=x(["\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  ","\n"])),Tn(function(n){return[n.typography(14).preserveHalfLeading,n.font.text3]})),$n=l.p(wn||(wn=x(["\n  ","\n"])),function(n){return Tn(function(e){return[e.typography(14),e.margin.top(8),e.margin.bottom(0),e.font[n.invalid?"assertive":"text1"]]})});export{B as Button,I as Clickable,S as ComponentAbstraction,V as IconButton,$ as Radio,tn as RadioGroup,on as Switch,Hn as TextField,R as useComponentAbstraction};
+import n,{useContext as e,useCallback as r,useMemo as t,useRef as i,useState as a,useEffect as o}from"react";import l,{css as c}from"styled-components";import u from"@charcoal-ui/styled";import{disabledSelector as s,px as d}from"@charcoal-ui/utils";import f from"warning";import{useSwitch as p}from"@react-aria/switch";import{useToggleState as h}from"react-stately";import{useTextField as v}from"@react-aria/textfield";import{useVisuallyHidden as g}from"@react-aria/visually-hidden";function b(){return b=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},b.apply(this,arguments)}function m(n,e){if(null==n)return{};var r,t,i={},a=Object.keys(n);for(t=0;t<a.length;t++)e.indexOf(r=a[t])>=0||(i[r]=n[r]);return i}function x(n,e){return e||(e=n.slice(0)),n.raw=e,n}function y(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 w(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 y(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)?y(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 E=["to","children"],k={Link:n.forwardRef(function(e,r){var t=e.to,i=e.children,a=m(e,E);/*#__PURE__*/return n.createElement("a",b({href:t,ref:r},a),i)})},R=n.createContext(k);function C(e){var r=e.children;/*#__PURE__*/return n.createElement(R.Provider,{value:b({},k,e.components)},r)}function S(){return e(R)}var P,z,L,O,q,N,D,T,M,H=u(l),j=["onClick","disabled"],I=n.forwardRef(function(e,r){var t=S().Link;if("to"in e){var i=e.onClick,a=e.disabled,o=void 0!==a&&a,l=m(e,j);/*#__PURE__*/return n.createElement(X,b({},l,{as:o?void 0:t,onClick:o?void 0:i,"aria-disabled":o,ref:r}))}/*#__PURE__*/return n.createElement(F,b({},e,{ref:r}))}),A=c(P||(P=x(["\n  /* Clickable style */\n  cursor: pointer;\n\n  "," {\n    cursor: default;\n  }\n"])),s),F=l.button(z||(z=x(["\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"])),A),X=l.span(L||(L=x(["\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"])),A),G=["children","variant","size","fixed","disabled"],Y=n.forwardRef(function(e,r){var t=e.children,i=e.variant,a=void 0===i?"Default":i,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=m(e,G);/*#__PURE__*/return n.createElement(B,b({},f,{disabled:d,variant:a,size:l,fixed:u,ref:r}),t)}),B=l(I).withConfig({shouldForwardProp:function(n){return"fixed"!==n}}).attrs(function(n){return b({},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=x(["\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 H(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}),J=["variant","size","icon"],U=n.forwardRef(function(e,r){var t=e.variant,i=void 0===t?"Default":t,a=e.size,o=void 0===a?"M":a,l=e.icon,c=m(e,J);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 i=t[0];i!==r&&console.warn('IconButton with size "'+n+'" expect icon size "'+r+', but got "'+i+'"')}(o,l),/*#__PURE__*/n.createElement($,b({},c,{ref:r,variant:i,size:o}),/*#__PURE__*/n.createElement("pixiv-icon",{name:l}))}),$=l(I).attrs(function(n){return b({},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))})(q||(q=x(["\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 H(function(n){return[n.font[e],n.bg[r].hover.press,n.disabled,n.borderRadius("oval"),n.outline.default.focus]})});function K(t){var i=t.value,a=t.forceChecked,o=void 0!==a&&a,l=t.disabled,c=void 0!==l&&l,u=t.children,s=e(rn),d=s.name,p=s.selected,h=s.disabled,v=s.readonly,g=s.hasError,b=s.onChange;f(void 0!==d,'"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?');var m=i===p,x=c||h,y=v&&!m,w=r(function(n){b(n.currentTarget.value)},[b]);/*#__PURE__*/return n.createElement(Z,{"aria-disabled":x||y},/*#__PURE__*/n.createElement(_,{name:d,value:i,checked:o||m,hasError:g,onChange:w,disabled:x||y}),null!=u&&/*#__PURE__*/n.createElement(nn,null,u))}var Q,V,W,Z=l.label(N||(N=x(["\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 d(n.theme.spacing[4])},H(function(n){return[n.disabled]})),_=l.input.attrs({type:"radio"})(D||(D=x(["\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 H(function(n){return[n.borderRadius("oval"),n.bg.text5.hover.press,r&&n.outline.assertive]})},function(n){return n.theme.color.text4},H(function(n){return n.bg.brand.hover.press}),H(function(n){return[n.bg.text5.hover.press,n.borderRadius("oval")]}),H(function(n){return n.outline.default.focus})),nn=l.div(T||(T=x(["\n  ","\n"])),H(function(n){return[n.typography(14)]})),en=l.div(M||(M=x(["\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: ",";\n"])),function(n){return d(n.theme.spacing[8])}),rn=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 tn(e){var t=e.className,i=e.value,a=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(rn.Provider,{value:{name:o,selected:i,disabled:null!=c&&c,readonly:null!=u&&u,hasError:null!=s&&s,onChange:f}},/*#__PURE__*/n.createElement(en,{role:"radiogroup","aria-orientation":"vertical","aria-label":a,"aria-invalid":s,className:t},d))}var an=["className","type"];function on(e){var r=e.disabled,a=e.className,o=t(function(){return b({},e,{"aria-label":"children"in e?void 0:e.label,isDisabled:e.disabled,isSelected:e.checked})},[e]),l=h(o),c=i(null),u=m(p(o,l,c).inputProps,an);/*#__PURE__*/return n.createElement(Cn,{className:a,"aria-disabled":r},/*#__PURE__*/n.createElement(Pn,b({},u,{ref:c})),"children"in e?/*#__PURE__*/n.createElement(Sn,null,e.children):void 0)}var ln,cn,un,sn,dn,fn,pn,hn,vn,gn,bn,mn,xn,yn,wn,En,kn,Rn,Cn=l.label(Q||(Q=x(["\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 d(n.theme.spacing[4])},H(function(n){return n.disabled}),s),Sn=l.div(V||(V=x(["\n  ","\n"])),H(function(n){return n.typography(14)})),Pn=l.input.attrs({type:"checkbox"})(W||(W=x(["\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"])),H(function(n){return[n.borderRadius(16),n.height.px(16),n.bg.text4.hover.press,n.outline.default.focus]}),H(function(n){return[n.bg.text5.hover.press,n.borderRadius("oval")]}),H(function(n){return n.bg.brand.hover.press})),zn=["style","className","label","required","requiredText","subLabel"],Ln=n.forwardRef(function(e,r){var t=e.style,i=e.className,a=e.label,o=e.required,l=void 0!==o&&o,c=e.requiredText,u=e.subLabel,s=m(e,zn);/*#__PURE__*/return n.createElement(Tn,{style:t,className:i},/*#__PURE__*/n.createElement(qn,b({ref:r},s),a),l&&/*#__PURE__*/n.createElement(Nn,null,c),/*#__PURE__*/n.createElement(Dn,null,/*#__PURE__*/n.createElement("span",null,u)))}),On=u(l),qn=l.label(ln||(ln=x(["\n  ","\n"])),On(function(n){return[n.typography(14).bold,n.font.text1]})),Nn=l.span(cn||(cn=x(["\n  ","\n"])),On(function(n){return[n.typography(14),n.font.text3]})),Dn=l.div(un||(un=x(["\n  ","\n"])),On(function(n){return[n.typography(14),n.font.text3.hover.press,n.outline.default.focus]})),Tn=l.div(sn||(sn=x(["\n  display: inline-flex;\n  align-items: center;\n\n  > "," {\n    ","\n  }\n\n  > "," {\n    ","\n  }\n"])),Nn,On(function(n){return n.margin.left(4)}),Dn,On(function(n){return n.margin.left("auto")})),Mn=["onChange"],Hn=["onChange"],jn=u(l);function In(){var n=arguments;return function(e){for(var r,t=w([].slice.call(n));!(r=t()).done;){var i=r.value;"function"==typeof i?i(e):null!==i&&(i.current=e)}}}function An(n){return[].concat(n).length}var Fn=n.forwardRef(function(e,r){/*#__PURE__*/return n.createElement(void 0!==e.multiline&&e.multiline?Gn:Xn,b({ref:r},e))}),Xn=n.forwardRef(function(e,t){var l,c=e.onChange,u=m(e,Mn),s=u.className,d=u.showLabel,f=void 0!==d&&d,p=u.showCount,h=void 0!==p&&p,x=u.label,y=u.requiredText,w=u.subLabel,E=u.disabled,k=void 0!==E&&E,R=u.required,C=u.invalid,S=void 0!==C&&C,P=u.assistiveText,z=u.maxLength,L=u.prefix,O=void 0===L?"":L,q=u.suffix,N=void 0===q?"":q,D=g().visuallyHiddenProps,T=i(null),M=i(null),H=i(null),j=a(An(null!=(l=u.value)?l:"")),I=j[0],A=j[1],F=a(0),X=F[0],G=F[1],Y=a(0),B=Y[0],J=Y[1],U=r(function(n){var e=An(n);void 0!==z&&e>z||(A(e),null==c||c(n))},[z,c]),$=v(b({inputElementType:"input",isDisabled:k,isRequired:R,validationState:S?"invalid":"valid",description:!S&&P,errorMessage:S&&P,onChange:U},u),T),K=$.inputProps,Q=$.labelProps,V=$.descriptionProps,W=$.errorMessageProps;return o(function(){var n=new ResizeObserver(function(n){G(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(Yn,{className:s,isDisabled:k},/*#__PURE__*/n.createElement(Bn,b({label:x,requiredText:y,required:R,subLabel:w},Q,f?{}:D)),/*#__PURE__*/n.createElement(Jn,null,/*#__PURE__*/n.createElement(Un,{ref:M},/*#__PURE__*/n.createElement(Kn,null,O)),/*#__PURE__*/n.createElement(Qn,b({ref:In(t,T),invalid:S,extraLeftPadding:X,extraRightPadding:B},K)),/*#__PURE__*/n.createElement($n,{ref:H},/*#__PURE__*/n.createElement(Kn,null,N),h&&z&&/*#__PURE__*/n.createElement(Zn,null,I,"/",z))),null!=P&&0!==P.length&&/*#__PURE__*/n.createElement(ne,b({invalid:S},S?W:V),P))}),Gn=n.forwardRef(function(e,t){var l,c=e.onChange,u=m(e,Hn),s=u.className,d=u.showCount,f=void 0!==d&&d,p=u.showLabel,h=void 0!==p&&p,x=u.label,y=u.requiredText,w=u.subLabel,E=u.disabled,k=void 0!==E&&E,R=u.required,C=u.invalid,S=void 0!==C&&C,P=u.assistiveText,z=u.maxLength,L=u.autoHeight,O=void 0!==L&&L,q=u.rows,N=void 0===q?4:q,D=g().visuallyHiddenProps,T=i(null),M=i(null),H=a(An(null!=(l=u.value)?l:"")),j=H[0],I=H[1],A=a(N),F=A[0],X=A[1],G=r(function(n){var e,r,t=null!=(e=null==(r=(n.value+"\n").match(/\n/g))?void 0:r.length)?e:1;N<=t&&X(t)},[N]),Y=r(function(n){var e=An(n);void 0!==z&&e>z||(I(e),O&&null!==T.current&&G(T.current),null==c||c(n))},[O,z,c,G]),B=v(b({inputElementType:"textarea",isDisabled:k,isRequired:R,validationState:S?"invalid":"valid",description:!S&&P,errorMessage:S&&P,onChange:Y},u),M),J=B.inputProps,U=B.labelProps,$=B.descriptionProps,K=B.errorMessageProps;return o(function(){O&&null!==T.current&&G(T.current)},[O,G]),/*#__PURE__*/n.createElement(Yn,{className:s,isDisabled:k},/*#__PURE__*/n.createElement(Bn,b({label:x,requiredText:y,required:R,subLabel:w},U,h?D:{})),/*#__PURE__*/n.createElement(Vn,{rows:F},/*#__PURE__*/n.createElement(Wn,b({ref:In(T,t,M),invalid:S,rows:F},J)),f&&/*#__PURE__*/n.createElement(_n,null,j)),null!=P&&0!==P.length&&/*#__PURE__*/n.createElement(ne,b({invalid:S},S?K:$),P))}),Yn=l.div(dn||(dn=x(["\n  display: flex;\n  flex-direction: column;\n\n  ","\n"])),function(n){return n.isDisabled&&{opacity:n.theme.elementEffect.disabled.opacity}}),Bn=l(Ln)(fn||(fn=x(["\n  ","\n"])),jn(function(n){return n.margin.bottom(8)})),Jn=l.div(pn||(pn=x(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"]))),Un=l.span(hn||(hn=x(["\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n"]))),$n=l.span(vn||(vn=x(["\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\n  display: flex;\n  gap: 8px;\n"]))),Kn=l.span(gn||(gn=x(["\n  user-select: none;\n\n  ","\n"])),jn(function(n){return[n.typography(14).preserveHalfLeading,n.font.text2]})),Qn=l.input(bn||(bn=x(["\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-top: calc(9px / 0.875);\n  padding-bottom: calc(9px / 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 jn(function(e){return[e.bg.surface3.hover,e.outline.default.focus,n.invalid&&e.outline.assertive,e.font.text2]})},jn(function(n){return n.font.text3})),Vn=l.div(mn||(mn=x(["\n  display: grid;\n  position: relative;\n\n  ",";\n"])),function(n){var e=n.rows;return c(xn||(xn=x(["\n    max-height: calc(22px * "," + 18px);\n  "])),e)}),Wn=l.textarea(yn||(yn=x(["\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  resize: 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  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) calc(8px / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  ",";\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  ","\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){var e=n.rows;return c(wn||(wn=x(["\n    height: calc(22px / 0.875 * "," + 18px / 0.875);\n  "])),e)},function(n){return jn(function(e){return[e.bg.surface3.hover,e.outline.default.focus,n.invalid&&e.outline.assertive,e.font.text2]})},jn(function(n){return n.font.text3})),Zn=l.span(En||(En=x(["\n  ","\n"])),jn(function(n){return[n.typography(14).preserveHalfLeading,n.font.text3]})),_n=l.span(kn||(kn=x(["\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  ","\n"])),jn(function(n){return[n.typography(14).preserveHalfLeading,n.font.text3]})),ne=l.p(Rn||(Rn=x(["\n  ","\n"])),function(n){return jn(function(e){return[e.typography(14),e.margin.top(8),e.margin.bottom(0),e.font[n.invalid?"assertive":"text1"]]})});export{Y as Button,I as Clickable,C as ComponentAbstraction,U as IconButton,K as Radio,tn as RadioGroup,on as Switch,Fn as TextField,S as useComponentAbstraction};
 //# sourceMappingURL=index.module.js.map