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

package/dist/index.modern.js

@@ -1,11 +1,126 @@
-import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRef as i,useState as o,useEffect as l}from"react";import s,{css as c}from"styled-components";import{createTheme as d}from"@charcoal-ui/styled";import{disabledSelector as u,px as p}from"@charcoal-ui/utils";import f from"warning";import{useSwitch as h}from"@react-aria/switch";import{useToggleState as g}from"react-stately";import{useTextField as b}from"@react-aria/textfield";import{useVisuallyHidden as m}from"@react-aria/visually-hidden";import"@charcoal-ui/icons";function v(){return v=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},v.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 y=["to","children"],w={Link:e.forwardRef(function(t,r){let{to:n,children:a}=t,i=x(t,y);/*#__PURE__*/return e.createElement("a",v({href:n,ref:r},i),a)})},E=e.createContext(w);function $({children:t,components:r}){/*#__PURE__*/return e.createElement(E.Provider,{value:v({},w,r)},t)}function k(){return t(E)}const C=d(s);let R,P,S,z=e=>e;const L=["onClick","disabled"],N=e.forwardRef(function(t,r){const{Link:n}=k();if("to"in t){const{onClick:a,disabled:i=!1}=t,o=x(t,L);/*#__PURE__*/return e.createElement(q,v({},o,{as:i?void 0:n,onClick:i?void 0:a,"aria-disabled":i,ref:r}))}/*#__PURE__*/return e.createElement(T,v({},t,{ref:r}))}),O=c(R||(R=z`
+import React, { useContext, useCallback, createContext, useMemo, useRef, useState, useEffect, useImperativeHandle } from 'react';
+export { SSRProvider } from '@react-aria/ssr';
+import styled, { css, keyframes } from 'styled-components';
+import { createTheme } from '@charcoal-ui/styled';
+import { disabledSelector, px } from '@charcoal-ui/utils';
+import warning from 'warning';
+import { useSwitch } from '@react-aria/switch';
+import { useToggleState } from 'react-stately';
+import { useTextField } from '@react-aria/textfield';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import '@charcoal-ui/icons';
+import { transparentize } from 'polished';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+const _excluded$7 = ["to", "children"];
+const DefaultLink = React.forwardRef(function DefaultLink(_ref, ref) {
+  let {
+    to,
+    children
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: to,
+    ref: ref
+  }, rest), children);
+});
+const DefaultValue = {
+  Link: DefaultLink
+};
+const ComponentAbstractionContext = React.createContext(DefaultValue);
+function ComponentAbstraction({
+  children,
+  components
+}) {
+  return /*#__PURE__*/React.createElement(ComponentAbstractionContext.Provider, {
+    value: _extends({}, DefaultValue, components)
+  }, children);
+}
+function useComponentAbstraction() {
+  return useContext(ComponentAbstractionContext);
+}
+
+/**
+ * 今後ポートされる予定の汎用的な関数群
+ */
+function unreachable(value) {
+  throw new Error(arguments.length === 0 ? 'unreachable' : `unreachable (${JSON.stringify(value)})`);
+}
+
+const theme$2 = createTheme(styled);
+
+let _$8 = t => t,
+    _t$8,
+    _t2$6,
+    _t3$6;
+
+const _excluded$6 = ["onClick", "disabled"];
+const Clickable = React.forwardRef(function Clickable(props, ref) {
+  const {
+    Link
+  } = useComponentAbstraction();
+
+  if ('to' in props) {
+    const {
+      onClick,
+      disabled = false
+    } = props,
+          rest = _objectWithoutPropertiesLoose(props, _excluded$6);
+
+    return /*#__PURE__*/React.createElement(A, _extends({}, rest, {
+      as: disabled ? undefined : Link,
+      onClick: disabled ? undefined : onClick,
+      "aria-disabled": disabled,
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(Button$1, _extends({}, props, {
+      ref: ref
+    }));
+  }
+});
+const clickableCss = css(_t$8 || (_t$8 = _$8`
   /* Clickable style */
   cursor: pointer;
 
   ${0} {
     cursor: default;
   }
-`),u),T=s.button(P||(P=z`
+`), disabledSelector);
+const Button$1 = styled.button(_t2$6 || (_t2$6 = _$8`
   /* Reset button appearance */
   appearance: none;
   background: transparent;
@@ -40,7 +155,8 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   }
 
   ${0}
-`),O),q=s.span(S||(S=z`
+`), clickableCss);
+const A = styled.span(_t3$6 || (_t3$6 = _$8`
   /* Reset a-tag appearance */
   color: inherit;
 
@@ -53,7 +169,37 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   }
 
   ${0}
-`),O);let D;const M=["children","variant","size","fixed","disabled"],H=e.forwardRef(function(t,r){let{children:n,variant:a="Default",size:i="M",fixed:o=!1,disabled:l=!1}=t,s=x(t,M);/*#__PURE__*/return e.createElement(G,v({},s,{disabled:l,variant:a,size:i,fixed:o,ref:r}),n)}),G=s(N).withConfig({shouldForwardProp:e=>"fixed"!==e}).attrs(function(e){return v({},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)`
+`), clickableCss);
+
+let _$7 = t => t,
+    _t$7;
+
+const _excluded$5 = ["children", "variant", "size", "fixed", "disabled"];
+const Button = React.forwardRef(function Button(_ref, ref) {
+  let {
+    children,
+    variant = 'Default',
+    size = 'M',
+    fixed = false,
+    disabled = false
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+
+  return /*#__PURE__*/React.createElement(StyledButton, _extends({}, rest, {
+    disabled: disabled,
+    variant: variant,
+    size: size,
+    fixed: fixed,
+    ref: ref
+  }), children);
+});
+const StyledButton = styled(Clickable).withConfig({
+  shouldForwardProp(prop) {
+    // fixed は <button> 要素に渡ってはいけない
+    return prop !== 'fixed';
+  }
+
+}).attrs(styledProps$1)(_t$7 || (_t$7 = _$7`
   width: ${0};
   display: inline-grid;
   align-items: center;
@@ -66,7 +212,87 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
 
   /* よく考えたらheight=32って定義が存在しないな... */
   height: ${0}px;
