datocms-react-ui 0.3.9 → 0.3.13

package/styles.css

@@ -1 +1 @@
-@import "https://use.typekit.net/iok7hkr.css";._button_a3m33_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:1px solid transparent;border-radius:4px;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;line-height:inherit;opacity:1;text-decoration:none;transition:all .3s var(--material-ease);vertical-align:middle;white-space:nowrap}._button_a3m33_1:focus,._button_a3m33_1:hover{opacity:.8}._button_a3m33_1:active{opacity:.7}._disabled_a3m33_30{background-color:var(--light-bg-color);border-width:0;color:rgba(0,0,0,.2);cursor:not-allowed}._buttonType-muted_a3m33_37{background-color:var(--light-color);color:var(--accent-color)}._buttonType-primary_a3m33_42{background-color:var(--accent-color);border-width:0;color:#fff}._buttonType-primary_a3m33_42:active,._buttonType-primary_a3m33_42:focus,._buttonType-primary_a3m33_42:hover{color:#fff}._buttonType-primary_a3m33_42._disabled_a3m33_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonType-primary_a3m33_42._disabled_a3m33_30:active,._buttonType-primary_a3m33_42._disabled_a3m33_30:focus,._buttonType-primary_a3m33_42._disabled_a3m33_30:hover{color:rgba(0,0,0,.2)}._buttonType-negative_a3m33_64{border-width:0}._buttonType-negative_a3m33_64,._buttonType-negative_a3m33_64:active,._buttonType-negative_a3m33_64:focus,._buttonType-negative_a3m33_64:hover{background-color:var(--alert-color);color:#fff}._buttonType-negative_a3m33_64._disabled_a3m33_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonSize-xxs_a3m33_82{font-size:1em;padding:.5em .8em}._buttonSize-xs_a3m33_87{font-size:1em;padding:.6em .8em}._buttonSize-s_a3m33_92{font-size:1em;padding:.7em 1em}._buttonSize-m_a3m33_97{font-size:1.1em;padding:.7em 1em}._buttonSize-l_a3m33_102{font-size:1.2em;padding:.7em 1em}._buttonSize-xl_a3m33_107{font-size:1.2em;padding:1em}._fullWidth_a3m33_112{display:block;text-align:center;width:100%}._button__leftIcon_a3m33_118,._button__rightIcon_a3m33_119{display:inline-block;line-height:.6;vertical-align:middle}._button__leftIcon_a3m33_118 svg,._button__rightIcon_a3m33_119 svg{fill:var(--accent-color)}._button__leftIcon_a3m33_118{margin-right:.5em}._button__leftIcon_a3m33_118:last-child{margin-right:0}._button__rightIcon_a3m33_119{margin-left:.5em}._button__rightIcon_a3m33_119:first-child{margin-left:0}._canvas_jzho9_1{--base-body-color:#34363a;--light-body-color:#848484;--placeholder-body-color:#c6c6c6;--light-bg-color:#f5f5f5;--lighter-bg-color:#f8f8f8;--disabled-bg-color:#ededed;--border-color:#f0f0f0;--darker-border-color:#d7d7d7;--alert-color:#ff5e49;--alert-rgb-components:255,94,73;--warning-color:gold;--notice-color:#46d700;--warning-bg-color:#ffffe5;--add-color:#4cb06d;--remove-color:#eb576a;--base-font-family:"colfax-web","Roboto","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;--monospaced-font-family:"Roboto Mono","Menlo","Bitstream Vera Sans Mono",Consolas,Courier,monospace;--spacing-s:0.375rem;--spacing-m:0.75rem;--spacing-l:1.5rem;--spacing-xl:2.25rem;--spacing-xxl:3.75rem;--spacing-xxxl:6rem;--negative-spacing-s:-0.375rem;--negative-spacing-m:-0.75rem;--negative-spacing-l:-1.5rem;--negative-spacing-xl:-2.25rem;--negative-spacing-xxl:-3.75rem;--negative-spacing-xxxl:-6rem;--font-size-xxs:0.6875rem;--font-size-xs:0.75rem;--font-size-s:0.875rem;--font-size-m:0.9375rem;--font-size-l:1.0625rem;--font-size-xl:1.1875rem;--font-size-xxl:1.5625rem;--font-size-xxxl:1.875rem;--font-size-xxxl:2.1875rem;--font-size-xxxl:3.125rem;--material-ease:cubic-bezier(0.55,0,0.1,1);--inertial-ease:cubic-bezier(0.19,1,0.22,1);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color:var(--base-body-color);font-family:var(--base-font-family);font-size:var(--font-size-m);line-height:1.5}._fieldError_qi0xk_1{color:var(--alert-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._FieldGroup_uz9ju_1{display:block}._FieldGroup__item_uz9ju_5{display:block;margin-bottom:var(--spacing-l)}._FieldGroup__item_uz9ju_5:last-child{margin-bottom:0}._fieldHint_1dor2_1{color:var(--light-body-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._Form_5qspp_1,._Form__item_5qspp_5{display:block}._Form__item_5qspp_5:last-child{margin-bottom:0}._Form__item--default_5qspp_13{margin-bottom:var(--spacing-l)}._Form__item--condensed_5qspp_17{margin-bottom:var(--spacing-m)}._formLabel_tcjrv_1{align-items:center;color:var(--light-body-color);display:flex;margin-bottom:var(--spacing-s)}._formLabel_tcjrv_1:hover ._formLabel__code_tcjrv_8{opacity:1}._formLabel--error_tcjrv_14{color:var(--alert-color)}._formLabel__label_tcjrv_18{flex:1}._formLabel__code_tcjrv_8{font-family:var(--monospaced-font-family);font-size:.95em;opacity:0;position:absolute;transition:opacity .2s var(--material-ease)}._switchField__flex_16z4j_1{align-items:center;display:flex}._switchField__switchInput_16z4j_6{width:55px}._switchField__label_16z4j_10{color:var(--base-body-color);flex:1;line-height:1.1;line-height:20px;margin-bottom:0;pointer-events:none;-moz-user-select:text;-ms-user-select:text;user-select:text}._switchField__below_16z4j_22{margin-left:55px;margin-top:var(--spacing-s)}._switchInput__inner_1knbg_1{color:#fff;font-size:12px;left:24px;position:absolute}._switchInput_1knbg_1{background-color:#ccc;border:1px solid #ccc;border-radius:20px 20px;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}._switchInput_1knbg_1:after{animation-duration:.3s;animation-name:_switchInput__off_1knbg_1;animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50% 50%;box-shadow:0 2px 5px rgba(0,0,0,.26);content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;transform:scale(1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}._switchInput_1knbg_1:focus:after,._switchInput_1knbg_1:hover{animation-name:_switchInput__on_1knbg_1;transform:scale(1.1)}._switchInput__checked_1knbg_47{background-color:var(--accent-color);border:1px solid var(--accent-color)}._switchInput__checked_1knbg_47 ._switchInput__inner_1knbg_1{left:6px}._switchInput__checked_1knbg_47:after{left:22px}._switchInput__disabled_1knbg_60{background:#ccc;border-color:#ccc;cursor:no-drop}._switchInput__disabled_1knbg_60:after{animation-name:_none_1knbg_1;background:#9e9e9e;cursor:no-drop}._switchInput__disabled_1knbg_60:focus:after,._switchInput__disabled_1knbg_60:hover{animation-name:_none_1knbg_1;transform:scale(1)}@keyframes _switchInput__on_1knbg_1{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1.1)}}@keyframes _switchInput__off_1knbg_1{0%{transform:scale(1.1)}to{transform:scale(1)}}._TextInput_11m1z_1{appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:0;box-sizing:border-box;display:block;font-family:inherit;font-size:var(--font-size-m);padding:10px;resize:none;transition:border .2s var(--material-ease);width:100%}._TextInput_11m1z_1::placeholder{color:var(--placeholder-body-color)}._TextInput_11m1z_1:hover{border-color:var(--darker-border-color)}._TextInput_11m1z_1:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._TextInput--monospaced_11m1z_30{font-family:var(--monospaced-font-family);font-size:var(--font-size-s)}._TextInput--disabled_11m1z_35{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextInput--error_11m1z_41,._TextInput--error_11m1z_41:focus,._TextInput--error_11m1z_41:hover{border-color:var(--alert-color)}._TextInput--error_11m1z_41:focus{box-shadow:0 0 0 3px rgba(var(--alert-rgb-components),.2)}._inspector_1n8fb_1{margin:var(--spacing-l) 0}._panel_1n8fb_5{border-bottom:1px solid var(--border-color)}._panelHandle_1n8fb_9{all:inherit;background:var(--light-bg-color);border:0;box-sizing:border-box;cursor:pointer;display:block;font-weight:500;padding:5px 10px;width:100%}._panelHandle_1n8fb_9:hover{background:var(--lighter-bg-color)}._panelBody_1n8fb_25{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);padding:20px}._groupDescription_1n8fb_31{font-size:var(--font-size-s);line-height:1.2;margin-bottom:20px}._propertyGroup_1n8fb_37{border:1px solid var(--border-color);border-radius:5px}._propertyOrMethod_1n8fb_42{border-bottom:1px solid var(--border-color);line-height:1.2}._propertyOrMethod_1n8fb_42 p{margin:0}._propertyOrMethodBody_1n8fb_51{padding:15px}._propertyOrMethodExample_1n8fb_55{position:relative}._propertyOrMethodExample_1n8fb_55 pre{background:var(--light-bg-color);font-size:.8em;margin:0;max-height:240px;overflow:auto;padding:15px}._propertyOrMethodName_1n8fb_68{color:var(--light-body-color);display:block;font-family:var(--monospaced-font-family);font-size:.9em;font-weight:700;margin-bottom:5px;text-decoration:none}._propertyOrMethodName_1n8fb_68:hover{text-decoration:underline}._propertyOrMethodExampleActions_1n8fb_82{background:#fff;display:flex;padding:15px}._propertyOrMethodExampleActions_1n8fb_82>*{margin-right:10px}._Section_zpctu_1{position:relative}._Section--highlighted_zpctu_5:before{animation:_pageContentSectionHighligh_zpctu_1 4s ease-in-out .25s forwards;border-radius:4px;bottom:-20px;box-shadow:0 0 0 4px var(--accent-color);content:"";left:-30px;pointer-events:none;position:absolute;right:-30px;top:-20px;z-index:10}._Section__header_zpctu_19{margin-bottom:var(--spacing-l);margin-left:var(--negative-spacing-l);margin-right:var(--negative-spacing-l);position:relative}._Section__header_zpctu_19:before{background-color:var(--border-color);content:"";display:block;height:1px;left:0;position:absolute;right:0;top:50%;z-index:1}._Section__title_zpctu_38{align-items:center;background-color:#fff;display:inline-flex;font-size:var(--font-size-l);font-weight:500;margin-left:var(--spacing-m);margin-right:var(--spacing-l);padding-left:var(--spacing-m);padding-right:var(--spacing-m);position:relative;z-index:2}._Section__arrow_zpctu_55{all:initial;align-self:stretch;cursor:pointer;margin-right:.3em;width:15px}._Section__arrow_zpctu_55:before{border-bottom:6px solid transparent;border-left:6px solid var(--base-body-color);border-top:6px solid transparent;content:"";height:0;left:14px;margin-top:-6px;position:absolute;top:50%;transform-origin:50% 50%;transition:transform .2s ease-out;width:0}._Section__arrow_zpctu_55:hover:before{opacity:.7}._Section__arrow--is-open_zpctu_82:before{transform:rotate(90deg)}@keyframes _pageContentSectionHighligh_zpctu_1{0%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 4px var(slightly-transparent-accent-color)}15%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}75%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}to{box-shadow:0 0 0 4px transparent,0 0 0 80px transparent}}html{font-size:16px;height:auto}body,html{margin:0;padding:0}
+@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:900;src:url(https://use.typekit.net/af/7065ab/00000000000000003b9acdea/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3) format("woff2"),url(https://use.typekit.net/af/7065ab/00000000000000003b9acdea/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3) format("woff"),url(https://use.typekit.net/af/7065ab/00000000000000003b9acdea/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:700;src:url(https://use.typekit.net/af/5e9f47/00000000000000003b9acde8/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/5e9f47/00000000000000003b9acde8/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/5e9f47/00000000000000003b9acde8/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:700;src:url(https://use.typekit.net/af/7d9fca/00000000000000003b9acde9/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("woff2"),url(https://use.typekit.net/af/7d9fca/00000000000000003b9acde9/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("woff"),url(https://use.typekit.net/af/7d9fca/00000000000000003b9acde9/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:300;src:url(https://use.typekit.net/af/a5949d/00000000000000003b9acde2/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3) format("woff2"),url(https://use.typekit.net/af/a5949d/00000000000000003b9acde2/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3) format("woff"),url(https://use.typekit.net/af/a5949d/00000000000000003b9acde2/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:300;src:url(https://use.typekit.net/af/29e3f1/00000000000000003b9acde3/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i3&v=3) format("woff2"),url(https://use.typekit.net/af/29e3f1/00000000000000003b9acde3/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i3&v=3) format("woff"),url(https://use.typekit.net/af/29e3f1/00000000000000003b9acde3/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i3&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:500;src:url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:500;src:url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff2"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:400;src:url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:400;src:url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:200;src:url(https://use.typekit.net/af/8faa9c/00000000000000003b9acde0/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n2&v=3) format("woff2"),url(https://use.typekit.net/af/8faa9c/00000000000000003b9acde0/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n2&v=3) format("woff"),url(https://use.typekit.net/af/8faa9c/00000000000000003b9acde0/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n2&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:200;src:url(https://use.typekit.net/af/256d4a/00000000000000003b9acde1/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i2&v=3) format("woff2"),url(https://use.typekit.net/af/256d4a/00000000000000003b9acde1/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i2&v=3) format("woff"),url(https://use.typekit.net/af/256d4a/00000000000000003b9acde1/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i2&v=3) format("opentype")}html{font-size:16px;height:auto}body,html{margin:0;padding:0}._button_ya5s7_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;border-radius:4px;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-weight:var(--font-weight-bold);line-height:inherit;opacity:1;text-decoration:none;transition:all .3s var(--material-ease);vertical-align:middle;white-space:nowrap}._button_ya5s7_1:focus,._button_ya5s7_1:hover{opacity:.8}._button_ya5s7_1:active{opacity:.7}._disabled_ya5s7_30{background-color:var(--light-bg-color);color:rgba(0,0,0,.2);cursor:not-allowed}._buttonType-muted_ya5s7_36{background-color:var(--light-color);color:var(--accent-color)}._buttonType-primary_ya5s7_41{background-color:var(--accent-color);color:#fff}._buttonType-primary_ya5s7_41:active,._buttonType-primary_ya5s7_41:focus,._buttonType-primary_ya5s7_41:hover{color:#fff}._buttonType-primary_ya5s7_41._disabled_ya5s7_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonType-primary_ya5s7_41._disabled_ya5s7_30:active,._buttonType-primary_ya5s7_41._disabled_ya5s7_30:focus,._buttonType-primary_ya5s7_41._disabled_ya5s7_30:hover{color:rgba(0,0,0,.2)}._buttonType-negative_ya5s7_62,._buttonType-negative_ya5s7_62:active,._buttonType-negative_ya5s7_62:focus,._buttonType-negative_ya5s7_62:hover{background-color:var(--alert-color);color:#fff}._buttonType-negative_ya5s7_62._disabled_ya5s7_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonSize-xxs_ya5s7_79{font-size:1em;padding:.5em .8em}._buttonSize-xs_ya5s7_84{font-size:1em;padding:.6em .8em}._buttonSize-s_ya5s7_89{font-size:1em;padding:.7em 1em}._buttonSize-m_ya5s7_94{font-size:1.1em;padding:.7em 1em}._buttonSize-l_ya5s7_99{font-size:1.2em;padding:.7em 1em}._buttonSize-xl_ya5s7_104{font-size:1.2em;padding:1em}._fullWidth_ya5s7_109{display:block;text-align:center;width:100%}._button__leftIcon_ya5s7_115,._button__rightIcon_ya5s7_116{display:inline-block;line-height:.6;vertical-align:middle}._button__leftIcon_ya5s7_115 svg,._button__rightIcon_ya5s7_116 svg{fill:var(--accent-color)}._button__leftIcon_ya5s7_115{margin-right:.5em}._button__leftIcon_ya5s7_115:last-child{margin-right:0}._button__rightIcon_ya5s7_116{margin-left:.5em}._button__rightIcon_ya5s7_116:first-child{margin-left:0}._canvas_1es76_1{--base-body-color:#34363a;--base-body-color-rgb-components:52,54,58;--light-body-color:#848484;--light-body-color-rgb-components:132,132,132;--placeholder-body-color:#c6c6c6;--placeholder-body-color-rgb-components:198,198,198;--light-bg-color:#f5f5f5;--light-bg-color-rgb-components:245,245,245;--lighter-bg-color:#f8f8f8;--lighter-bg-color-rgb-components:248,248,248;--disabled-bg-color:#ededed;--disabled-bg-color-rgb-components:237,237,237;--border-color:#f0f0f0;--border-color-rgb-components:240,240,240;--darker-border-color:#d7d7d7;--darker-border-color-rgb-components:215,215,215;--alert-color:#ff5e49;--alert-color-rgb-components:255,94,73;--warning-color:gold;--warning-color-rgb-components:255,215,0;--notice-color:#46d700;--notice-color-rgb-components:70,215,0;--warning-bg-color:#ffffe5;--warning-bg-color-rgb-components:255,255,229;--add-color:#4cb06d;--add-color-rgb-components:76,176,109;--remove-color:#eb576a;--remove-color-rgb-components:235,87,106;--base-font-family:"colfax-web","Roboto","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;--monospaced-font-family:"Roboto Mono","Menlo","Bitstream Vera Sans Mono",Consolas,Courier,monospace;--font-weight-bold:500;--spacing-s:0.375rem;--spacing-m:0.75rem;--spacing-l:1.5rem;--spacing-xl:2.25rem;--spacing-xxl:3.75rem;--spacing-xxxl:6rem;--negative-spacing-s:-0.375rem;--negative-spacing-m:-0.75rem;--negative-spacing-l:-1.5rem;--negative-spacing-xl:-2.25rem;--negative-spacing-xxl:-3.75rem;--negative-spacing-xxxl:-6rem;--font-size-xxs:0.6875rem;--font-size-xs:0.75rem;--font-size-s:0.875rem;--font-size-m:0.9375rem;--font-size-l:1.0625rem;--font-size-xl:1.1875rem;--font-size-xxl:1.5625rem;--font-size-xxxl:1.875rem;--material-ease:cubic-bezier(0.55,0,0.1,1);--inertial-ease:cubic-bezier(0.19,1,0.22,1);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color:var(--base-body-color);font-family:var(--base-font-family);font-size:var(--font-size-m);line-height:1.5}._fieldError_qi0xk_1{color:var(--alert-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._FieldGroup_uz9ju_1{display:block}._FieldGroup__item_uz9ju_5{display:block;margin-bottom:var(--spacing-l)}._FieldGroup__item_uz9ju_5:last-child{margin-bottom:0}._fieldHint_1dor2_1{color:var(--light-body-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._Form_5qspp_1,._Form__item_5qspp_5{display:block}._Form__item_5qspp_5:last-child{margin-bottom:0}._Form__item--default_5qspp_13{margin-bottom:var(--spacing-l)}._Form__item--condensed_5qspp_17{margin-bottom:var(--spacing-m)}._formLabel_tcjrv_1{align-items:center;color:var(--light-body-color);display:flex;margin-bottom:var(--spacing-s)}._formLabel_tcjrv_1:hover ._formLabel__code_tcjrv_8{opacity:1}._formLabel--error_tcjrv_14{color:var(--alert-color)}._formLabel__label_tcjrv_18{flex:1}._formLabel__code_tcjrv_8{font-family:var(--monospaced-font-family);font-size:.95em;opacity:0;position:absolute;transition:opacity .2s var(--material-ease)}._switchField__flex_16z4j_1{align-items:center;display:flex}._switchField__switchInput_16z4j_6{width:55px}._switchField__label_16z4j_10{color:var(--base-body-color);flex:1;line-height:1.1;line-height:20px;margin-bottom:0;pointer-events:none;-moz-user-select:text;-ms-user-select:text;user-select:text}._switchField__below_16z4j_22{margin-left:55px;margin-top:var(--spacing-s)}._switchInput__inner_1knbg_1{color:#fff;font-size:12px;left:24px;position:absolute}._switchInput_1knbg_1{background-color:#ccc;border:1px solid #ccc;border-radius:20px 20px;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}._switchInput_1knbg_1:after{animation-duration:.3s;animation-name:_switchInput__off_1knbg_1;animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50% 50%;box-shadow:0 2px 5px rgba(0,0,0,.26);content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;transform:scale(1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}._switchInput_1knbg_1:focus:after,._switchInput_1knbg_1:hover{animation-name:_switchInput__on_1knbg_1;transform:scale(1.1)}._switchInput__checked_1knbg_47{background-color:var(--accent-color);border:1px solid var(--accent-color)}._switchInput__checked_1knbg_47 ._switchInput__inner_1knbg_1{left:6px}._switchInput__checked_1knbg_47:after{left:22px}._switchInput__disabled_1knbg_60{background:#ccc;border-color:#ccc;cursor:no-drop}._switchInput__disabled_1knbg_60:after{animation-name:_none_1knbg_1;background:#9e9e9e;cursor:no-drop}._switchInput__disabled_1knbg_60:focus:after,._switchInput__disabled_1knbg_60:hover{animation-name:_none_1knbg_1;transform:scale(1)}@keyframes _switchInput__on_1knbg_1{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1.1)}}@keyframes _switchInput__off_1knbg_1{0%{transform:scale(1.1)}to{transform:scale(1)}}._TextInput_x2oj2_1{appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:0;box-sizing:border-box;display:block;font-family:inherit;font-size:var(--font-size-m);padding:10px;resize:none;transition:border .2s var(--material-ease);width:100%}._TextInput_x2oj2_1::placeholder{color:var(--placeholder-body-color)}._TextInput_x2oj2_1:hover{border-color:var(--darker-border-color)}._TextInput_x2oj2_1:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._TextInput--monospaced_x2oj2_30{font-family:var(--monospaced-font-family);font-size:var(--font-size-s)}._TextInput--disabled_x2oj2_35{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextInput--error_x2oj2_41,._TextInput--error_x2oj2_41:focus,._TextInput--error_x2oj2_41:hover{border-color:var(--alert-color)}._TextInput--error_x2oj2_41:focus{box-shadow:0 0 0 3px rgba(var(--alert-color-rgb-components),.2)}._inspector_u6041_1{margin:var(--spacing-l) 0}._panel_u6041_5{border-bottom:1px solid var(--border-color)}._panelHandle_u6041_9{all:inherit;background:var(--light-bg-color);border:0;box-sizing:border-box;cursor:pointer;display:block;font-weight:var(--font-weight-bold);padding:5px 10px;width:100%}._panelHandle_u6041_9:hover{background:var(--lighter-bg-color)}._panelBody_u6041_25{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);padding:20px}._groupDescription_u6041_31{font-size:var(--font-size-s);line-height:1.2;margin-bottom:20px}._propertyGroup_u6041_37{border:1px solid var(--border-color);border-radius:5px}._propertyOrMethod_u6041_42{border-bottom:1px solid var(--border-color);line-height:1.2}._propertyOrMethod_u6041_42 p{margin:0}._propertyOrMethodBody_u6041_51{padding:15px}._propertyOrMethodExample_u6041_55{position:relative}._propertyOrMethodExample_u6041_55 pre{background:var(--light-bg-color);font-size:.8em;margin:0;max-height:240px;overflow:auto;padding:15px}._propertyOrMethodName_u6041_68{color:var(--light-body-color);display:block;font-family:var(--monospaced-font-family);font-size:.9em;font-weight:700;margin-bottom:5px;text-decoration:none}._propertyOrMethodName_u6041_68:hover{text-decoration:underline}._propertyOrMethodExampleActions_u6041_82{background:#fff;display:flex;padding:15px}._propertyOrMethodExampleActions_u6041_82>*{margin-right:10px}._Section_zh95u_1{position:relative}._Section--highlighted_zh95u_5:before{animation:_pageContentSectionHighligh_zh95u_1 4s ease-in-out .25s forwards;border-radius:4px;bottom:-20px;box-shadow:0 0 0 4px var(--accent-color);content:"";left:-30px;pointer-events:none;position:absolute;right:-30px;top:-20px;z-index:10}._Section__header_zh95u_19{margin-bottom:var(--spacing-l);margin-left:var(--negative-spacing-l);margin-right:var(--negative-spacing-l);position:relative}._Section__header_zh95u_19:before{background-color:var(--border-color);content:"";display:block;height:1px;left:0;position:absolute;right:0;top:50%;z-index:1}._Section__title_zh95u_38{align-items:center;background-color:#fff;display:inline-flex;font-size:var(--font-size-l);font-weight:var(--font-weight-bold);margin-left:var(--spacing-m);margin-right:var(--spacing-l);padding-left:var(--spacing-m);padding-right:var(--spacing-m);position:relative;z-index:2}._Section__arrow_zh95u_55{all:initial;align-self:stretch;cursor:pointer;margin-right:.3em;width:15px}._Section__arrow_zh95u_55:before{border-bottom:6px solid transparent;border-left:6px solid var(--base-body-color);border-top:6px solid transparent;content:"";height:0;left:14px;margin-top:-6px;position:absolute;top:50%;transform-origin:50% 50%;transition:transform .2s ease-out;width:0}._Section__arrow_zh95u_55:hover:before{opacity:.7}._Section__arrow--is-open_zh95u_82:before{transform:rotate(90deg)}@keyframes _pageContentSectionHighligh_zh95u_1{0%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 4px rgba(var(--accent-color-rgb-components),.7)}15%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}75%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}to{box-shadow:0 0 0 4px transparent,0 0 0 80px transparent}}

package/types.json

@@ -2581,7 +2581,7 @@
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 13,
+							"line": 15,
 							"character": 2
 						}
 					],
@@ -2950,7 +2950,7 @@
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 12,
+							"line": 14,
 							"character": 2
 						}
 					],
@@ -3522,11 +3522,13 @@
 					"name": "onChange",
 					"kind": 1024,
 					"kindString": "Property",
-					"flags": {},
+					"flags": {
+						"isOptional": true
+					},
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 14,
+							"line": 16,
 							"character": 2
 						}
 					],
@@ -5128,7 +5130,7 @@
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 15,
+							"line": 17,
 							"character": 2
 						}
 					],
@@ -8383,7 +8385,7 @@
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 16,
+							"line": 18,
 							"character": 2
 						}
 					],
@@ -8686,7 +8688,7 @@
 			"sources": [
 				{
 					"fileName": "src/SwitchInput/index.tsx",
-					"line": 10,
+					"line": 12,
 					"character": 17
 				}
 			],
@@ -8722,7 +8724,7 @@
 			"sources": [
 				{
 					"fileName": "src/SelectInput/index.tsx",
-					"line": 201,
+					"line": 205,
 					"character": 12
 				}
 			],
@@ -8823,7 +8825,7 @@
 			"sources": [
 				{
 					"fileName": "src/SelectInput/index.tsx",
-					"line": 145,
+					"line": 148,
 					"character": 12
 				}
 			],