-`),e=>e.fixed?"stretch":"min-content",e=>C(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 j;const F=["variant","size","icon"],I=e.forwardRef(function(t,r){let{variant:n="Default",size:a="M",icon:i}=t,o=x(t,F);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(B,v({},o,{ref:r,variant:n,size:a}),/*#__PURE__*/e.createElement("pixiv-icon",{name:i}))}),B=s(N).attrs(function(e){return v({},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))})(j||(j=(e=>e)`
+`), p => p.fixed ? 'stretch' : 'min-content', p => theme$2(o => [o.font[p.font].hover.press, o.bg[p.background].hover.press, o.typography(14).bold.preserveHalfLeading, o.padding.horizontal(p.padding), o.disabled, o.borderRadius('oval'), o.outline.default.focus]), p => p.height);
+
+function styledProps$1(props) {
+  return _extends({}, props, variantToProps$1(props.variant), sizeToProps$1(props.size));
+}
+
+function variantToProps$1(variant) {
+  switch (variant) {
+    case 'Overlay':
+      return {
+        font: 'text5',
+        background: 'surface4'
+      };
+
+    case 'Default':
+      return {
+        font: 'text2',
+        background: 'surface3'
+      };
+
+    case 'Primary':
+      return {
+        font: 'text5',
+        background: 'brand'
+      };
+
+    case 'Navigation':
+      return {
+        font: 'text5',
+        background: 'surface6'
+      };
+
+    case 'Danger':
+      return {
+        font: 'text5',
+        background: 'assertive'
+      };
+
+    default:
+      return unreachable(variant);
+  }
+}
+
+function sizeToProps$1(size) {
+  switch (size) {
+    case 'S':
+      return {
+        height: 32,
+        padding: 16
+      };
+
+    case 'M':
+      return {
+        height: 40,
+        padding: 24
+      };
+  }
+}
+
+let _$6 = t => t,
+    _t$6;
+
+const _excluded$4 = ["variant", "size", "icon"];
+const IconButton = React.forwardRef(function IconButtonInner(_ref, ref) {
+  let {
+    variant = 'Default',
+    size = 'M',
+    icon
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+
+  validateIconSize(size, icon);
+  return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, rest, {
+    ref: ref,
+    variant: variant,
+    size: size
+  }), /*#__PURE__*/React.createElement("pixiv-icon", {
+    name: icon
+  }));
+});
+const StyledIconButton = styled(Clickable).attrs(styledProps)(_t$6 || (_t$6 = _$6`
   user-select: none;
 
   width: ${0}px;
@@ -76,7 +302,125 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   justify-content: center;
 
   ${0}
-`),e=>e.width,e=>e.height,({font:e,background:t})=>C(r=>[r.font[e],r.bg[t].hover.press,r.disabled,r.borderRadius("oval"),r.outline.default.focus]));let X,A,Y,J,K=e=>e;function Q({value:n,forceChecked:a=!1,disabled:i=!1,children:o}){const{name:l,selected:s,disabled:c,readonly:d,hasError:u,onChange:p}=t(_);f(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=>{p(e.currentTarget.value)},[p]);/*#__PURE__*/return e.createElement(U,{"aria-disabled":g||b},/*#__PURE__*/e.createElement(V,{name:l,value:n,checked:a||h,hasError:u,onChange:m,disabled:g||b}),null!=o&&/*#__PURE__*/e.createElement(W,null,o))}const U=s.label(X||(X=K`
+`), p => p.width, p => p.height, ({
+  font,
+  background
+}) => theme$2(o => [o.font[font], o.bg[background].hover.press, o.disabled, o.borderRadius('oval'), o.outline.default.focus]));
+
+function styledProps(props) {
+  return _extends({}, props, variantToProps(props.variant), sizeToProps(props.size));
+}
+
+function variantToProps(variant) {
+  switch (variant) {
+    case 'Default':
+      return {
+        font: 'text3',
+        background: 'transparent'
+      };
+
+    case 'Overlay':
+      return {
+        font: 'text5',
+        background: 'surface4'
+      };
+  }
+}
+
+function sizeToProps(size) {
+  switch (size) {
+    case 'XS':
+      return {
+        width: 20,
+        height: 20
+      };
+
+    case 'S':
+      return {
+        width: 32,
+        height: 32
+      };
+
+    case 'M':
+      return {
+        width: 40,
+        height: 40
+      };
+  }
+}
+/**
+ * validates matches of size and icon
+ */
+
+
+function validateIconSize(size, icon) {
+  let requiredIconSize;
+
+  switch (size) {
+    case 'XS':
+      requiredIconSize = '16';
+      break;
+
+    case 'S':
+    case 'M':
+      requiredIconSize = '24';
+      break;
+  } // アイコン名は サイズ/名前
+
+
+  const result = /^[0-9]*/.exec(icon);
+
+  if (result == null) {
+    throw new Error('Invalid icon name');
+  }
+
+  const [iconSize] = result;
+
+  if (iconSize !== requiredIconSize) {
+    // eslint-disable-next-line no-console
+    console.warn(`IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`);
+  }
+}
+
+let _$5 = t => t,
+    _t$5,
+    _t2$5,
+    _t3$5,
+    _t4$3;
+function Radio({
+  value,
+  forceChecked = false,
+  disabled = false,
+  children
+}) {
+  const {
+    name,
+    selected,
+    disabled: isParentDisabled,
+    readonly,
+    hasError,
+    onChange
+  } = useContext(RadioGroupContext);
+  warning( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  name !== undefined, `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`);
+  const isSelected = value === selected;
+  const isDisabled = disabled || isParentDisabled;
+  const isReadonly = readonly && !isSelected;
+  const handleChange = useCallback(e => {
+    onChange(e.currentTarget.value);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(RadioRoot, {
+    "aria-disabled": isDisabled || isReadonly
+  }, /*#__PURE__*/React.createElement(RadioInput, {
+    name: name,
+    value: value,
+    checked: forceChecked || isSelected,
+    hasError: hasError,
+    onChange: handleChange,
+    disabled: isDisabled || isReadonly
+  }), children != null && /*#__PURE__*/React.createElement(RadioLabel, null, children));
+}
+const RadioRoot = styled.label(_t$5 || (_t$5 = _$5`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: ${0};
@@ -84,7 +428,12 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   cursor: pointer;
 
   ${0}
-`),({theme:e})=>p(e.spacing[4]),C(e=>[e.disabled])),V=s.input.attrs({type:"radio"})(A||(A=K`
+`), ({
+  theme
+}) => px(theme.spacing[4]), theme$2(o => [o.disabled]));
+const RadioInput = styled.input.attrs({
+  type: 'radio'
+})(_t2$5 || (_t2$5 = _$5`
   /** Make prior to browser default style */
   &[type='radio'] {
     appearance: none;
@@ -120,13 +469,140 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
 
     ${0}
   }
-`),({hasError:e=!1})=>C(t=>[t.borderRadius("oval"),t.bg.text5.hover.press,e&&t.outline.assertive]),({theme:e})=>e.color.text4,C(e=>e.bg.brand.hover.press),C(e=>[e.bg.text5.hover.press,e.borderRadius("oval")]),C(e=>e.outline.default.focus)),W=s.div(Y||(Y=K`
+`), ({
+  hasError: _hasError = false
+}) => theme$2(o => [o.borderRadius('oval'), o.bg.text5.hover.press, _hasError && o.outline.assertive]), ({
+  theme
+}) => theme.color.text4, theme$2(o => o.bg.brand.hover.press), theme$2(o => [o.bg.text5.hover.press, o.borderRadius('oval')]), theme$2(o => o.outline.default.focus));
+const RadioLabel = styled.div(_t3$5 || (_t3$5 = _$5`
   ${0}
-`),C(e=>[e.typography(14)])),Z=s.div(J||(J=K`
+`), theme$2(o => [o.typography(14)])); // TODO: use (or polyfill) flex gap
+
+const StyledRadioGroup = styled.div(_t4$3 || (_t4$3 = _$5`
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: ${0};
-`),({theme:e})=>p(e.spacing[8])),_=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 ee({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(_.Provider,{value:{name:i,selected:n,disabled:null!=l&&l,readonly:null!=s&&s,hasError:null!=c&&c,onChange:u}},/*#__PURE__*/e.createElement(Z,{role:"radiogroup","aria-orientation":"vertical","aria-label":a,"aria-invalid":c,className:t},d))}const te=n({name:void 0,selected:[],disabled:!1,readonly:!1,hasError:!1,onChange(){throw new Error("Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<SelectGroup />` ?")}});let re,ne,ae,ie,oe,le=e=>e;function se({value:n,forceChecked:a=!1,disabled:i=!1,onChange:o,variant:l="default",children:s}){const{name:c,selected:d,disabled:u,readonly:p,hasError:h,onChange:g}=t(te);f(void 0!==c,'"name" is not Provided for <Select>. Perhaps you forgot to wrap with <SelectGroup> ?');const b=d.includes(n)||a,m=i||u||p,v=r(e=>{e.currentTarget instanceof HTMLInputElement&&(o&&o({value:n,selected:e.currentTarget.checked}),g({value:n,selected:e.currentTarget.checked}))},[o,g,n]);/*#__PURE__*/return e.createElement(ce,{"aria-disabled":m},/*#__PURE__*/e.createElement(ue,{name:c,value:n,hasError:h,checked:b,disabled:m,onChange:v,overlay:"overlay"===l,"aria-invalid":h}),/*#__PURE__*/e.createElement(pe,{overlay:"overlay"===l,hasError:h,"aria-hidden":!0},/*#__PURE__*/e.createElement("pixiv-icon",{name:"24/Check","unsafe-non-guideline-scale":16/24})),Boolean(s)&&/*#__PURE__*/e.createElement(de,null,s))}const ce=s.label(re||(re=le`
+`), ({
+  theme
+}) => px(theme.spacing[8]));
+const RadioGroupContext = React.createContext({
+  name: undefined,
+  selected: undefined,
+  disabled: false,
+  readonly: false,
+  hasError: false,
+
+  onChange() {
+    throw new Error('Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?');
+  }
+
+});
+function RadioGroup({
+  className,
+  value,
+  label,
+  name,
+  onChange,
+  disabled,
+  readonly,
+  hasError,
+  children
+}) {
+  const handleChange = useCallback(next => {
+    onChange(next);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+    value: {
+      name,
+      selected: value,
+      disabled: disabled != null ? disabled : false,
+      readonly: readonly != null ? readonly : false,
+      hasError: hasError != null ? hasError : false,
+      onChange: handleChange
+    }
+  }, /*#__PURE__*/React.createElement(StyledRadioGroup, {
+    role: "radiogroup",
+    "aria-orientation": "vertical",
+    "aria-label": label,
+    "aria-invalid": hasError,
+    className: className
+  }, children));
+}
+
+const SelectGroupContext = createContext({
+  name: undefined,
+  selected: [],
+  disabled: false,
+  readonly: false,
+  hasError: false,
+
+  onChange() {
+    throw new Error('Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<SelectGroup />` ?');
+  }
+
+});
+
+let _$4 = t => t,
+    _t$4,
+    _t2$4,
+    _t3$4,
+    _t4$2,
+    _t5$1;
+function Select({
+  value,
+  forceChecked = false,
+  disabled = false,
+  onChange,
+  variant = 'default',
+  children
+}) {
+  const {
+    name,
+    selected,
+    disabled: parentDisabled,
+    readonly,
+    hasError,
+    onChange: parentOnChange
+  } = useContext(SelectGroupContext);
+  warning( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  name !== undefined, `"name" is not Provided for <Select>. Perhaps you forgot to wrap with <SelectGroup> ?`);
+  const isSelected = selected.includes(value) || forceChecked;
+  const isDisabled = disabled || parentDisabled || readonly;
+  const handleChange = useCallback(event => {
+    if (!(event.currentTarget instanceof HTMLInputElement)) {
+      return;
+    }
+
+    if (onChange) onChange({
+      value,
+      selected: event.currentTarget.checked
+    });
+    parentOnChange({
+      value,
+      selected: event.currentTarget.checked
+    });
+  }, [onChange, parentOnChange, value]);
+  return /*#__PURE__*/React.createElement(SelectRoot, {
+    "aria-disabled": isDisabled
+  }, /*#__PURE__*/React.createElement(SelectInput, {
+    name,
+    value,
+    hasError,
+    checked: isSelected,
+    disabled: isDisabled,
+    onChange: handleChange,
+    overlay: variant === 'overlay',
+    "aria-invalid": hasError
+  }), /*#__PURE__*/React.createElement(SelectInputOverlay, {
+    overlay: variant === 'overlay',
+    hasError: hasError,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("pixiv-icon", {
+    name: "24/Check",
+    "unsafe-non-guideline-scale": 16 / 24
+  })), Boolean(children) && /*#__PURE__*/React.createElement(SelectLabel, null, children));
+}
+const SelectRoot = styled.label(_t$4 || (_t$4 = _$4`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -137,11 +613,17 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   }
   gap: ${0};
   ${0}
-`),u,({theme:e})=>p(e.spacing[4]),C(e=>e.disabled)),de=s.div(ne||(ne=le`
+`), disabledSelector, ({
+  theme
+}) => px(theme.spacing[4]), theme$2(o => o.disabled));
+const SelectLabel = styled.div(_t2$4 || (_t2$4 = _$4`
   display: flex;
   align-items: center;
   ${0}
-`),C(e=>[e.typography(14),e.font.text1])),ue=s.input.attrs({type:"checkbox"})(ae||(ae=le`
+`), theme$2(o => [o.typography(14), o.font.text1]));
+const SelectInput = styled.input.attrs({
+  type: 'checkbox'
+})(_t3$4 || (_t3$4 = _$4`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -155,7 +637,11 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
 
     ${0};
   }
-`),C(e=>e.bg.brand.hover.press),({hasError:e,overlay:t})=>C(r=>[r.bg.text3.hover.press,r.borderRadius("oval"),e&&!t&&r.outline.assertive,t&&r.bg.surface4])),pe=s.div(ie||(ie=le`
+`), theme$2(o => o.bg.brand.hover.press), ({
+  hasError,
+  overlay
+}) => theme$2(o => [o.bg.text3.hover.press, o.borderRadius('oval'), hasError && !overlay && o.outline.assertive, overlay && o.bg.surface4]));
+const SelectInputOverlay = styled.div(_t4$2 || (_t4$2 = _$4`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -167,11 +653,92 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   ${0}
 
   ${0}
-`),({hasError:e,overlay:t})=>C(r=>[r.width.px(24),r.height.px(24),r.borderRadius("oval"),r.font.text5,e&&t&&r.outline.assertive]),({overlay:e})=>e&&c(oe||(oe=le`
+`), ({
+  hasError,
+  overlay
+}) => theme$2(o => [o.width.px(24), o.height.px(24), o.borderRadius('oval'), o.font.text5, hasError && overlay && o.outline.assertive]), ({
+  overlay
+}) => overlay && css(_t5$1 || (_t5$1 = _$4`
       border-color: ${0};
       border-width: 2px;
       border-style: solid;
-    `),({theme:e})=>e.color.text5));function fe({className:t,name:n,ariaLabel:a,selected:i,onChange:o,disabled:l=!1,readonly:s=!1,hasError:c=!1,children:d}){const u=r(e=>{const t=i.indexOf(e.value);e.selected?t<0&&o([...i,e.value]):t>=0&&o([...i.slice(0,t),...i.slice(t+1)])},[o,i]);/*#__PURE__*/return e.createElement(te.Provider,{value:{name:n,selected:Array.from(new Set(i)),disabled:l,readonly:s,hasError:c,onChange:u}},/*#__PURE__*/e.createElement("div",{className:t,"aria-label":a,"data-testid":"SelectGroup"},d))}let he,ge,be,me=e=>e;const ve=["className","type"];function xe(t){const{disabled:r,className:n}=t,o=a(()=>v({},t,{"aria-label":"children"in t?void 0:t.label,isDisabled:t.disabled,isSelected:t.checked}),[t]),l=g(o),s=i(null),c=x(h(o,l,s).inputProps,ve);/*#__PURE__*/return e.createElement(ye,{className:n,"aria-disabled":r},/*#__PURE__*/e.createElement(Ee,v({},c,{ref:s})),"children"in t?/*#__PURE__*/e.createElement(we,null,t.children):void 0)}const ye=s.label(he||(he=me`
+    `), ({
+  theme
+}) => theme.color.text5));
+function SelectGroup({
+  className,
+  name,
+  ariaLabel,
+  selected,
+  onChange,
+  disabled = false,
+  readonly = false,
+  hasError = false,
+  children
+}) {
+  const handleChange = useCallback(payload => {
+    const index = selected.indexOf(payload.value);
+
+    if (payload.selected) {
+      if (index < 0) {
+        onChange([...selected, payload.value]);
+      }
+    } else {
+      if (index >= 0) {
+        onChange([...selected.slice(0, index), ...selected.slice(index + 1)]);
+      }
+    }
+  }, [onChange, selected]);
+  return /*#__PURE__*/React.createElement(SelectGroupContext.Provider, {
+    value: {
+      name,
+      selected: Array.from(new Set(selected)),
+      disabled,
+      readonly,
+      hasError,
+      onChange: handleChange
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    "aria-label": ariaLabel,
+    "data-testid": "SelectGroup"
+  }, children));
+}
+
+let _$3 = t => t,
+    _t$3,
+    _t2$3,
+    _t3$3;
+
+const _excluded$3 = ["className", "type"];
+function SwitchCheckbox(props) {
+  const {
+    disabled,
+    className
+  } = props;
+  const ariaSwitchProps = useMemo(() => _extends({}, props, {
+    // children がいない場合は aria-label をつけないといけない
+    'aria-label': 'children' in props ? undefined : props.label,
+    isDisabled: props.disabled,
+    isSelected: props.checked
+  }), [props]);
+  const state = useToggleState(ariaSwitchProps);
+  const ref = useRef(null);
+
+  const _useSwitch = useSwitch(ariaSwitchProps, state, ref),
+        rest = _objectWithoutPropertiesLoose(_useSwitch.inputProps, _excluded$3);
+
+  return /*#__PURE__*/React.createElement(Label$1, {
+    className: className,
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React.createElement(SwitchInput, _extends({}, rest, {
+    ref: ref
+  })), 'children' in props ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/destructuring-assignment
+  React.createElement(LabelInner, null, props.children) : undefined);
+}
+const Label$1 = styled.label(_t$3 || (_t$3 = _$3`
   display: inline-grid;
   grid-template-columns: auto 1fr;
   gap: ${0};
@@ -183,9 +750,15 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   ${0} {
     cursor: default;
   }
-`),({theme:e})=>p(e.spacing[4]),C(e=>e.disabled),u),we=s.div(ge||(ge=me`
+`), ({
+  theme
+}) => px(theme.spacing[4]), theme$2(o => o.disabled), disabledSelector);
+const LabelInner = styled.div(_t2$3 || (_t2$3 = _$3`
   ${0}
-`),C(e=>e.typography(14))),Ee=s.input.attrs({type:"checkbox"})(be||(be=me`
+`), theme$2(o => o.typography(14)));
+const SwitchInput = styled.input.attrs({
+  type: 'checkbox'
+})(_t3$3 || (_t3$3 = _$3`
   &[type='checkbox'] {
     appearance: none;
     display: inline-flex;
@@ -218,13 +791,44 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
       }
     }
   }
-`),C(e=>[e.borderRadius(16),e.height.px(16),e.bg.text4.hover.press,e.outline.default.focus]),C(e=>[e.bg.text5.hover.press,e.borderRadius("oval")]),C(e=>e.bg.brand.hover.press));let $e,ke,Ce,Re,Pe=e=>e;const Se=["style","className","label","required","requiredText","subLabel"],ze=e.forwardRef(function(t,r){let{style:n,className:a,label:i,required:o=!1,requiredText:l,subLabel:s}=t,c=x(t,Se);/*#__PURE__*/return e.createElement(qe,{style:n,className:a},/*#__PURE__*/e.createElement(Ne,v({ref:r},c),i),o&&/*#__PURE__*/e.createElement(Oe,null,l),/*#__PURE__*/e.createElement(Te,null,/*#__PURE__*/e.createElement("span",null,s)))}),Le=d(s),Ne=s.label($e||($e=Pe`
+`), theme$2(o => [o.borderRadius(16), o.height.px(16), o.bg.text4.hover.press, o.outline.default.focus]), theme$2(o => [o.bg.text5.hover.press, o.borderRadius('oval')]), theme$2(o => o.bg.brand.hover.press));
+
+let _$2 = t => t,
+    _t$2,
+    _t2$2,
+    _t3$2,
+    _t4$1;
+
+const _excluded$2 = ["style", "className", "label", "required", "requiredText", "subLabel"];
+const FieldLabel = React.forwardRef(function FieldLabel(_ref, ref) {
+  let {
+    style,
+    className,
+    label,
+    required = false,
+    requiredText,
+    subLabel
+  } = _ref,
+      labelProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  return /*#__PURE__*/React.createElement(FieldLabelWrapper, {
+    style: style,
+    className: className
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    ref: ref
+  }, labelProps), label), required && /*#__PURE__*/React.createElement(RequiredText, null, requiredText), /*#__PURE__*/React.createElement(SubLabelClickable, null, /*#__PURE__*/React.createElement("span", null, subLabel)));
+});
+const theme$1 = createTheme(styled);
+const Label = styled.label(_t$2 || (_t$2 = _$2`
   ${0}
-`),Le(e=>[e.typography(14).bold,e.font.text1])),Oe=s.span(ke||(ke=Pe`
+`), theme$1(o => [o.typography(14).bold, o.font.text1]));
+const RequiredText = styled.span(_t2$2 || (_t2$2 = _$2`
   ${0}
-`),Le(e=>[e.typography(14),e.font.text3])),Te=s.div(Ce||(Ce=Pe`
+`), theme$1(o => [o.typography(14), o.font.text3]));
+const SubLabelClickable = styled.div(_t3$2 || (_t3$2 = _$2`
   ${0}
-`),Le(e=>[e.typography(14),e.font.text3.hover.press,e.outline.default.focus])),qe=s.div(Re||(Re=Pe`
+`), theme$1(o => [o.typography(14), o.font.text3.hover.press, o.outline.default.focus]));
+const FieldLabelWrapper = styled.div(_t4$1 || (_t4$1 = _$2`
   display: inline-flex;
   align-items: center;
 
@@ -235,23 +839,280 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   > ${0} {
     ${0}
   }
-`),Oe,Le(e=>e.margin.left(4)),Te,Le(e=>e.margin.left("auto")));let De,Me,He,Ge,je,Fe,Ie,Be,Xe,Ae,Ye,Je,Ke,Qe,Ue=e=>e;const Ve=["onChange"],We=["onChange"],Ze=d(s);function _e(...e){return t=>{for(const r of e)"function"==typeof r?r(t):null!==r&&(r.current=t)}}function et(e){return Array.from(e).length}const tt=e.forwardRef(function(t,r){/*#__PURE__*/return e.createElement(void 0!==t.multiline&&t.multiline?nt:rt,v({ref:r},t))}),rt=e.forwardRef(function(t,n){var a;let{onChange:s}=t,c=x(t,Ve);const{className:d,showLabel:u=!1,showCount:p=!1,label:f,requiredText:h,subLabel:g,disabled:y=!1,required:w,invalid:E=!1,assistiveText:$,maxLength:k,prefix:C=null,suffix:R=null}=c,{visuallyHiddenProps:P}=m(),S=i(null),z=i(null),L=i(null),[N,O]=o(et(null!=(a=c.value)?a:"")),[T,q]=o(0),[D,M]=o(0),H=void 0===c.value,G=r(e=>{const t=et(e);void 0!==k&&t>k||(H&&O(t),null==s||s(e))},[k,H,s]);l(()=>{var e;O(et(null!=(e=c.value)?e:""))},[c.value]);const{inputProps:j,labelProps:F,descriptionProps:I,errorMessageProps:B}=b(v({inputElementType:"input",isDisabled:y,isRequired:w,validationState:E?"invalid":"valid",description:!E&&$,errorMessage:E&&$,onChange:G},c),S);return l(()=>{const e=new ResizeObserver(e=>{q(e[0].contentRect.width)}),t=new ResizeObserver(e=>{M(e[0].contentRect.width)});return null!==z.current&&e.observe(z.current),null!==L.current&&t.observe(L.current),()=>{t.disconnect(),e.disconnect()}},[]),/*#__PURE__*/e.createElement(at,{className:d,isDisabled:y},/*#__PURE__*/e.createElement(it,v({label:f,requiredText:h,required:w,subLabel:g},F,u?{}:P)),/*#__PURE__*/e.createElement(ot,null,/*#__PURE__*/e.createElement(lt,{ref:z},/*#__PURE__*/e.createElement(ct,null,C)),/*#__PURE__*/e.createElement(dt,v({ref:_e(n,S),invalid:E,extraLeftPadding:T,extraRightPadding:D},j)),/*#__PURE__*/e.createElement(st,{ref:L},/*#__PURE__*/e.createElement(ct,null,R),p&&/*#__PURE__*/e.createElement(ft,null,void 0!==k?`${N}/${k}`:N))),null!=$&&0!==$.length&&/*#__PURE__*/e.createElement(gt,v({invalid:E},E?B:I),$))}),nt=e.forwardRef(function(t,n){var a;let{onChange:s}=t,c=x(t,We);const{className:d,showCount:u=!1,showLabel:p=!1,label:f,requiredText:h,subLabel:g,disabled:y=!1,required:w,invalid:E=!1,assistiveText:$,maxLength:k,autoHeight:C=!1,rows:R=4}=c,{visuallyHiddenProps:P}=m(),S=i(null),z=i(null),[L,N]=o(et(null!=(a=c.value)?a:"")),[O,T]=o(R),q=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&&T(n)},[R]),D=void 0===c.value,M=r(e=>{const t=et(e);void 0!==k&&t>k||(D&&N(t),C&&null!==S.current&&q(S.current),null==s||s(e))},[C,k,D,s,q]);l(()=>{var e;N(et(null!=(e=c.value)?e:""))},[c.value]);const{inputProps:H,labelProps:G,descriptionProps:j,errorMessageProps:F}=b(v({inputElementType:"textarea",isDisabled:y,isRequired:w,validationState:E?"invalid":"valid",description:!E&&$,errorMessage:E&&$,onChange:M},c),z);return l(()=>{C&&null!==S.current&&q(S.current)},[C,q]),/*#__PURE__*/e.createElement(at,{className:d,isDisabled:y},/*#__PURE__*/e.createElement(it,v({label:f,requiredText:h,required:w,subLabel:g},G,p?{}:P)),/*#__PURE__*/e.createElement(ut,{invalid:E,rows:u?O+1:O},/*#__PURE__*/e.createElement(pt,v({ref:_e(S,n,z),rows:O,noBottomPadding:u},H)),u&&/*#__PURE__*/e.createElement(ht,null,void 0!==k?`${L}/${k}`:L)),null!=$&&0!==$.length&&/*#__PURE__*/e.createElement(gt,v({invalid:E},E?F:j),$))}),at=s.div(De||(De=Ue`
+`), RequiredText, theme$1(o => o.margin.left(4)), SubLabelClickable, theme$1(o => o.margin.left('auto')));
+
+let _$1 = t => t,
+    _t$1,
+    _t2$1,
+    _t3$1,
+    _t4,
+    _t5,
+    _t6,
+    _t7,
+    _t8,
+    _t9,
+    _t10,
+    _t11,
+    _t12,
+    _t13,
+    _t14;
+
+const _excluded$1 = ["onChange"],
+      _excluded2 = ["onChange"];
+const theme = createTheme(styled);
+
+function mergeRefs(...refs) {
+  return value => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref !== null) {
+        ref.current = value;
+      }
+    }
+  };
+}
+
+function countCodePointsInString(string) {
+  // [...string] とするとproduction buildで動かなくなる
+  // cf. https://twitter.com/f_subal/status/1497214727511891972
+  return Array.from(string).length;
+}
+
+const TextField = React.forwardRef(function TextField(props, ref) {
+  return props.multiline !== undefined && props.multiline ? /*#__PURE__*/React.createElement(MultiLineTextField, _extends({
+    ref: ref
+  }, props)) : /*#__PURE__*/React.createElement(SingleLineTextField, _extends({
+    ref: ref
+  }, props));
+});
+const SingleLineTextField = React.forwardRef(function SingleLineTextFieldInner(_ref, forwardRef) {
+  var _props$value;
+
+  let {
+    onChange
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  const {
+    className,
+    showLabel = false,
+    showCount = false,
+    label,
+    requiredText,
+    subLabel,
+    disabled = false,
+    required,
+    invalid = false,
+    assistiveText,
+    maxLength,
+    prefix = null,
+    suffix = null
+  } = props;
+  const {
+    visuallyHiddenProps
+  } = useVisuallyHidden();
+  const ariaRef = useRef(null);
+  const prefixRef = useRef(null);
+  const suffixRef = useRef(null);
+  const [count, setCount] = useState(countCodePointsInString((_props$value = props.value) != null ? _props$value : ''));
+  const [prefixWidth, setPrefixWidth] = useState(0);
+  const [suffixWidth, setSuffixWidth] = useState(0);
+  const nonControlled = props.value === undefined;
+  const handleChange = useCallback(value => {
+    const count = countCodePointsInString(value);
+
+    if (maxLength !== undefined && count > maxLength) {
+      return;
+    }
+
+    if (nonControlled) {
+      setCount(count);
+    }
+
+    onChange == null ? void 0 : onChange(value);
+  }, [maxLength, nonControlled, onChange]);
+  useEffect(() => {
+    var _props$value2;
+
+    setCount(countCodePointsInString((_props$value2 = props.value) != null ? _props$value2 : ''));
+  }, [props.value]);
+  const {
+    inputProps,
+    labelProps,
+    descriptionProps,
+    errorMessageProps
+  } = useTextField(_extends({
+    inputElementType: 'input',
+    isDisabled: disabled,
+    isRequired: required,
+    validationState: invalid ? 'invalid' : 'valid',
+    description: !invalid && assistiveText,
+    errorMessage: invalid && assistiveText,
+    onChange: handleChange
+  }, props), ariaRef);
+  useEffect(() => {
+    const prefixObserver = new ResizeObserver(entries => {
+      setPrefixWidth(entries[0].contentRect.width);
+    });
+    const suffixObserver = new ResizeObserver(entries => {
+      setSuffixWidth(entries[0].contentRect.width);
+    });
+
+    if (prefixRef.current !== null) {
+      prefixObserver.observe(prefixRef.current);
+    }
+
+    if (suffixRef.current !== null) {
+      suffixObserver.observe(suffixRef.current);
+    }
+
+    return () => {
+      suffixObserver.disconnect();
+      prefixObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(TextFieldRoot, {
+    className: className,
+    isDisabled: disabled
+  }, /*#__PURE__*/React.createElement(TextFieldLabel, _extends({
+    label: label,
+    requiredText: requiredText,
+    required: required,
+    subLabel: subLabel
+  }, labelProps, !showLabel ? visuallyHiddenProps : {})), /*#__PURE__*/React.createElement(StyledInputContainer, null, /*#__PURE__*/React.createElement(PrefixContainer, {
+    ref: prefixRef
+  }, /*#__PURE__*/React.createElement(Affix, null, prefix)), /*#__PURE__*/React.createElement(StyledInput, _extends({
+    ref: mergeRefs(forwardRef, ariaRef),
+    invalid: invalid,
+    extraLeftPadding: prefixWidth,
+    extraRightPadding: suffixWidth
+  }, inputProps)), /*#__PURE__*/React.createElement(SuffixContainer, {
+    ref: suffixRef
+  }, /*#__PURE__*/React.createElement(Affix, null, suffix), showCount && /*#__PURE__*/React.createElement(SingleLineCounter, null, maxLength !== undefined ? `${count}/${maxLength}` : count))), assistiveText != null && assistiveText.length !== 0 && /*#__PURE__*/React.createElement(AssistiveText, _extends({
+    invalid: invalid
+  }, invalid ? errorMessageProps : descriptionProps), assistiveText));
+});
+const MultiLineTextField = React.forwardRef(function MultiLineTextFieldInner(_ref2, forwardRef) {
+  var _props$value3;
+
+  let {
+    onChange
+  } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  const {
+    className,
+    showCount = false,
+    showLabel = false,
+    label,
+    requiredText,
+    subLabel,
+    disabled = false,
+    required,
+    invalid = false,
+    assistiveText,
+    maxLength,
+    autoHeight = false,
+    rows: initialRows = 4
+  } = props;
+  const {
+    visuallyHiddenProps
+  } = useVisuallyHidden();
+  const textareaRef = useRef(null);
+  const ariaRef = useRef(null);
+  const [count, setCount] = useState(countCodePointsInString((_props$value3 = props.value) != null ? _props$value3 : ''));
+  const [rows, setRows] = useState(initialRows);
+  const syncHeight = useCallback(textarea => {
+    var _$match$length, _$match;
+
+    const rows = ((_$match$length = (_$match = `${textarea.value}\n`.match(/\n/g)) == null ? void 0 : _$match.length) != null ? _$match$length : 0) || 1;
+    setRows(initialRows <= rows ? rows : initialRows);
+  }, [initialRows]);
+  const nonControlled = props.value === undefined;
+  const handleChange = useCallback(value => {
+    const count = countCodePointsInString(value);
+
+    if (maxLength !== undefined && count > maxLength) {
+      return;
+    }
+
+    if (nonControlled) {
+      setCount(count);
+    }
+
+    if (autoHeight && textareaRef.current !== null) {
+      syncHeight(textareaRef.current);
+    }
+
+    onChange == null ? void 0 : onChange(value);
+  }, [autoHeight, maxLength, nonControlled, onChange, syncHeight]);
+  useEffect(() => {
+    var _props$value4;
+
+    setCount(countCodePointsInString((_props$value4 = props.value) != null ? _props$value4 : ''));
+  }, [props.value]);
+  const {
+    inputProps,
+    labelProps,
+    descriptionProps,
+    errorMessageProps
+  } = useTextField(_extends({
+    inputElementType: 'textarea',
+    isDisabled: disabled,
+    isRequired: required,
+    validationState: invalid ? 'invalid' : 'valid',
+    description: !invalid && assistiveText,
+    errorMessage: invalid && assistiveText,
+    onChange: handleChange
+  }, props), ariaRef);
+  useEffect(() => {
+    if (autoHeight && textareaRef.current !== null) {
+      syncHeight(textareaRef.current);
+    }
+  }, [autoHeight, syncHeight]);
+  return /*#__PURE__*/React.createElement(TextFieldRoot, {
+    className: className,
+    isDisabled: disabled
+  }, /*#__PURE__*/React.createElement(TextFieldLabel, _extends({
+    label: label,
+    requiredText: requiredText,
+    required: required,
+    subLabel: subLabel
+  }, labelProps, !showLabel ? visuallyHiddenProps : {})), /*#__PURE__*/React.createElement(StyledTextareaContainer, {
+    invalid: invalid,
+    rows: showCount ? rows + 1 : rows
+  }, /*#__PURE__*/React.createElement(StyledTextarea, _extends({
+    ref: mergeRefs(textareaRef, forwardRef, ariaRef),
+    rows: rows,
+    noBottomPadding: showCount
+  }, inputProps)), showCount && /*#__PURE__*/React.createElement(MultiLineCounter, null, maxLength !== undefined ? `${count}/${maxLength}` : count)), assistiveText != null && assistiveText.length !== 0 && /*#__PURE__*/React.createElement(AssistiveText, _extends({
+    invalid: invalid
+  }, invalid ? errorMessageProps : descriptionProps), assistiveText));
+});
+const TextFieldRoot = styled.div(_t$1 || (_t$1 = _$1`
   display: flex;
   flex-direction: column;
 
   ${0}
-`),e=>e.isDisabled&&{opacity:e.theme.elementEffect.disabled.opacity}),it=s(ze)(Me||(Me=Ue`
+`), p => p.isDisabled && {
+  opacity: p.theme.elementEffect.disabled.opacity
+});
+const TextFieldLabel = styled(FieldLabel)(_t2$1 || (_t2$1 = _$1`
   ${0}
-`),Ze(e=>e.margin.bottom(8))),ot=s.div(He||(He=Ue`
+`), theme(o => o.margin.bottom(8)));
+const StyledInputContainer = styled.div(_t3$1 || (_t3$1 = _$1`
   height: 40px;
   display: grid;
   position: relative;
-`)),lt=s.span(Ge||(Ge=Ue`
+`));
+const PrefixContainer = styled.span(_t4 || (_t4 = _$1`
   position: absolute;
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
-`)),st=s.span(je||(je=Ue`
+`));
+const SuffixContainer = styled.span(_t5 || (_t5 = _$1`
   position: absolute;
   top: 50%;
   right: 8px;
@@ -259,11 +1120,13 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
 
   display: flex;
   gap: 8px;
-`)),ct=s.span(Fe||(Fe=Ue`
+`));
+const Affix = styled.span(_t6 || (_t6 = _$1`
   user-select: none;
 
   ${0}
-`),Ze(e=>[e.typography(14).preserveHalfLeading,e.font.text2])),dt=s.input(Ie||(Ie=Ue`
+`), theme(o => [o.typography(14).preserveHalfLeading, o.font.text2]));
+const StyledInput = styled.input(_t7 || (_t7 = _$1`
   border: none;
   box-sizing: border-box;
   outline: none;
@@ -288,7 +1151,8 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   &::placeholder {
     ${0}
   }
-`),e=>e.extraLeftPadding,e=>e.extraRightPadding,e=>Ze(t=>[t.bg.surface3.hover,t.outline.default.focus,e.invalid&&t.outline.assertive,t.font.text2]),Ze(e=>e.font.text3)),ut=s.div(Be||(Be=Ue`
+`), p => p.extraLeftPadding, p => p.extraRightPadding, p => theme(o => [o.bg.surface3.hover, o.outline.default.focus, p.invalid && o.outline.assertive, o.font.text2]), theme(o => o.font.text3));
+const StyledTextareaContainer = styled.div(_t8 || (_t8 = _$1`
   position: relative;
   overflow: hidden;
   padding: 0 8px;
@@ -300,9 +1164,12 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   }
 
   ${0};
-`),e=>Ze(t=>[t.bg.surface3.hover,e.invalid&&t.outline.assertive,t.font.text2,t.borderRadius(4)]),e=>Ze(t=>e.invalid?t.outline.assertive:t.outline.default),({rows:e})=>c(Xe||(Xe=Ue`
+`), p => theme(o => [o.bg.surface3.hover, p.invalid && o.outline.assertive, o.font.text2, o.borderRadius(4)]), p => theme(o => p.invalid ? o.outline.assertive : o.outline.default), ({
+  rows
+}) => css(_t9 || (_t9 = _$1`
     height: calc(22px * ${0} + 18px);
-  `),e)),pt=s.textarea(Ae||(Ae=Ue`
+  `), rows));
+const StyledTextarea = styled.textarea(_t10 || (_t10 = _$1`
   border: none;
   outline: none;
   resize: none;
@@ -335,17 +1202,120 @@ import e,{useContext as t,useCallback as r,createContext as n,useMemo as a,useRe
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
-`),e=>e.noBottomPadding?0:"",({rows:e=1})=>c(Ye||(Ye=Ue`
+`), p => p.noBottomPadding ? 0 : '', ({
+  rows: _rows = 1
+}) => css(_t11 || (_t11 = _$1`
     height: calc(22px / 0.875 * ${0});
-  `),e),Ze(e=>e.font.text3)),ft=s.span(Je||(Je=Ue`
+  `), _rows), theme(o => o.font.text3));
+const SingleLineCounter = styled.span(_t12 || (_t12 = _$1`
   ${0}
-`),Ze(e=>[e.typography(14).preserveHalfLeading,e.font.text3])),ht=s.span(Ke||(Ke=Ue`
+`), theme(o => [o.typography(14).preserveHalfLeading, o.font.text3]));
+const MultiLineCounter = styled.span(_t13 || (_t13 = _$1`
   position: absolute;
   bottom: 9px;
   right: 8px;
 
   ${0}
-`),Ze(e=>[e.typography(14).preserveHalfLeading,e.font.text3])),gt=s.p(Qe||(Qe=Ue`
+`), theme(o => [o.typography(14).preserveHalfLeading, o.font.text3]));
+const AssistiveText = styled.p(_t14 || (_t14 = _$1`
   ${0}
-`),e=>Ze(t=>[t.typography(14),t.margin.top(8),t.margin.bottom(0),t.font[e.invalid?"assertive":"text1"]])),bt=["name","scale","unsafeNonGuidelineScale","className"],mt=e.forwardRef(function(t,r){let{name:n,scale:a,unsafeNonGuidelineScale:i,className:o}=t,l=x(t,bt);/*#__PURE__*/return e.createElement("pixiv-icon",v({ref:r,name:n,scale:a,"unsafe-non-guideline-scale":i,class:o},l))});export{H as Button,N as Clickable,$ as ComponentAbstraction,mt as Icon,I as IconButton,Q as Radio,ee as RadioGroup,se as Select,fe as SelectGroup,xe as Switch,tt as TextField,k as useComponentAbstraction};
+`), p => theme(o => [o.typography(14), o.margin.top(8), o.margin.bottom(0), o.font[p.invalid ? 'assertive' : 'text1']]));
+
+const _excluded = ["name", "scale", "unsafeNonGuidelineScale", "className"];
+const Icon$1 = React.forwardRef(function IconInner(_ref, ref) {
+  let {
+    name,
+    scale,
+    unsafeNonGuidelineScale,
+    className
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("pixiv-icon", _extends({
+    ref: ref,
+    name: name,
+    scale: scale,
+    "unsafe-non-guideline-scale": unsafeNonGuidelineScale,
+    class: className
+  }, rest));
+});
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3;
+function LoadingSpinner({
+  size = 48,
+  padding = 16,
+  transparent = false
+}) {
+  return /*#__PURE__*/React.createElement(LoadingSpinnerRoot, {
+    size: size,
+    padding: padding,
+    transparent: transparent
+  }, /*#__PURE__*/React.createElement(LoadingSpinnerIcon, null));
+}
+const LoadingSpinnerRoot = styled.div.attrs({
+  role: 'progressbar'
+})(_t || (_t = _`
+  margin: auto;
+  padding: ${0}px;
+  border-radius: 8px;
+  font-size: ${0}px;
+  width: ${0}px;
+  height: ${0}px;
+  background-color: ${0};
+  color: ${0};
+`), props => props.padding, props => props.size, props => props.size, props => props.size, ({
+  theme,
+  transparent
+}) => transparent ? 'transparent' : transparentize(0.32, theme.color.background1), ({
+  theme
+}) => theme.color.text4);
+const scaleout = keyframes(_t2 || (_t2 = _`
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+`));
+const Icon = styled.div.attrs({
+  role: 'presentation'
+})(_t3 || (_t3 = _`
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  animation: ${0} 1s both ease-out;
+  animation-iteration-count: ${0};
+
+  &[data-reset-animation] {
+    animation: none;
+  }
+`), scaleout, p => p.once ? 1 : 'infinite');
+const LoadingSpinnerIcon = React.forwardRef(function LoadingSpinnerIcon({
+  once = false
+}, ref) {
+  const iconRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    restart: () => {
+      if (!iconRef.current) {
+        return;
+      }
+
+      iconRef.current.dataset.resetAnimation = 'true'; // Force reflow hack!
+      delete iconRef.current.dataset.resetAnimation;
+    }
+  }));
+  return /*#__PURE__*/React.createElement(Icon, {
+    ref: iconRef,
+    once: once
+  });
+});
+
+export { Button, Clickable, ComponentAbstraction, Icon$1 as Icon, IconButton, LoadingSpinner, LoadingSpinnerIcon, Radio, RadioGroup, Select, SelectGroup, SwitchCheckbox as Switch, TextField, useComponentAbstraction };
 //# sourceMappingURL=index.modern.js.map