@@ -8924,7 +8926,7 @@
 			"sources": [
 				{
 					"fileName": "src/Button/index.tsx",
-					"line": 56,
+					"line": 121,
 					"character": 12
 				}
 			],
@@ -8948,7 +8950,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 63,
+									"line": 128,
 									"character": 2
 								}
 							],
@@ -8993,7 +8995,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 62,
+									"line": 127,
 									"character": 2
 								}
 							],
@@ -9026,7 +9028,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 57,
+									"line": 122,
 									"character": 2
 								}
 							],
@@ -9046,7 +9048,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 60,
+									"line": 125,
 									"character": 2
 								}
 							],
@@ -9066,7 +9068,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 64,
+									"line": 129,
 									"character": 2
 								}
 							],
@@ -9084,7 +9086,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 58,
+									"line": 123,
 									"character": 2
 								}
 							],
@@ -9104,7 +9106,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 66,
+									"line": 131,
 									"character": 2
 								}
 							],
@@ -9124,7 +9126,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 61,
+									"line": 126,
 									"character": 2
 								}
 							],
@@ -9144,7 +9146,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 67,
+									"line": 132,
 									"character": 2
 								}
 							],
@@ -9164,7 +9166,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 65,
+									"line": 130,
 									"character": 2
 								}
 							],
@@ -9184,7 +9186,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 59,
+									"line": 124,
 									"character": 2
 								}
 							],
@@ -9229,7 +9231,7 @@
 					"sources": [
 						{
 							"fileName": "src/Button/index.tsx",
-							"line": 56,
+							"line": 121,
 							"character": 30
 						}
 					]
@@ -9501,7 +9503,9 @@
 							"name": "type",
 							"kind": 1024,
 							"kindString": "Property",
-							"flags": {},
+							"flags": {
+								"isOptional": true
+							},
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
@@ -9666,7 +9670,7 @@
 			"sources": [
 				{
 					"fileName": "src/SelectInput/index.tsx",
-					"line": 173,
+					"line": 176,
 					"character": 12
 				}
 			],
@@ -9767,7 +9771,7 @@
 			"sources": [
 				{
 					"fileName": "src/SelectInput/index.tsx",
-					"line": 117,
+					"line": 119,
 					"character": 12
 				}
 			],
@@ -10427,7 +10431,7 @@
 			"sources": [
 				{
 					"fileName": "src/SelectInput/index.tsx",
-					"line": 207,
+					"line": 212,
 					"character": 16
 				}
 			],
@@ -10647,7 +10651,7 @@
 			"sources": [
 				{
 					"fileName": "src/SelectInput/index.tsx",
-					"line": 151,
+					"line": 154,
 					"character": 16
 				}
 			],
@@ -10767,7 +10771,7 @@
 			"sources": [
 				{
 					"fileName": "src/Button/index.tsx",
-					"line": 19,
+					"line": 80,
 					"character": 16
 				}
 			],
@@ -10778,6 +10782,26 @@
 					"kind": 4096,
 					"kindString": "Call signature",
 					"flags": {},
+					"comment": {
+						"tags": [
+							{
+								"tag": "example",
+								"text": "Button types\n\n```js\n<Canvas ctx={ctx}>\n  <div style={{ marginBottom: 'var(--spacing-m)' }}>\n    <Button buttonType=\"muted\">Submit</Button>{' '}\n    <Button buttonType=\"primary\">Submit</Button>{' '}\n    <Button buttonType=\"negative\">Submit</Button>\n  </div>\n  <div>\n    <Button buttonType=\"muted\" disabled>\n      Submit\n    </Button>{' '}\n    <Button buttonType=\"primary\" disabled>\n      Submit\n    </Button>{' '}\n    <Button buttonType=\"negative\" disabled>\n      Submit\n    </Button>\n  </div>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Full-width\n\n```js\n<Canvas ctx={ctx}>\n  <Button fullWidth>Submit</Button>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Sizing\n\n```js\n<Canvas ctx={ctx}>\n  <Button buttonSize=\"xxs\">Submit</Button>{' '}\n  <Button buttonSize=\"xs\">Submit</Button>{' '}\n  <Button buttonSize=\"s\">Submit</Button>{' '}\n  <Button buttonSize=\"m\">Submit</Button>{' '}\n  <Button buttonSize=\"l\">Submit</Button>{' '}\n  <Button buttonSize=\"xl\">Submit</Button>{' '}\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Icons\n\n```js\n<Canvas ctx={ctx}>\n  <div style={{ marginBottom: 'var(--spacing-m)' }}>\n    <Button leftIcon={<PlusIcon />}>Submit</Button>\n  </div>\n  <div style={{ marginBottom: 'var(--spacing-m)' }}>\n    <Button rightIcon={<ChevronDownIcon />}>Options</Button>\n  </div>\n  <div>\n    <Button leftIcon={<PlusIcon />} />\n  </div>\n</Canvas>;\n```\n"
+							}
+						]
+					},
 					"parameters": [
 						{
 							"id": 3,
@@ -10808,7 +10832,7 @@
 			"sources": [
 				{
 					"fileName": "src/Button/index.tsx",
-					"line": 70,
+					"line": 135,
 					"character": 16
 				}
 			],
@@ -10849,7 +10873,7 @@
 			"sources": [
 				{
 					"fileName": "src/Canvas/index.tsx",
-					"line": 18,
+					"line": 497,
 					"character": 16
 				}
 			],
@@ -10860,6 +10884,22 @@
 					"kind": 4096,
 					"kindString": "Call signature",
 					"flags": {},
+					"comment": {
+						"tags": [
+							{
+								"tag": "example",
+								"text": "Color variables\n\n```js\n<Canvas ctx={ctx}>\n  <Section title=\"Text colors\">\n    <table>\n      <tbody>\n        <tr>\n          <td>\n            <code>--base-body-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--base-body-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--light-body-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--light-body-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--placeholder-body-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--placeholder-body-color)',\n              }}\n            />\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </Section>\n  <Section title=\"UI colors\">\n    <table>\n      <tbody>\n        <tr>\n          <td>\n            <code>--light-bg-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--light-bg-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--lighter-bg-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--lighter-bg-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--disabled-bg-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--disabled-bg-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--border-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--border-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--darker-border-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--darker-border-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--alert-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--alert-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--warning-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--warning-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--notice-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--notice-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--warning-bg-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--warning-bg-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--add-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--add-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--remove-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--remove-color)',\n              }}\n            />\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </Section>\n  <Section title=\"Project-specific colors\">\n    <table>\n      <tbody>\n        <tr>\n          <td>\n            <code>--accent-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--accent-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--primary-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--primary-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--light-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--light-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--dark-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--dark-color)',\n              }}\n            />\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </Section>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Typography variables\n\n```js\n<Canvas ctx={ctx}>\n  <table>\n    <tbody>\n      <tr>\n        <td>\n          <code>--font-size-xxs</code>\n        </td>\n        <td>\n          <div style={{ fontSize: 'var(--font-size-xxs)' }}>\n            Size XXS\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-xs</code>\n        </td>\n        <td>\n          <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-s</code>\n        </td>\n        <td>\n          <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-m</code>\n        </td>\n        <td>\n          <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-l</code>\n        </td>\n        <td>\n          <div\n            style={{\n              fontSize: 'var(--font-size-l)',\n              fontWeight: 'var(--font-weight-bold)',\n            }}\n          >\n            Size L\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-xl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              fontSize: 'var(--font-size-xl)',\n              fontWeight: 'var(--font-weight-bold)',\n            }}\n          >\n            Size XL\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-xxl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              fontSize: 'var(--font-size-xxl)',\n              fontWeight: 'var(--font-weight-bold)',\n            }}\n          >\n            Size XXL\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-xxxl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              fontSize: 'var(--font-size-xxxl)',\n              fontWeight: 'var(--font-weight-bold)',\n            }}\n          >\n            Size XXXL\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Spacing variables\n\n```js\n<Canvas ctx={ctx}>\n  <table>\n    <tbody>\n      <tr>\n        <td>\n          <code>--spacing-s</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-s)',\n              height: 'var(--spacing-s)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-m</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-m)',\n              height: 'var(--spacing-m)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-l</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-l)',\n              height: 'var(--spacing-l)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-xl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-xl)',\n              height: 'var(--spacing-xl)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-xxl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-xxl)',\n              height: 'var(--spacing-xxl)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-xxxl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-xxxl)',\n              height: 'var(--spacing-xxxl)',\n            }}\n          />\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</Canvas>;\n```\n"
+							}
+						]
+					},
 					"parameters": [
 						{
 							"id": 35,
@@ -10890,7 +10930,7 @@
 			"sources": [
 				{
 					"fileName": "src/ContextInspector/index.tsx",
-					"line": 161,
+					"line": 179,
 					"character": 16
 				}
 			],
@@ -10926,8 +10966,8 @@
 											"sources": [
 												{
 													"fileName": "src/ContextInspector/index.tsx",
-													"line": 161,
-													"character": 44
+													"line": 182,
+													"character": 2
 												}
 											],
 											"type": {
@@ -10948,8 +10988,8 @@
 															"sources": [
 																{
 																	"fileName": "src/ContextInspector/index.tsx",
-																	"line": 161,
-																	"character": 51
+																	"line": 182,
+																	"character": 9
 																}
 															],
 															"type": {
@@ -11100,7 +11140,7 @@
 			"sources": [
 				{
 					"fileName": "src/SelectInput/index.tsx",
-					"line": 179,
+					"line": 183,
 					"character": 16
 				}
 			],
@@ -11343,7 +11383,7 @@
 			"sources": [
 				{
 					"fileName": "src/Form/index.tsx",
-					"line": 20,
+					"line": 92,
 					"character": 13
 				}
 			],
@@ -11354,6 +11394,14 @@
 					"kind": 4096,
 					"kindString": "Call signature",
 					"flags": {},
+					"comment": {
+						"tags": [
+							{
+								"tag": "example",
+								"text": "Full example\n\n```js\n<Canvas ctx={ctx}>\n  <Form onSubmit={() => console.log('onSubmit')}>\n    <FieldGroup>\n      <TextField\n        required\n        name=\"name\"\n        id=\"name\"\n        label=\"Name\"\n        value=\"Mark Smith\"\n        placeholder=\"Enter full name\"\n        hint=\"Provide a full name\"\n        onChange={(newValue) => console.log(newValue)}\n      />\n      <TextField\n        required\n        name=\"email\"\n        id=\"email\"\n        label=\"Email\"\n        type=\"email\"\n        value=\"\"\n        placeholder=\"your@email.com\"\n        error=\"Please enter an email!\"\n        hint=\"Enter email address\"\n        onChange={(newValue) => console.log(newValue)}\n      />\n      <TextField\n        required\n        name=\"apiToken\"\n        id=\"apiToken\"\n        label=\"API Token\"\n        value=\"XXXYYY123\"\n        hint=\"Enter a valid API token\"\n        textInputProps={{ monospaced: true }}\n        onChange={(newValue) => console.log(newValue)}\n      />\n      <SelectField\n        name=\"option\"\n        id=\"option\"\n        label=\"Option\"\n        hint=\"Select one of the options\"\n        value={{ label: 'Option 1', value: 'option1' }}\n        selectInputProps={{\n          options: [\n            { label: 'Option 1', value: 'option1' },\n            { label: 'Option 2', value: 'option2' },\n            { label: 'Option 3', value: 'option3' },\n          ],\n        }}\n        onChange={(newValue) => console.log(newValue)}\n      />\n      <SwitchField\n        name=\"debugMode\"\n        id=\"debugMode\"\n        label=\"Debug mode active?\"\n        hint=\"Logs messages to console\"\n        value={true}\n        onChange={(newValue) => console.log(newValue)}\n      />\n    </FieldGroup>\n    <FieldGroup>\n      <Button fullWidth buttonType=\"primary\">\n        Submit\n      </Button>\n    </FieldGroup>\n  </Form>\n</Canvas>;\n```\n"
+							}
+						]
+					},
 					"parameters": [
 						{
 							"id": 62,
@@ -11427,7 +11475,7 @@
 			"sources": [
 				{
 					"fileName": "src/Section/index.tsx",
-					"line": 16,
+					"line": 63,
 					"character": 16
 				}
 			],
@@ -11438,6 +11486,22 @@
 					"kind": 4096,
 					"kindString": "Call signature",
 					"flags": {},
+					"comment": {
+						"tags": [
+							{
+								"tag": "example",
+								"text": "Basic usage\n\n```jsx\n<Canvas ctx={ctx}>\n  <Section title=\"Section title\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n    aliquip ex ea commodo consequat.\n  </Section>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Highlighted\n\n```jsx\n<Canvas ctx={ctx}>\n  <Section title=\"Section title\" highlighted>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n    aliquip ex ea commodo consequat.\n  </Section>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Collapsible\n\n```jsx\n<Canvas ctx={ctx}>\n  <StateManager initial={true}>\n    {(isOpen, setOpen) => (\n      <Section\n        title=\"Section title\"\n        collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}\n      >\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n        enim ad minim veniam, quis nostrud exercitation ullamco laboris\n        nisi ut aliquip ex ea commodo consequat.\n      </Section>\n    )}\n  </StateManager>\n</Canvas>;\n```\n"
+							}
+						]
+					},
 					"parameters": [
 						{
 							"id": 375,
@@ -11567,7 +11631,7 @@
 			"sources": [
 				{
 					"fileName": "src/SelectInput/index.tsx",
-					"line": 123,
+					"line": 126,
 					"character": 16
 				}
 			],
@@ -11727,7 +11791,7 @@
 			"sources": [
 				{
 					"fileName": "src/SwitchInput/index.tsx",
-					"line": 19,
+					"line": 21,
 					"character": 16
 				}
 			],