@oliasoft-open-source/react-ui-library 3.13.0-beta-6 → 3.13.0

package/dist/storybook/assets/table.stories.89f67cc2.js

@@ -0,0 +1,576 @@
+import{j as c}from"./jsx-runtime.bc0b5389.js";import{r as S}from"./index.8c7046c4.js";import{f as J}from"./immer.esm.771c80b7.js";import{l as ae}from"./lodash.96de7017.js";import{T as F}from"./table.a495eefa.js";import{C as Ge}from"./card.8a3821be.js";import{I as ee}from"./input.fc19e03b.js";import{F as ne}from"./field.c30c885b.js";import{H as Je}from"./heading.8dbffdbe.js";import{t as Y,a as Xe,b as Ye,c as Ze,d as en,e as nn,f as tn,g as an}from"./table.stories-data.68d2b2e1.js";import"./icon.e3eba0d8.js";import"./index.73b4811b.js";import"./index.55214191.js";import"./index.es.724dbd7e.js";import"./hoist-non-react-statics.cjs.10bac274.js";import"./index.3a536397.js";import"./memoize-one.esm.7a54f149.js";import"./actions.181faed0.js";import"./tooltip.c75d575a.js";import"./button.a5847ae5.js";import"./spinner.bd672879.js";import"./disabled-context.f2b44977.js";import"./badge.0f92e7c9.js";import"./types.c5a118de.js";import"./pagination.c446262c.js";import"./select.1f357eba.js";import"./text.dbb2d441.js";import"./select.input.1214f7f4.js";import"./input-group.655b5741.js";import"./input-group-addon.cf112763.js";import"./check-box.7a8ba49b.js";import"./help-icon.ef78ffcd.js";import"./number-input.42e9e068.js";import"./index.cb879655.js";import"./popover.7a4e027f.js";import"./slider.32b8bfb5.js";import"./index.95eaf8c8.js";import"./label.5f35b9cc.js";import"./flex.0003e6fb.js";const Ln={title:"Basic/Table",component:F,args:{table:{...Y}}},I=h=>c.exports.jsx(F,{...h}),X=I.bind({}),_=I.bind({});_.args={table:{...Y,fixedWidth:"400px"}};const Q=I.bind({});Q.args={table:{...Y,fixedWidth:"auto"}};const H=I.bind({});H.args={table:Xe};H.parameters={docs:{description:{story:"Use sparingly when certain columns cannot be below a certain width. Unless the Table is auto width, set one column to `auto` to use remaining space."}}};const E=I.bind({});E.args={table:Ye};const W=I.bind({});W.args={table:Ze};W.parameters={docs:{description:{story:"This is only required when you need to override `columnAlignment` in header cells (i.e. they have different alignment)"}}};const q=I.bind({});q.args={table:en};const U=I.bind({});U.args={table:nn};U.decorators=[h=>c.exports.jsx("div",{style:{position:"absolute",inset:0,padding:20},children:c.exports.jsx(h,{})})];const N=I.bind({});N.args={table:tn};N.parameters={docs:{description:{story:"If a `maxHeight` is set, the table should only fill that height if it needs to."}}};const L=I.bind({});L.args={table:an};const M=()=>c.exports.jsx(Ge,{heading:c.exports.jsx(Je,{children:"Card heading"}),padding:!1,children:c.exports.jsx(F,{table:{...Y,bordered:!1}})});M.parameters={docs:{source:{type:"dynamic"}}};const $=()=>{const h=["Section","Width","Height"];let m=["","m","m"],o=[...Array(175).keys()].map((a,n)=>[n,n*2,n*2]);const k=(a,n,r)=>a==="m"&&n==="ft"?r*3.28084:a==="ft"&&n==="m"?r/3.28084:r,l=(a,n,r,p)=>{o[n][r]=a.target.value,p()},C=a=>{o=o.concat([["","",""]]),a()},A=(a,n)=>{o=o.filter((r,p)=>p!==a),n()},d=(a,n,r)=>{const p=m[n],f=a.target.value;m=m.map((R,b)=>b===n?f:R),o=o.map(R=>R.map((b,g)=>g===n?k(p,f,b):b)),r()},u=()=>{const a=[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],[n,r]=S.exports.useState(10),[p,f]=S.exports.useState(1),[R,b]=S.exports.useState(!1),g=()=>{b(!R)},T=()=>{const e=Math.ceil(o.length/n);f(e)},D=(p-1)*n,t=n===0?o.length-1:D+n,i={headers:[{cells:h.map(e=>({value:e})),actions:[{primary:!0,label:"Add",icon:"add",onClick:()=>{C(g),T()}}]},{cells:[{},{options:[{label:"m",value:"m"},{label:"ft",value:"ft"}],value:m[1],type:"Select",native:!0,onChange:e=>d(e,1,g)},{options:[{label:"m",value:"m"},{label:"ft",value:"ft"}],value:m[2],type:"Select",native:!0,onChange:e=>d(e,2,g)}]}],rows:o.slice(D,t).map((e,s)=>{const y=D+s;return{cells:[...Array(3).keys()].map((x,w)=>({value:e[w],type:"Input",onChange:P=>l(P,y,w,g)})),actions:[{label:"Delete",icon:"minus",onClick:()=>A(y,g)}]}}),footer:{pagination:{rowCount:o.length,selectedPage:p,rowsPerPage:{onChange:e=>{const{value:s}=e.target;r(Number(s))},options:a,value:n},onSelectPage:e=>f(e),small:!0}}};return c.exports.jsx(F,{table:i})};return c.exports.jsx(u,{})},K=()=>{const h=["Section","Width","Height"];let m=[...Array(175).keys()].map((k,l)=>({Section:l,Width:l*2,Height:l*2}));const o=()=>{const k=[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],[l,C]=S.exports.useState(10),[A,d]=S.exports.useState(1),[u,a]=S.exports.useState({}),[n,r]=S.exports.useState({});S.exports.useEffect(()=>{d(1)},[u,n]);const p=(A-1)*l,f=l===0?m.length-1:p+l,R=(e,s,y)=>e.filter(x=>Object.keys(s).every(w=>s[w]===""?!0:x[w].toString().includes(s[w]))).sort((x,w)=>Object.entries(y).map(([P,j])=>{switch(j){case"up":return x[P]-w[P];case"down":return w[P]-x[P];default:return 0}}).reduce((P,j)=>P||j,0)),b=(e,s,y,x,w)=>{const P=e.map(v=>{const V=Object.keys(x).includes(v)?x[v]:"",O=`${v[0].toUpperCase()}${v.slice(1)}`;return{key:v,value:O,hasSort:!0,sort:V,onSort:()=>{const G=V===""?"up":V==="up"?"down":"";w({...x,[v]:G})}}}),j=e.map(v=>{const V=Object.keys(s).includes(v)?s[v]:"";return{key:v,value:V,type:"Input",placeholder:"Filter",onChange:O=>y({...s,[v]:O.target.value})}});return{dataSortCells:P,dataFilterCells:j}},{dataSortCells:g,dataFilterCells:T}=b(h,u,a,n,r),D=R(m,u,n),t=[...D.slice(p,f).map(e=>({cells:Object.entries(e).map(([y,x])=>({key:y,value:x,type:"Input",disabled:!0}))}))],i={headers:[{cells:g},{cells:T}],rows:t,footer:{pagination:{rowCount:D.length,selectedPage:A,rowsPerPage:{onChange:e=>{const{value:s}=e.target;C(Number(s))},options:k,value:l},onSelectPage:e=>d(e),small:!0}}};return c.exports.jsx(F,{table:i})};return c.exports.jsx(o,{})},B=()=>{const h={tea:3.6,coffee:3.2,orange:4.1},m=[{label:"Tea",value:"tea"},{label:"Coffee",value:"coffee"},{label:"Orange juice",value:"orange"}],o={cells:[{type:"Select",options:m,value:{value:"tea"}},{type:"Input"},{type:"Static"}]},k=[...Array(15).keys()].map((t,i)=>({cells:[{type:"Select",options:m,value:{value:"tea"}},{type:"Input",value:i+1},{type:"Static"}]})),[l,C]=S.exports.useState(k),A=[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],[d,u]=S.exports.useState(10),[a,n]=S.exports.useState(1),r=(a-1)*d,p=d===0?l.length-1:r+d,f=({newRow:t}={})=>{const i=J(l,e=>{e.push(t!=null?t:o)});C(i)},R=({rowIndex:t})=>{const i=J(l,e=>{delete e[t]}).filter(e=>e);C(i)},b=({rowIndex:t,value:i})=>{const e=J(l,s=>{s[t].cells[0].value.value=i});C(e)},g=({rowIndex:t,value:i})=>{const e=J(l,s=>{s[t].cells[1].value=i});C(e)},T=({value:t})=>{const i=Number(t);return!ae.exports.isNaN(i)&&ae.exports.isInteger(i)&&i>0},D=l.slice(r,p).map((t,i)=>{const e=r+i;return l.length-1,{...t,cells:t==null?void 0:t.cells.map((s,y)=>{var v,V,O,G,te;const x=(O=(V=(v=t==null?void 0:t.cells)==null?void 0:v[0])==null?void 0:V.value)==null?void 0:O.value,w=(te=(G=t==null?void 0:t.cells)==null?void 0:G[1])==null?void 0:te.value,P=h==null?void 0:h[x],j=P&&T({value:w})?(P*w).toFixed(2):null;if(y===0)return{...s,onChange:Z=>b({rowIndex:e,value:Z.target.value})};if(y===1)return{...s,onChange:Z=>g({rowIndex:e,value:Z.target.value}),error:T({value:s.value})?null:"Must be valid whole number"};if(y===2)return{...s,value:j}}),actions:[{label:"Delete",icon:"minus",onClick:()=>R({rowIndex:e})}]}});return c.exports.jsx(F,{table:{defaultEmptyRow:o,onAddRow:f,columnAlignment:["left","right","right"],headers:[{cells:[{value:"Drink"},{value:"Quantity"},{value:"Total Price (\xA3)"}],actions:[{primary:!0,icon:"plus",label:"Add",onClick:()=>f()}]}],rows:D,footer:{pagination:{rowCount:l.length,selectedPage:a,rowsPerPage:{onChange:t=>{const{value:i}=t.target;u(Number(i))},options:A,value:d},onSelectPage:t=>n(t),small:!0}}}})},z=()=>{const h=["Section","Width","Height"];let m=Array.from(Array(10),(d,u)=>[u,u*2,u*2]);const[o,k]=S.exports.useState({}),l=(d,u,a,n)=>{m[u][a]=d.target.value,n()},C=(d,u,a,n)=>{let r=d.clipboardData.getData("text");return k({rowIndex:u,cellIndex:a,pastedValues:r}),n(),{pastedData:o}},A=()=>{const[d,u]=S.exports.useState(!1),a=()=>{u(!d)},n={headers:[{cells:h.map(r=>({value:r}))}],rows:m.map((r,p)=>{const f=p;return{cells:[...Array(3).keys()].map((R,b)=>({value:r[b],type:"Input",onChange:g=>l(g,f,b,a),onPaste:g=>C(g,f,b,a)}))}})};return c.exports.jsxs(c.exports.Fragment,{children:[c.exports.jsx(F,{table:n}),c.exports.jsx(ne,{label:"Pasted Data",children:c.exports.jsx(ee,{value:o.pastedValues})}),c.exports.jsx(ne,{label:"At Row",children:c.exports.jsx(ee,{value:o.rowIndex})}),c.exports.jsx(ne,{label:"At Cell Index",children:c.exports.jsx(ee,{value:o.cellIndex})})]})};return c.exports.jsx(A,{})};var se,re,oe;X.parameters={...X.parameters,docs:{...(se=X.parameters)==null?void 0:se.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(oe=(re=X.parameters)==null?void 0:re.docs)==null?void 0:oe.source}}};var le,ie,ce;_.parameters={..._.parameters,docs:{...(le=_.parameters)==null?void 0:le.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(ce=(ie=_.parameters)==null?void 0:ie.docs)==null?void 0:ce.source}}};var de,ue,pe;Q.parameters={...Q.parameters,docs:{...(de=Q.parameters)==null?void 0:de.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(pe=(ue=Q.parameters)==null?void 0:ue.docs)==null?void 0:pe.source}}};var ge,me,be;H.parameters={...H.parameters,docs:{...(ge=H.parameters)==null?void 0:ge.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(be=(me=H.parameters)==null?void 0:me.docs)==null?void 0:be.source}}};var we,ve,he;E.parameters={...E.parameters,docs:{...(we=E.parameters)==null?void 0:we.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(he=(ve=E.parameters)==null?void 0:ve.docs)==null?void 0:he.source}}};var fe,xe,Pe;W.parameters={...W.parameters,docs:{...(fe=W.parameters)==null?void 0:fe.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(Pe=(xe=W.parameters)==null?void 0:xe.docs)==null?void 0:Pe.source}}};var Se,ye,Ce;q.parameters={...q.parameters,docs:{...(Se=q.parameters)==null?void 0:Se.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(Ce=(ye=q.parameters)==null?void 0:ye.docs)==null?void 0:Ce.source}}};var Re,Ie,ke;U.parameters={...U.parameters,docs:{...(Re=U.parameters)==null?void 0:Re.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(ke=(Ie=U.parameters)==null?void 0:Ie.docs)==null?void 0:ke.source}}};var Ae,De,Ve;N.parameters={...N.parameters,docs:{...(Ae=N.parameters)==null?void 0:Ae.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(Ve=(De=N.parameters)==null?void 0:De.docs)==null?void 0:Ve.source}}};var je,Fe,Te;L.parameters={...L.parameters,docs:{...(je=L.parameters)==null?void 0:je.docs,source:{originalSource:`args => {
+  return <Table
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} />;
+}`,...(Te=(Fe=L.parameters)==null?void 0:Fe.docs)==null?void 0:Te.source}}};var Oe,He,We;M.parameters={...M.parameters,docs:{...(Oe=M.parameters)==null?void 0:Oe.docs,source:{originalSource:`() => <Card heading={<Heading>Card heading</Heading>} padding={false}>
+    <Table table={{
+    ...storyData.table,
+    bordered: false
+  }} />
+  </Card>`,...(We=(He=M.parameters)==null?void 0:He.docs)==null?void 0:We.source}}};var Ue,Ne,Me;$.parameters={...$.parameters,docs:{...(Ue=$.parameters)==null?void 0:Ue.docs,source:{originalSource:`() => {
+  /*
+    Mock table data store (real apps should use Redux or similar)
+  */
+  const headings = ['Section', 'Width', 'Height'];
+  let units = ['', 'm', 'm'];
+  let data = [...Array(175).keys()].map((c, i) => [i, i * 2, i * 2]);
+  /*
+    Mock table data actions (real apps should use Redux or similar)
+  */
+  const convertUnit = (fromUnit, toUnit, value) => {
+    return fromUnit === 'm' && toUnit === 'ft' ? value * 3.28084 : fromUnit === 'ft' && toUnit === 'm' ? value / 3.28084 : value;
+  };
+  const onChangeValue = (evt, rowIndex, cellIndex, render) => {
+    data[rowIndex][cellIndex] = evt.target.value;
+    render();
+  };
+  const onAddRow = render => {
+    data = data.concat([['', '', '']]);
+    render();
+  };
+  const onDeleteRow = (rowIndex, render) => {
+    data = data.filter((r, i) => i !== rowIndex);
+    render();
+  };
+  const onChangeUnit = (evt, columnIndex, render) => {
+    const fromUnit = units[columnIndex];
+    const toUnit = evt.target.value;
+    units = units.map((u, i) => i === columnIndex ? toUnit : u);
+    data = data.map(r => r.map((c, i) => i === columnIndex ? convertUnit(fromUnit, toUnit, c) : c));
+    render();
+  };
+  /*
+    Container component manages state and configuration of table
+  */
+  const ManagedTable = () => {
+    const rowsPerPageOptions = [{
+      label: '10 / page',
+      value: 10
+    }, {
+      label: '20 / page',
+      value: 20
+    }, {
+      label: '50 / page',
+      value: 50
+    }, {
+      label: 'Show all',
+      value: 0
+    }];
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    const [selectedPage, setSelectedPage] = useState(1);
+    //hack to make Storybook re-render after event handlers alter data
+    //only using this because example does not manage data with Redux / props
+    const [toggle, forceRender] = useState(false);
+    const render = () => {
+      forceRender(!toggle);
+    };
+    const goToLastPage = () => {
+      const lastPage = Math.ceil(data.length / rowsPerPage);
+      setSelectedPage(lastPage);
+    };
+    const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
+    const lastVisibleRow = rowsPerPage === 0 ? data.length - 1 : firstVisibleRow + rowsPerPage;
+    const table = {
+      headers: [{
+        cells: headings.map(h => ({
+          value: h
+        })),
+        actions: [{
+          primary: true,
+          label: 'Add',
+          icon: 'add',
+          onClick: () => {
+            onAddRow(render);
+            goToLastPage();
+          }
+        }]
+      }, {
+        cells: [{}, {
+          options: [{
+            label: 'm',
+            value: 'm'
+          }, {
+            label: 'ft',
+            value: 'ft'
+          }],
+          value: units[1],
+          type: 'Select',
+          native: true,
+          onChange: evt => onChangeUnit(evt, 1, render)
+        }, {
+          options: [{
+            label: 'm',
+            value: 'm'
+          }, {
+            label: 'ft',
+            value: 'ft'
+          }],
+          value: units[2],
+          type: 'Select',
+          native: true,
+          onChange: evt => onChangeUnit(evt, 2, render)
+        }]
+      }],
+      rows: data.slice(firstVisibleRow, lastVisibleRow).map((row, i) => {
+        const rowIndex = firstVisibleRow + i;
+        return {
+          cells: [...Array(3).keys()].map((c, i) => ({
+            //https://stackoverflow.com/a/33352604
+            value: row[i],
+            type: 'Input',
+            onChange: evt => onChangeValue(evt, rowIndex, i, render)
+          })),
+          actions: [{
+            label: 'Delete',
+            icon: 'minus',
+            onClick: () => onDeleteRow(rowIndex, render)
+          }]
+        };
+      }),
+      footer: {
+        pagination: {
+          rowCount: data.length,
+          selectedPage,
+          rowsPerPage: {
+            onChange: evt => {
+              const {
+                value
+              } = evt.target;
+              setRowsPerPage(Number(value));
+            },
+            options: rowsPerPageOptions,
+            value: rowsPerPage
+          },
+          onSelectPage: evt => setSelectedPage(evt),
+          small: true
+        }
+      }
+    };
+    return <Table table={table} />;
+  };
+  return <ManagedTable />;
+}`,...(Me=(Ne=$.parameters)==null?void 0:Ne.docs)==null?void 0:Me.source}}};var _e,Qe,Ee;K.parameters={...K.parameters,docs:{...(_e=K.parameters)==null?void 0:_e.docs,source:{originalSource:`() => {
+  /*
+    Mock table data store (real apps should use Redux or similar)
+  */
+  const headings = ['Section', 'Width', 'Height'];
+  let keyedData = [...Array(175).keys()].map((_c, i) => ({
+    Section: i,
+    Width: i * 2,
+    Height: i * 2
+  }));
+  /*
+        Container component manages state and configuration of table
+      */
+  const TableWithSortAndFilter = () => {
+    const rowsPerPageOptions = [{
+      label: '10 / page',
+      value: 10
+    }, {
+      label: '20 / page',
+      value: 20
+    }, {
+      label: '50 / page',
+      value: 50
+    }, {
+      label: 'Show all',
+      value: 0
+    }];
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    const [selectedPage, setSelectedPage] = useState(1);
+    const [filters, setFilters] = useState({});
+    const [sorts, setSorts] = useState({});
+    useEffect(() => {
+      setSelectedPage(1);
+    }, [filters, sorts]);
+    const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
+    const lastVisibleRow = rowsPerPage === 0 ? keyedData.length - 1 : firstVisibleRow + rowsPerPage;
+    const filterAndSortDataRows = (dataRows, filters, sorts) => dataRows.filter(row => Object.keys(filters).every(key => {
+      return filters[key] === '' ? true : row[key].toString().includes(filters[key]);
+    })).sort((a, b) => Object.entries(sorts).map(([key, value]) => {
+      switch (value) {
+        case 'up':
+          {
+            return a[key] - b[key];
+          }
+        case 'down':
+          {
+            return b[key] - a[key];
+          }
+        default:
+          return 0;
+      }
+    }).reduce((a, acc) => a || acc, 0));
+    const dataHeaders = (dataRowsKeys, filters, setFilters, sorts, setSorts) => {
+      const dataSortCells = dataRowsKeys.map(key => {
+        const sort = Object.keys(sorts).includes(key) ? sorts[key] : '';
+        const prettifyHeaderValue = \`\${key[0].toUpperCase()}\${key.slice(1)}\`;
+        return {
+          key,
+          value: prettifyHeaderValue,
+          hasSort: true,
+          sort,
+          onSort: () => {
+            const newSort = sort === '' ? 'up' : sort === 'up' ? 'down' : '';
+            setSorts({
+              ...sorts,
+              [key]: newSort
+            });
+          }
+        };
+      });
+      const dataFilterCells = dataRowsKeys.map(key => {
+        const filterValue = Object.keys(filters).includes(key) ? filters[key] : '';
+        return {
+          key,
+          value: filterValue,
+          type: 'Input',
+          placeholder: 'Filter',
+          onChange: ev => setFilters({
+            ...filters,
+            [key]: ev.target.value
+          })
+        };
+      });
+      return {
+        dataSortCells,
+        dataFilterCells
+      };
+    };
+    const {
+      dataSortCells,
+      dataFilterCells
+    } = dataHeaders(headings, filters, setFilters, sorts, setSorts);
+    const filteredAndSortedData = filterAndSortDataRows(keyedData, filters, sorts);
+    const dataRows = [...filteredAndSortedData.slice(firstVisibleRow, lastVisibleRow).map(dataRow => {
+      const rowsCells = Object.entries(dataRow).map(([key, value]) => ({
+        key,
+        value,
+        type: 'Input',
+        disabled: true
+      }));
+      return {
+        cells: rowsCells
+      };
+    })];
+    const table = {
+      headers: [{
+        cells: dataSortCells
+      }, {
+        cells: dataFilterCells
+      }],
+      rows: dataRows,
+      footer: {
+        pagination: {
+          rowCount: filteredAndSortedData.length,
+          selectedPage,
+          rowsPerPage: {
+            onChange: evt => {
+              const {
+                value
+              } = evt.target;
+              setRowsPerPage(Number(value));
+            },
+            options: rowsPerPageOptions,
+            value: rowsPerPage
+          },
+          onSelectPage: evt => setSelectedPage(evt),
+          small: true
+        }
+      }
+    };
+    return <Table table={table} />;
+  };
+  return <TableWithSortAndFilter />;
+}`,...(Ee=(Qe=K.parameters)==null?void 0:Qe.docs)==null?void 0:Ee.source}}};var qe,Le,$e;B.parameters={...B.parameters,docs:{...(qe=B.parameters)==null?void 0:qe.docs,source:{originalSource:`() => {
+  const prices = {
+    tea: 3.6,
+    coffee: 3.2,
+    orange: 4.1
+  };
+  const drinks = [{
+    label: 'Tea',
+    value: 'tea'
+  }, {
+    label: 'Coffee',
+    value: 'coffee'
+  }, {
+    label: 'Orange juice',
+    value: 'orange'
+  }];
+  const defaultEmptyRow = {
+    cells: [{
+      type: 'Select',
+      options: drinks,
+      value: {
+        value: 'tea'
+      }
+    }, {
+      type: 'Input'
+    }, {
+      type: 'Static'
+    }]
+  };
+  const initialRows = [...Array(15).keys()].map((row, rowIndex) => ({
+    cells: [{
+      type: 'Select',
+      options: drinks,
+      value: {
+        value: 'tea'
+      }
+    }, {
+      type: 'Input',
+      value: rowIndex + 1
+    }, {
+      type: 'Static'
+    }]
+  }));
+  const [rows, setRows] = useState(initialRows);
+  const rowsPerPageOptions = [{
+    label: '10 / page',
+    value: 10
+  }, {
+    label: '20 / page',
+    value: 20
+  }, {
+    label: '50 / page',
+    value: 50
+  }, {
+    label: 'Show all',
+    value: 0
+  }];
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [selectedPage, setSelectedPage] = useState(1);
+  const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
+  const lastVisibleRow = rowsPerPage === 0 ? rows.length - 1 : firstVisibleRow + rowsPerPage;
+  const onAddRow = ({
+    newRow
+  } = {}) => {
+    const nextRows = produce(rows, draft => {
+      draft.push(newRow ?? defaultEmptyRow);
+    });
+    setRows(nextRows);
+  };
+  const onDeleteRow = ({
+    rowIndex
+  }) => {
+    const nextRows = produce(rows, draft => {
+      delete draft[rowIndex];
+    }).filter(r => r);
+    setRows(nextRows);
+  };
+  const onChangeDrink = ({
+    rowIndex,
+    value
+  }) => {
+    const nextRows = produce(rows, draft => {
+      draft[rowIndex].cells[0].value.value = value;
+    });
+    setRows(nextRows);
+  };
+  const onChangeQuantity = ({
+    rowIndex,
+    value
+  }) => {
+    const nextRows = produce(rows, draft => {
+      draft[rowIndex].cells[1].value = value;
+    });
+    setRows(nextRows);
+  };
+  const validQuantity = ({
+    value
+  }) => {
+    const numericValue = Number(value);
+    return !isNaN(numericValue) && isInteger(numericValue) && numericValue > 0;
+  };
+  const hydratedRows = rows.slice(firstVisibleRow, lastVisibleRow).map((row, i) => {
+    const rowIndex = firstVisibleRow + i;
+    const isLastRow = rowIndex === rows.length - 1;
+    return {
+      ...row,
+      cells: row?.cells.map((cell, cellIndex) => {
+        const drink = row?.cells?.[0]?.value?.value;
+        const quantity = row?.cells?.[1]?.value;
+        const drinkPrice = prices?.[drink];
+        const price = drinkPrice && validQuantity({
+          value: quantity
+        }) ? (drinkPrice * quantity).toFixed(2) : null;
+        if (cellIndex === 0) {
+          return {
+            ...cell,
+            onChange: evt => onChangeDrink({
+              rowIndex,
+              value: evt.target.value
+            })
+          };
+        } else if (cellIndex === 1) {
+          return {
+            ...cell,
+            onChange: evt => onChangeQuantity({
+              rowIndex,
+              value: evt.target.value
+            }),
+            error: !validQuantity({
+              value: cell.value
+            }) ? 'Must be valid whole number' : null
+          };
+        } else if (cellIndex === 2) {
+          return {
+            ...cell,
+            value: price
+          };
+        }
+      }),
+      actions: [{
+        label: 'Delete',
+        icon: 'minus',
+        onClick: () => onDeleteRow({
+          rowIndex
+        })
+      }]
+    };
+  });
+  return <Table table={{
+    defaultEmptyRow,
+    onAddRow,
+    columnAlignment: ['left', 'right', 'right'],
+    headers: [{
+      cells: [{
+        value: 'Drink'
+      }, {
+        value: 'Quantity'
+      }, {
+        value: 'Total Price (\xA3)'
+      }],
+      actions: [{
+        primary: true,
+        icon: 'plus',
+        label: 'Add',
+        onClick: () => onAddRow()
+      }]
+    }],
+    rows: hydratedRows,
+    footer: {
+      pagination: {
+        rowCount: rows.length,
+        selectedPage,
+        rowsPerPage: {
+          onChange: evt => {
+            const {
+              value
+            } = evt.target;
+            setRowsPerPage(Number(value));
+          },
+          options: rowsPerPageOptions,
+          value: rowsPerPage
+        },
+        onSelectPage: evt => setSelectedPage(evt),
+        small: true
+      }
+    }
+  }} />;
+}`,...($e=(Le=B.parameters)==null?void 0:Le.docs)==null?void 0:$e.source}}};var Ke,Be,ze;z.parameters={...z.parameters,docs:{...(Ke=z.parameters)==null?void 0:Ke.docs,source:{originalSource:`() => {
+  const headings = ['Section', 'Width', 'Height'];
+  let data = Array.from(Array(10), (c, i) => [i, i * 2, i * 2]);
+  const [pastedData, setpastedData] = useState({});
+  /*
+    Mock table data
+  */
+
+  const onChangeValue = (evt, rowIndex, cellIndex, render) => {
+    data[rowIndex][cellIndex] = evt.target.value;
+    render();
+  };
+  const handleOnPaste = (evt, rowIndex, cellIndex, render) => {
+    let pastedValues = evt.clipboardData.getData('text');
+    setpastedData({
+      rowIndex,
+      cellIndex,
+      pastedValues
+    });
+    render();
+    return {
+      pastedData
+    };
+  };
+  /*
+    Container component manages state and configuration of table
+  */
+  const CallbackCellTable = () => {
+    //hack to make Storybook re-render after event handlers alter data
+    //only using this because example does not manage data with Redux / props
+    const [toggle, forceRender] = useState(false);
+    const render = () => {
+      forceRender(!toggle);
+    };
+    const table = {
+      headers: [{
+        cells: headings.map(h => ({
+          value: h
+        }))
+      }],
+      rows: data.map((row, i) => {
+        const rowIndex = i;
+        //row
+        return {
+          cells: [...Array(3).keys()].map((c, i) => ({
+            //https://stackoverflow.com/a/33352604
+            value: row[i],
+            type: 'Input',
+            onChange: evt => onChangeValue(evt, rowIndex, i, render),
+            onPaste: evt => handleOnPaste(evt, rowIndex, i, render)
+          }))
+        };
+      })
+    };
+    return <>
+        <Table table={table} />
+        <Field label="Pasted Data">
+          <Input value={pastedData.pastedValues} />
+        </Field>
+        <Field label="At Row">
+          <Input value={pastedData.rowIndex} />
+        </Field>
+        <Field label="At Cell Index">
+          <Input value={pastedData.cellIndex} />
+        </Field>
+      </>;
+  };
+  return <CallbackCellTable />;
+}`,...(ze=(Be=z.parameters)==null?void 0:Be.docs)==null?void 0:ze.source}}};M.__docgenInfo={description:"",methods:[],displayName:"InCard"};$.__docgenInfo={description:"",methods:[],displayName:"Managed"};K.__docgenInfo={description:"",methods:[],displayName:"ManagedWithFilterAndSort"};B.__docgenInfo={description:"",methods:[],displayName:"AutoAddNewRow"};z.__docgenInfo={description:"",methods:[],displayName:"OnPasteCallback"};const $n=["Default","FixedWidth","AutoWidth","ColumnWidths","ColumnAlignment","ColumnHeaderAlignment","InfiniteScrollFixedHeight","InfiniteScrollFullHeight","InfiniteScrollShort","InfiniteScrollWithDragAndDrop","InCard","Managed","ManagedWithFilterAndSort","AutoAddNewRow","OnPasteCallback"];export{B as AutoAddNewRow,Q as AutoWidth,E as ColumnAlignment,W as ColumnHeaderAlignment,H as ColumnWidths,X as Default,_ as FixedWidth,M as InCard,q as InfiniteScrollFixedHeight,U as InfiniteScrollFullHeight,N as InfiniteScrollShort,L as InfiniteScrollWithDragAndDrop,$ as Managed,K as ManagedWithFilterAndSort,z as OnPasteCallback,$n as __namedExportsOrder,Ln as default};

package/dist/{assets/tabs-633ac3c9.css → storybook/assets/tabs.3dbf724d.css}

@@ -1 +1 @@
-:root{--color-primary-0: hsl(0, 0%, 100%);--color-primary-50: hsl(18.24742268, 82.90598291%, 97.5%);--color-primary-100: hsl(18.24742268, 82.90598291%, 92.5%);--color-primary-150: hsl(18.24742268, 82.90598291%, 87.5%);--color-primary-200: hsl(18.24742268, 82.90598291%, 82.5%);--color-primary-250: hsl(18.24742268, 82.90598291%, 77.5%);--color-primary-300: hsl(18.24742268, 82.90598291%, 72.5%);--color-primary-350: hsl(18.24742268, 82.90598291%, 67.5%);--color-primary-400: hsl(18.24742268, 82.90598291%, 62.5%);--color-primary-450: hsl(18.24742268, 82.90598291%, 57.5%);--color-primary-500: hsl(18.24742268, 82.90598291%, 52.5%);--color-primary-550: hsl(18.24742268, 82.90598291%, 47.5%);--color-primary-600: hsl(18.24742268, 82.90598291%, 42.5%);--color-primary-650: hsl(18.24742268, 82.90598291%, 37.5%);--color-primary-700: hsl(18.24742268, 82.90598291%, 32.5%);--color-primary-750: hsl(18.24742268, 82.90598291%, 27.5%);--color-primary-800: hsl(18.24742268, 82.90598291%, 22.5%);--color-primary-850: hsl(18.24742268, 82.90598291%, 17.5%);--color-primary-900: hsl(18.24742268, 82.90598291%, 12.5%);--color-primary-950: hsl(18.24742268, 82.90598291%, 7.5%);--color-primary-1000: hsl(18.24742268, 82.90598291%, 2.5%);--color-error-0: hsl(180, 100%, 100%);--color-error-50: hsl(0, 71.29186603%, 97.5%);--color-error-100: hsl(0, 71.29186603%, 92.5%);--color-error-150: hsl(0, 71.29186603%, 87.5%);--color-error-200: hsl(0, 71.29186603%, 82.5%);--color-error-250: hsl(0, 71.29186603%, 77.5%);--color-error-300: hsl(0, 71.29186603%, 72.5%);--color-error-350: hsl(0, 71.29186603%, 67.5%);--color-error-400: hsl(0, 71.29186603%, 62.5%);--color-error-450: hsl(0, 71.29186603%, 57.5%);--color-error-500: hsl(0, 71.29186603%, 52.5%);--color-error-550: hsl(0, 71.29186603%, 47.5%);--color-error-600: hsl(0, 71.29186603%, 42.5%);--color-error-650: hsl(0, 71.29186603%, 37.5%);--color-error-700: hsl(0, 71.29186603%, 32.5%);--color-error-750: hsl(0, 71.29186603%, 27.5%);--color-error-800: hsl(0, 71.29186603%, 22.5%);--color-error-850: hsl(0, 71.29186603%, 17.5%);--color-error-900: hsl(0, 71.29186603%, 12.5%);--color-error-950: hsl(0, 71.29186603%, 7.5%);--color-error-1000: hsl(0, 71.29186603%, 2.5%);--color-success-0: hsl(0, 0%, 100%);--color-success-50: hsl(120, 52.03252033%, 97.5%);--color-success-100: hsl(120, 52.03252033%, 92.5%);--color-success-150: hsl(120, 52.03252033%, 87.5%);--color-success-200: hsl(120, 52.03252033%, 82.5%);--color-success-250: hsl(120, 52.03252033%, 77.5%);--color-success-300: hsl(120, 52.03252033%, 72.5%);--color-success-350: hsl(120, 52.03252033%, 67.5%);--color-success-400: hsl(120, 52.03252033%, 62.5%);--color-success-450: hsl(120, 52.03252033%, 57.5%);--color-success-500: hsl(120, 52.03252033%, 52.5%);--color-success-550: hsl(120, 52.03252033%, 47.5%);--color-success-600: hsl(120, 52.03252033%, 42.5%);--color-success-650: hsl(120, 52.03252033%, 37.5%);--color-success-700: hsl(120, 52.03252033%, 32.5%);--color-success-750: hsl(120, 52.03252033%, 27.5%);--color-success-800: hsl(120, 52.03252033%, 22.5%);--color-success-850: hsl(120, 52.03252033%, 17.5%);--color-success-900: hsl(120, 52.03252033%, 12.5%);--color-success-950: hsl(120, 52.03252033%, 7.5%);--color-success-1000: hsl(120, 52.03252033%, 2.5%);--color-warning-0: hsl(240, 100%, 100%);--color-warning-50: hsl(44.9197861, 76.32653061%, 97.5%);--color-warning-100: hsl(44.9197861, 76.32653061%, 92.5%);--color-warning-150: hsl(44.9197861, 76.32653061%, 87.5%);--color-warning-200: hsl(44.9197861, 76.32653061%, 82.5%);--color-warning-250: hsl(44.9197861, 76.32653061%, 77.5%);--color-warning-300: hsl(44.9197861, 76.32653061%, 72.5%);--color-warning-350: hsl(44.9197861, 76.32653061%, 67.5%);--color-warning-400: hsl(44.9197861, 76.32653061%, 62.5%);--color-warning-450: hsl(44.9197861, 76.32653061%, 57.5%);--color-warning-500: hsl(44.9197861, 76.32653061%, 52.5%);--color-warning-550: hsl(44.9197861, 76.32653061%, 47.5%);--color-warning-600: hsl(44.9197861, 76.32653061%, 42.5%);--color-warning-650: hsl(44.9197861, 76.32653061%, 37.5%);--color-warning-700: hsl(44.9197861, 76.32653061%, 32.5%);--color-warning-750: hsl(44.9197861, 76.32653061%, 27.5%);--color-warning-800: hsl(44.9197861, 76.32653061%, 22.5%);--color-warning-850: hsl(44.9197861, 76.32653061%, 17.5%);--color-warning-900: hsl(44.9197861, 76.32653061%, 12.5%);--color-warning-950: hsl(44.9197861, 76.32653061%, 7.5%);--color-warning-1000: hsl(44.9197861, 76.32653061%, 2.5%);--color-info-0: hsl(0, 0%, 100%);--color-info-50: hsl(201.03092784, 82.90598291%, 97.5%);--color-info-100: hsl(201.03092784, 82.90598291%, 92.5%);--color-info-150: hsl(201.03092784, 82.90598291%, 87.5%);--color-info-200: hsl(201.03092784, 82.90598291%, 82.5%);--color-info-250: hsl(201.03092784, 82.90598291%, 77.5%);--color-info-300: hsl(201.03092784, 82.90598291%, 72.5%);--color-info-350: hsl(201.03092784, 82.90598291%, 67.5%);--color-info-400: hsl(201.03092784, 82.90598291%, 62.5%);--color-info-450: hsl(201.03092784, 82.90598291%, 57.5%);--color-info-500: hsl(201.03092784, 82.90598291%, 52.5%);--color-info-550: hsl(201.03092784, 82.90598291%, 47.5%);--color-info-600: hsl(201.03092784, 82.90598291%, 42.5%);--color-info-650: hsl(201.03092784, 82.90598291%, 37.5%);--color-info-700: hsl(201.03092784, 82.90598291%, 32.5%);--color-info-750: hsl(201.03092784, 82.90598291%, 27.5%);--color-info-800: hsl(201.03092784, 82.90598291%, 22.5%);--color-info-850: hsl(201.03092784, 82.90598291%, 17.5%);--color-info-900: hsl(201.03092784, 82.90598291%, 12.5%);--color-info-950: hsl(201.03092784, 82.90598291%, 7.5%);--color-info-1000: hsl(201.03092784, 82.90598291%, 2.5%);--color-neutral-0: hsl(0, 0%, 100%);--color-neutral-50: hsl(210, 10%, 97.5%);--color-neutral-100: hsl(210, 10%, 92.5%);--color-neutral-150: hsl(210, 10%, 87.5%);--color-neutral-200: hsl(210, 10%, 82.5%);--color-neutral-250: hsl(210, 10%, 77.5%);--color-neutral-300: hsl(210, 10%, 72.5%);--color-neutral-350: hsl(210, 10%, 67.5%);--color-neutral-400: hsl(210, 10%, 62.5%);--color-neutral-450: hsl(210, 10%, 57.5%);--color-neutral-500: hsl(210, 10%, 52.5%);--color-neutral-550: hsl(210, 10%, 47.5%);--color-neutral-600: hsl(210, 10%, 42.5%);--color-neutral-650: hsl(210, 10%, 37.5%);--color-neutral-700: hsl(210, 10%, 32.5%);--color-neutral-750: hsl(210, 10%, 27.5%);--color-neutral-800: hsl(210, 10%, 22.5%);--color-neutral-850: hsl(210, 10%, 17.5%);--color-neutral-900: hsl(210, 10%, 12.5%);--color-neutral-950: hsl(210, 10%, 7.5%);--color-neutral-1000: hsl(210, 10%, 2.5%);--color-primary-muted-0: hsl(0, 0%, 100%);--color-primary-muted-50: hsl(18.24742268, 57.90598291%, 97.5%);--color-primary-muted-100: hsl(18.24742268, 57.90598291%, 92.5%);--color-primary-muted-150: hsl(18.24742268, 57.90598291%, 87.5%);--color-primary-muted-200: hsl(18.24742268, 57.90598291%, 82.5%);--color-primary-muted-250: hsl(18.24742268, 57.90598291%, 77.5%);--color-primary-muted-300: hsl(18.24742268, 57.90598291%, 72.5%);--color-primary-muted-350: hsl(18.24742268, 57.90598291%, 67.5%);--color-primary-muted-400: hsl(18.24742268, 57.90598291%, 62.5%);--color-primary-muted-450: hsl(18.24742268, 57.90598291%, 57.5%);--color-primary-muted-500: hsl(18.24742268, 57.90598291%, 52.5%);--color-primary-muted-550: hsl(18.24742268, 57.90598291%, 47.5%);--color-primary-muted-600: hsl(18.24742268, 57.90598291%, 42.5%);--color-primary-muted-650: hsl(18.24742268, 57.90598291%, 37.5%);--color-primary-muted-700: hsl(18.24742268, 57.90598291%, 32.5%);--color-primary-muted-750: hsl(18.24742268, 57.90598291%, 27.5%);--color-primary-muted-800: hsl(18.24742268, 57.90598291%, 22.5%);--color-primary-muted-850: hsl(18.24742268, 57.90598291%, 17.5%);--color-primary-muted-900: hsl(18.24742268, 57.90598291%, 12.5%);--color-primary-muted-950: hsl(18.24742268, 57.90598291%, 7.5%);--color-primary-muted-1000: hsl(18.24742268, 57.90598291%, 2.5%);--color-error-muted-0: hsl(180, 100%, 100%);--color-error-muted-50: hsl(0, 46.29186603%, 97.5%);--color-error-muted-100: hsl(0, 46.29186603%, 92.5%);--color-error-muted-150: hsl(0, 46.29186603%, 87.5%);--color-error-muted-200: hsl(0, 46.29186603%, 82.5%);--color-error-muted-250: hsl(0, 46.29186603%, 77.5%);--color-error-muted-300: hsl(0, 46.29186603%, 72.5%);--color-error-muted-350: hsl(0, 46.29186603%, 67.5%);--color-error-muted-400: hsl(0, 46.29186603%, 62.5%);--color-error-muted-450: hsl(0, 46.29186603%, 57.5%);--color-error-muted-500: hsl(0, 46.29186603%, 52.5%);--color-error-muted-550: hsl(0, 46.29186603%, 47.5%);--color-error-muted-600: hsl(0, 46.29186603%, 42.5%);--color-error-muted-650: hsl(0, 46.29186603%, 37.5%);--color-error-muted-700: hsl(0, 46.29186603%, 32.5%);--color-error-muted-750: hsl(0, 46.29186603%, 27.5%);--color-error-muted-800: hsl(0, 46.29186603%, 22.5%);--color-error-muted-850: hsl(0, 46.29186603%, 17.5%);--color-error-muted-900: hsl(0, 46.29186603%, 12.5%);--color-error-muted-950: hsl(0, 46.29186603%, 7.5%);--color-error-muted-1000: hsl(0, 46.29186603%, 2.5%);--color-success-muted-0: hsl(0, 0%, 100%);--color-success-muted-50: hsl(120, 27.03252033%, 97.5%);--color-success-muted-100: hsl(120, 27.03252033%, 92.5%);--color-success-muted-150: hsl(120, 27.03252033%, 87.5%);--color-success-muted-200: hsl(120, 27.03252033%, 82.5%);--color-success-muted-250: hsl(120, 27.03252033%, 77.5%);--color-success-muted-300: hsl(120, 27.03252033%, 72.5%);--color-success-muted-350: hsl(120, 27.03252033%, 67.5%);--color-success-muted-400: hsl(120, 27.03252033%, 62.5%);--color-success-muted-450: hsl(120, 27.03252033%, 57.5%);--color-success-muted-500: hsl(120, 27.03252033%, 52.5%);--color-success-muted-550: hsl(120, 27.03252033%, 47.5%);--color-success-muted-600: hsl(120, 27.03252033%, 42.5%);--color-success-muted-650: hsl(120, 27.03252033%, 37.5%);--color-success-muted-700: hsl(120, 27.03252033%, 32.5%);--color-success-muted-750: hsl(120, 27.03252033%, 27.5%);--color-success-muted-800: hsl(120, 27.03252033%, 22.5%);--color-success-muted-850: hsl(120, 27.03252033%, 17.5%);--color-success-muted-900: hsl(120, 27.03252033%, 12.5%);--color-success-muted-950: hsl(120, 27.03252033%, 7.5%);--color-success-muted-1000: hsl(120, 27.03252033%, 2.5%);--color-warning-muted-0: hsl(240, 100%, 100%);--color-warning-muted-50: hsl(44.9197861, 51.32653061%, 97.5%);--color-warning-muted-100: hsl(44.9197861, 51.32653061%, 92.5%);--color-warning-muted-150: hsl(44.9197861, 51.32653061%, 87.5%);--color-warning-muted-200: hsl(44.9197861, 51.32653061%, 82.5%);--color-warning-muted-250: hsl(44.9197861, 51.32653061%, 77.5%);--color-warning-muted-300: hsl(44.9197861, 51.32653061%, 72.5%);--color-warning-muted-350: hsl(44.9197861, 51.32653061%, 67.5%);--color-warning-muted-400: hsl(44.9197861, 51.32653061%, 62.5%);--color-warning-muted-450: hsl(44.9197861, 51.32653061%, 57.5%);--color-warning-muted-500: hsl(44.9197861, 51.32653061%, 52.5%);--color-warning-muted-550: hsl(44.9197861, 51.32653061%, 47.5%);--color-warning-muted-600: hsl(44.9197861, 51.32653061%, 42.5%);--color-warning-muted-650: hsl(44.9197861, 51.32653061%, 37.5%);--color-warning-muted-700: hsl(44.9197861, 51.32653061%, 32.5%);--color-warning-muted-750: hsl(44.9197861, 51.32653061%, 27.5%);--color-warning-muted-800: hsl(44.9197861, 51.32653061%, 22.5%);--color-warning-muted-850: hsl(44.9197861, 51.32653061%, 17.5%);--color-warning-muted-900: hsl(44.9197861, 51.32653061%, 12.5%);--color-warning-muted-950: hsl(44.9197861, 51.32653061%, 7.5%);--color-warning-muted-1000: hsl(44.9197861, 51.32653061%, 2.5%);--color-info-muted-0: hsl(0, 0%, 100%);--color-info-muted-50: hsl(201.03092784, 57.90598291%, 97.5%);--color-info-muted-100: hsl(201.03092784, 57.90598291%, 92.5%);--color-info-muted-150: hsl(201.03092784, 57.90598291%, 87.5%);--color-info-muted-200: hsl(201.03092784, 57.90598291%, 82.5%);--color-info-muted-250: hsl(201.03092784, 57.90598291%, 77.5%);--color-info-muted-300: hsl(201.03092784, 57.90598291%, 72.5%);--color-info-muted-350: hsl(201.03092784, 57.90598291%, 67.5%);--color-info-muted-400: hsl(201.03092784, 57.90598291%, 62.5%);--color-info-muted-450: hsl(201.03092784, 57.90598291%, 57.5%);--color-info-muted-500: hsl(201.03092784, 57.90598291%, 52.5%);--color-info-muted-550: hsl(201.03092784, 57.90598291%, 47.5%);--color-info-muted-600: hsl(201.03092784, 57.90598291%, 42.5%);--color-info-muted-650: hsl(201.03092784, 57.90598291%, 37.5%);--color-info-muted-700: hsl(201.03092784, 57.90598291%, 32.5%);--color-info-muted-750: hsl(201.03092784, 57.90598291%, 27.5%);--color-info-muted-800: hsl(201.03092784, 57.90598291%, 22.5%);--color-info-muted-850: hsl(201.03092784, 57.90598291%, 17.5%);--color-info-muted-900: hsl(201.03092784, 57.90598291%, 12.5%);--color-info-muted-950: hsl(201.03092784, 57.90598291%, 7.5%);--color-info-muted-1000: hsl(201.03092784, 57.90598291%, 2.5%)}:root{color-scheme:initial;--size: 32px;--size-sm: 24px;--size-xs: 16px;--spacing-3xl: 36px;--spacing-2xl: 32px;--spacing-xl: 28px;--spacing-lg: 24px;--spacing: 20px;--spacing-sm: 16px;--spacing-xs: 12px;--spacing-2xs: 8px;--spacing-3xs: 4px;--padding-input-x: 12px;--padding-input-y: 6.5px;--padding-input: var(--padding-input-y) var(--padding-input-x);--padding-input-small-x: 7px;--padding-input-small-y: 3.5px;--padding-input-small: var(--padding-input-small-y) var(--padding-input-small-x);--border-radius: 4px;--color-text: rgba(0, 0, 0, .87);--color-text-muted: #7d7b7a;--color-text-faint: #acabab;--color-text-error: hsl(0, 40%, 50%);--color-text-warning: var(--color-warning-700);--color-text-success: hsl(120, 40%, 50%);--color-text-info: hsl(201.03092784, 40%, 50%);--color-text-primary: #eb6429;--color-text-primary-hover: #ce4c13;--color-text-primary-active: #9f3b0f;--color-text-placeholder: rgba(0, 0, 0, .3);--color-background: #f5f7f9;--color-background-raised: white;--color-background-disabled: rgba(0, 0, 0, .025);--color-background-info: hsl(201.03092784, 40%, 90%);--color-background-error: hsl(0, 40%, 90%);--color-background-success: hsl(120, 40%, 90%);--color-background-warning: var(--color-warning-100);--color-background-primary: #eb6429;--color-background-input: white;--color-background-listitem-active: #fff0e4;--color-background-listitem-hover: #f5f7f9;--color-background-menuitem-active: #edf1f4;--color-background-menuitem-hover: #f5f7f9;--color-background-menuitem-activehover: #e5eaef;--color-border: #ddd;--color-border-checkbox: var(--color-neutral-300);--color-border-hover: var(--color-neutral-400);--color-border-focus: var(--color-info-muted-500);--color-border-error: var(--color-error-muted-300);--color-border-error-hover: var(--color-error-muted-400);--color-border-warning: var(--color-warning-muted-300);--color-border-warning-hover: var(--color-warning-muted-400);--shadow-focus: 0 0 0 2px rgba(41, 167, 235, .25)}html[data-theme=dark]{color-scheme:dark;--color-text: var(--color-neutral-200);--color-text-muted: var(--color-neutral-400);--color-text-faint: var(--color-neutral-600);--color-text-primary: var(--color-primary-muted-450);--color-text-primary-active: var(--color-primary-muted-350);--color-text-primary-hover: var(--color-primary-muted-400);--color-text-error: var(--color-error-muted-300);--color-text-info: var(--color-info-muted-300);--color-text-success: var(--color-success-muted-300);--color-text-warning: var(--color-warning-muted-300);--color-text-placeholder: rgba(255, 255, 255, .3);--color-background: var(--color-neutral-900);--color-background-raised: var(--color-neutral-800);--color-background-disabled: rgba(0, 0, 0, .2);--color-background-error: var(--color-error-muted-700);--color-background-info: var(--color-info-muted-700);--color-background-success: var(--color-success-muted-700);--color-background-warning: var(--color-warning-muted-700);--color-background-primary: var(--color-primary-muted-500);--color-background-input: var(--color-neutral-750);--color-background-listitem-active: var(--color-primary-muted-750);--color-background-listitem-hover: var(--color-neutral-750);--color-background-menuitem-active: var(--color-neutral-650);--color-background-menuitem-hover: var(--color-neutral-700);--color-background-menuitem-activehover: var(--color-neutral-600);--color-border: var(--color-neutral-1000);--color-border-checkbox: var(--color-neutral-1000);--color-border-hover: var(--color-neutral-500);--color-border-focus: var(--color-info-500);--color-border-error: var(--color-neutral-1000);--color-border-warning: var(--color-neutral-1000);--shadow-focus: 0 0 0 2px rgba(41, 167, 235, .5)}._tabs_2ceh1_341{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--color-border);flex-shrink:0}._tabs_2ceh1_341._padding_2ceh1_347{padding-left:20px;padding-right:20px}._tabs_2ceh1_341._margin_2ceh1_351{margin:1rem 0}._contentPadding_2ceh1_354{padding-top:10px}._item_2ceh1_357{align-self:flex-end;display:flex;align-items:center;position:relative;vertical-align:middle;line-height:1;text-decoration:none;flex:0 0 auto;-webkit-user-select:none;user-select:none;padding:.85714286em 0;transition:border .1s ease,color .1s ease;margin-bottom:-1px;border-bottom:1px solid transparent;text-transform:uppercase;letter-spacing:.05em;font-weight:400;color:var(--color-text-primary);cursor:pointer}._item_2ceh1_357:not(:last-child){margin-right:1.5rem}._item_2ceh1_357:hover{color:var(--color-text-primary-hover)}._item_2ceh1_357:active{color:var(--color-text-primary-active)}._item_2ceh1_357._active_2ceh1_386{border-color:var(--color-text);color:var(--color-text);cursor:default}._item_2ceh1_357._hidden_2ceh1_391{display:none!important}._item_2ceh1_357._disabled_2ceh1_394{color:var(--color-text-faint);pointer-events:none}._item_2ceh1_357._left_2ceh1_398+._item_2ceh1_357._right_2ceh1_398{margin-left:auto}
+:root{--color-primary-0: hsl(0, 0%, 100%);--color-primary-50: hsl(18.24742268, 82.90598291%, 97.5%);--color-primary-100: hsl(18.24742268, 82.90598291%, 92.5%);--color-primary-150: hsl(18.24742268, 82.90598291%, 87.5%);--color-primary-200: hsl(18.24742268, 82.90598291%, 82.5%);--color-primary-250: hsl(18.24742268, 82.90598291%, 77.5%);--color-primary-300: hsl(18.24742268, 82.90598291%, 72.5%);--color-primary-350: hsl(18.24742268, 82.90598291%, 67.5%);--color-primary-400: hsl(18.24742268, 82.90598291%, 62.5%);--color-primary-450: hsl(18.24742268, 82.90598291%, 57.5%);--color-primary-500: hsl(18.24742268, 82.90598291%, 52.5%);--color-primary-550: hsl(18.24742268, 82.90598291%, 47.5%);--color-primary-600: hsl(18.24742268, 82.90598291%, 42.5%);--color-primary-650: hsl(18.24742268, 82.90598291%, 37.5%);--color-primary-700: hsl(18.24742268, 82.90598291%, 32.5%);--color-primary-750: hsl(18.24742268, 82.90598291%, 27.5%);--color-primary-800: hsl(18.24742268, 82.90598291%, 22.5%);--color-primary-850: hsl(18.24742268, 82.90598291%, 17.5%);--color-primary-900: hsl(18.24742268, 82.90598291%, 12.5%);--color-primary-950: hsl(18.24742268, 82.90598291%, 7.5%);--color-primary-1000: hsl(18.24742268, 82.90598291%, 2.5%);--color-error-0: hsl(180, 100%, 100%);--color-error-50: hsl(0, 71.29186603%, 97.5%);--color-error-100: hsl(0, 71.29186603%, 92.5%);--color-error-150: hsl(0, 71.29186603%, 87.5%);--color-error-200: hsl(0, 71.29186603%, 82.5%);--color-error-250: hsl(0, 71.29186603%, 77.5%);--color-error-300: hsl(0, 71.29186603%, 72.5%);--color-error-350: hsl(0, 71.29186603%, 67.5%);--color-error-400: hsl(0, 71.29186603%, 62.5%);--color-error-450: hsl(0, 71.29186603%, 57.5%);--color-error-500: hsl(0, 71.29186603%, 52.5%);--color-error-550: hsl(0, 71.29186603%, 47.5%);--color-error-600: hsl(0, 71.29186603%, 42.5%);--color-error-650: hsl(0, 71.29186603%, 37.5%);--color-error-700: hsl(0, 71.29186603%, 32.5%);--color-error-750: hsl(0, 71.29186603%, 27.5%);--color-error-800: hsl(0, 71.29186603%, 22.5%);--color-error-850: hsl(0, 71.29186603%, 17.5%);--color-error-900: hsl(0, 71.29186603%, 12.5%);--color-error-950: hsl(0, 71.29186603%, 7.5%);--color-error-1000: hsl(0, 71.29186603%, 2.5%);--color-success-0: hsl(0, 0%, 100%);--color-success-50: hsl(120, 52.03252033%, 97.5%);--color-success-100: hsl(120, 52.03252033%, 92.5%);--color-success-150: hsl(120, 52.03252033%, 87.5%);--color-success-200: hsl(120, 52.03252033%, 82.5%);--color-success-250: hsl(120, 52.03252033%, 77.5%);--color-success-300: hsl(120, 52.03252033%, 72.5%);--color-success-350: hsl(120, 52.03252033%, 67.5%);--color-success-400: hsl(120, 52.03252033%, 62.5%);--color-success-450: hsl(120, 52.03252033%, 57.5%);--color-success-500: hsl(120, 52.03252033%, 52.5%);--color-success-550: hsl(120, 52.03252033%, 47.5%);--color-success-600: hsl(120, 52.03252033%, 42.5%);--color-success-650: hsl(120, 52.03252033%, 37.5%);--color-success-700: hsl(120, 52.03252033%, 32.5%);--color-success-750: hsl(120, 52.03252033%, 27.5%);--color-success-800: hsl(120, 52.03252033%, 22.5%);--color-success-850: hsl(120, 52.03252033%, 17.5%);--color-success-900: hsl(120, 52.03252033%, 12.5%);--color-success-950: hsl(120, 52.03252033%, 7.5%);--color-success-1000: hsl(120, 52.03252033%, 2.5%);--color-warning-0: hsl(240, 100%, 100%);--color-warning-50: hsl(44.9197861, 76.32653061%, 97.5%);--color-warning-100: hsl(44.9197861, 76.32653061%, 92.5%);--color-warning-150: hsl(44.9197861, 76.32653061%, 87.5%);--color-warning-200: hsl(44.9197861, 76.32653061%, 82.5%);--color-warning-250: hsl(44.9197861, 76.32653061%, 77.5%);--color-warning-300: hsl(44.9197861, 76.32653061%, 72.5%);--color-warning-350: hsl(44.9197861, 76.32653061%, 67.5%);--color-warning-400: hsl(44.9197861, 76.32653061%, 62.5%);--color-warning-450: hsl(44.9197861, 76.32653061%, 57.5%);--color-warning-500: hsl(44.9197861, 76.32653061%, 52.5%);--color-warning-550: hsl(44.9197861, 76.32653061%, 47.5%);--color-warning-600: hsl(44.9197861, 76.32653061%, 42.5%);--color-warning-650: hsl(44.9197861, 76.32653061%, 37.5%);--color-warning-700: hsl(44.9197861, 76.32653061%, 32.5%);--color-warning-750: hsl(44.9197861, 76.32653061%, 27.5%);--color-warning-800: hsl(44.9197861, 76.32653061%, 22.5%);--color-warning-850: hsl(44.9197861, 76.32653061%, 17.5%);--color-warning-900: hsl(44.9197861, 76.32653061%, 12.5%);--color-warning-950: hsl(44.9197861, 76.32653061%, 7.5%);--color-warning-1000: hsl(44.9197861, 76.32653061%, 2.5%);--color-info-0: hsl(0, 0%, 100%);--color-info-50: hsl(201.03092784, 82.90598291%, 97.5%);--color-info-100: hsl(201.03092784, 82.90598291%, 92.5%);--color-info-150: hsl(201.03092784, 82.90598291%, 87.5%);--color-info-200: hsl(201.03092784, 82.90598291%, 82.5%);--color-info-250: hsl(201.03092784, 82.90598291%, 77.5%);--color-info-300: hsl(201.03092784, 82.90598291%, 72.5%);--color-info-350: hsl(201.03092784, 82.90598291%, 67.5%);--color-info-400: hsl(201.03092784, 82.90598291%, 62.5%);--color-info-450: hsl(201.03092784, 82.90598291%, 57.5%);--color-info-500: hsl(201.03092784, 82.90598291%, 52.5%);--color-info-550: hsl(201.03092784, 82.90598291%, 47.5%);--color-info-600: hsl(201.03092784, 82.90598291%, 42.5%);--color-info-650: hsl(201.03092784, 82.90598291%, 37.5%);--color-info-700: hsl(201.03092784, 82.90598291%, 32.5%);--color-info-750: hsl(201.03092784, 82.90598291%, 27.5%);--color-info-800: hsl(201.03092784, 82.90598291%, 22.5%);--color-info-850: hsl(201.03092784, 82.90598291%, 17.5%);--color-info-900: hsl(201.03092784, 82.90598291%, 12.5%);--color-info-950: hsl(201.03092784, 82.90598291%, 7.5%);--color-info-1000: hsl(201.03092784, 82.90598291%, 2.5%);--color-neutral-0: hsl(0, 0%, 100%);--color-neutral-50: hsl(210, 10%, 97.5%);--color-neutral-100: hsl(210, 10%, 92.5%);--color-neutral-150: hsl(210, 10%, 87.5%);--color-neutral-200: hsl(210, 10%, 82.5%);--color-neutral-250: hsl(210, 10%, 77.5%);--color-neutral-300: hsl(210, 10%, 72.5%);--color-neutral-350: hsl(210, 10%, 67.5%);--color-neutral-400: hsl(210, 10%, 62.5%);--color-neutral-450: hsl(210, 10%, 57.5%);--color-neutral-500: hsl(210, 10%, 52.5%);--color-neutral-550: hsl(210, 10%, 47.5%);--color-neutral-600: hsl(210, 10%, 42.5%);--color-neutral-650: hsl(210, 10%, 37.5%);--color-neutral-700: hsl(210, 10%, 32.5%);--color-neutral-750: hsl(210, 10%, 27.5%);--color-neutral-800: hsl(210, 10%, 22.5%);--color-neutral-850: hsl(210, 10%, 17.5%);--color-neutral-900: hsl(210, 10%, 12.5%);--color-neutral-950: hsl(210, 10%, 7.5%);--color-neutral-1000: hsl(210, 10%, 2.5%);--color-primary-muted-0: hsl(0, 0%, 100%);--color-primary-muted-50: hsl(18.24742268, 57.90598291%, 97.5%);--color-primary-muted-100: hsl(18.24742268, 57.90598291%, 92.5%);--color-primary-muted-150: hsl(18.24742268, 57.90598291%, 87.5%);--color-primary-muted-200: hsl(18.24742268, 57.90598291%, 82.5%);--color-primary-muted-250: hsl(18.24742268, 57.90598291%, 77.5%);--color-primary-muted-300: hsl(18.24742268, 57.90598291%, 72.5%);--color-primary-muted-350: hsl(18.24742268, 57.90598291%, 67.5%);--color-primary-muted-400: hsl(18.24742268, 57.90598291%, 62.5%);--color-primary-muted-450: hsl(18.24742268, 57.90598291%, 57.5%);--color-primary-muted-500: hsl(18.24742268, 57.90598291%, 52.5%);--color-primary-muted-550: hsl(18.24742268, 57.90598291%, 47.5%);--color-primary-muted-600: hsl(18.24742268, 57.90598291%, 42.5%);--color-primary-muted-650: hsl(18.24742268, 57.90598291%, 37.5%);--color-primary-muted-700: hsl(18.24742268, 57.90598291%, 32.5%);--color-primary-muted-750: hsl(18.24742268, 57.90598291%, 27.5%);--color-primary-muted-800: hsl(18.24742268, 57.90598291%, 22.5%);--color-primary-muted-850: hsl(18.24742268, 57.90598291%, 17.5%);--color-primary-muted-900: hsl(18.24742268, 57.90598291%, 12.5%);--color-primary-muted-950: hsl(18.24742268, 57.90598291%, 7.5%);--color-primary-muted-1000: hsl(18.24742268, 57.90598291%, 2.5%);--color-error-muted-0: hsl(180, 100%, 100%);--color-error-muted-50: hsl(0, 46.29186603%, 97.5%);--color-error-muted-100: hsl(0, 46.29186603%, 92.5%);--color-error-muted-150: hsl(0, 46.29186603%, 87.5%);--color-error-muted-200: hsl(0, 46.29186603%, 82.5%);--color-error-muted-250: hsl(0, 46.29186603%, 77.5%);--color-error-muted-300: hsl(0, 46.29186603%, 72.5%);--color-error-muted-350: hsl(0, 46.29186603%, 67.5%);--color-error-muted-400: hsl(0, 46.29186603%, 62.5%);--color-error-muted-450: hsl(0, 46.29186603%, 57.5%);--color-error-muted-500: hsl(0, 46.29186603%, 52.5%);--color-error-muted-550: hsl(0, 46.29186603%, 47.5%);--color-error-muted-600: hsl(0, 46.29186603%, 42.5%);--color-error-muted-650: hsl(0, 46.29186603%, 37.5%);--color-error-muted-700: hsl(0, 46.29186603%, 32.5%);--color-error-muted-750: hsl(0, 46.29186603%, 27.5%);--color-error-muted-800: hsl(0, 46.29186603%, 22.5%);--color-error-muted-850: hsl(0, 46.29186603%, 17.5%);--color-error-muted-900: hsl(0, 46.29186603%, 12.5%);--color-error-muted-950: hsl(0, 46.29186603%, 7.5%);--color-error-muted-1000: hsl(0, 46.29186603%, 2.5%);--color-success-muted-0: hsl(0, 0%, 100%);--color-success-muted-50: hsl(120, 27.03252033%, 97.5%);--color-success-muted-100: hsl(120, 27.03252033%, 92.5%);--color-success-muted-150: hsl(120, 27.03252033%, 87.5%);--color-success-muted-200: hsl(120, 27.03252033%, 82.5%);--color-success-muted-250: hsl(120, 27.03252033%, 77.5%);--color-success-muted-300: hsl(120, 27.03252033%, 72.5%);--color-success-muted-350: hsl(120, 27.03252033%, 67.5%);--color-success-muted-400: hsl(120, 27.03252033%, 62.5%);--color-success-muted-450: hsl(120, 27.03252033%, 57.5%);--color-success-muted-500: hsl(120, 27.03252033%, 52.5%);--color-success-muted-550: hsl(120, 27.03252033%, 47.5%);--color-success-muted-600: hsl(120, 27.03252033%, 42.5%);--color-success-muted-650: hsl(120, 27.03252033%, 37.5%);--color-success-muted-700: hsl(120, 27.03252033%, 32.5%);--color-success-muted-750: hsl(120, 27.03252033%, 27.5%);--color-success-muted-800: hsl(120, 27.03252033%, 22.5%);--color-success-muted-850: hsl(120, 27.03252033%, 17.5%);--color-success-muted-900: hsl(120, 27.03252033%, 12.5%);--color-success-muted-950: hsl(120, 27.03252033%, 7.5%);--color-success-muted-1000: hsl(120, 27.03252033%, 2.5%);--color-warning-muted-0: hsl(240, 100%, 100%);--color-warning-muted-50: hsl(44.9197861, 51.32653061%, 97.5%);--color-warning-muted-100: hsl(44.9197861, 51.32653061%, 92.5%);--color-warning-muted-150: hsl(44.9197861, 51.32653061%, 87.5%);--color-warning-muted-200: hsl(44.9197861, 51.32653061%, 82.5%);--color-warning-muted-250: hsl(44.9197861, 51.32653061%, 77.5%);--color-warning-muted-300: hsl(44.9197861, 51.32653061%, 72.5%);--color-warning-muted-350: hsl(44.9197861, 51.32653061%, 67.5%);--color-warning-muted-400: hsl(44.9197861, 51.32653061%, 62.5%);--color-warning-muted-450: hsl(44.9197861, 51.32653061%, 57.5%);--color-warning-muted-500: hsl(44.9197861, 51.32653061%, 52.5%);--color-warning-muted-550: hsl(44.9197861, 51.32653061%, 47.5%);--color-warning-muted-600: hsl(44.9197861, 51.32653061%, 42.5%);--color-warning-muted-650: hsl(44.9197861, 51.32653061%, 37.5%);--color-warning-muted-700: hsl(44.9197861, 51.32653061%, 32.5%);--color-warning-muted-750: hsl(44.9197861, 51.32653061%, 27.5%);--color-warning-muted-800: hsl(44.9197861, 51.32653061%, 22.5%);--color-warning-muted-850: hsl(44.9197861, 51.32653061%, 17.5%);--color-warning-muted-900: hsl(44.9197861, 51.32653061%, 12.5%);--color-warning-muted-950: hsl(44.9197861, 51.32653061%, 7.5%);--color-warning-muted-1000: hsl(44.9197861, 51.32653061%, 2.5%);--color-info-muted-0: hsl(0, 0%, 100%);--color-info-muted-50: hsl(201.03092784, 57.90598291%, 97.5%);--color-info-muted-100: hsl(201.03092784, 57.90598291%, 92.5%);--color-info-muted-150: hsl(201.03092784, 57.90598291%, 87.5%);--color-info-muted-200: hsl(201.03092784, 57.90598291%, 82.5%);--color-info-muted-250: hsl(201.03092784, 57.90598291%, 77.5%);--color-info-muted-300: hsl(201.03092784, 57.90598291%, 72.5%);--color-info-muted-350: hsl(201.03092784, 57.90598291%, 67.5%);--color-info-muted-400: hsl(201.03092784, 57.90598291%, 62.5%);--color-info-muted-450: hsl(201.03092784, 57.90598291%, 57.5%);--color-info-muted-500: hsl(201.03092784, 57.90598291%, 52.5%);--color-info-muted-550: hsl(201.03092784, 57.90598291%, 47.5%);--color-info-muted-600: hsl(201.03092784, 57.90598291%, 42.5%);--color-info-muted-650: hsl(201.03092784, 57.90598291%, 37.5%);--color-info-muted-700: hsl(201.03092784, 57.90598291%, 32.5%);--color-info-muted-750: hsl(201.03092784, 57.90598291%, 27.5%);--color-info-muted-800: hsl(201.03092784, 57.90598291%, 22.5%);--color-info-muted-850: hsl(201.03092784, 57.90598291%, 17.5%);--color-info-muted-900: hsl(201.03092784, 57.90598291%, 12.5%);--color-info-muted-950: hsl(201.03092784, 57.90598291%, 7.5%);--color-info-muted-1000: hsl(201.03092784, 57.90598291%, 2.5%)}:root{color-scheme:initial;--size: 32px;--size-sm: 24px;--size-xs: 16px;--spacing-3xl: 36px;--spacing-2xl: 32px;--spacing-xl: 28px;--spacing-lg: 24px;--spacing: 20px;--spacing-sm: 16px;--spacing-xs: 12px;--spacing-2xs: 8px;--spacing-3xs: 4px;--padding-input-x: 12px;--padding-input-y: 6.5px;--padding-input: var(--padding-input-y) var(--padding-input-x);--padding-input-small-x: 7px;--padding-input-small-y: 3.5px;--padding-input-small: var(--padding-input-small-y) var(--padding-input-small-x);--border-radius: 4px;--color-text: rgba(0, 0, 0, .87);--color-text-muted: #7d7b7a;--color-text-faint: #acabab;--color-text-error: hsl(0, 40%, 50%);--color-text-warning: var(--color-warning-700);--color-text-success: hsl(120, 40%, 50%);--color-text-info: hsl(201.03092784, 40%, 50%);--color-text-primary: #eb6429;--color-text-primary-hover: #ce4c13;--color-text-primary-active: #9f3b0f;--color-text-placeholder: rgba(0, 0, 0, .3);--color-background: #f5f7f9;--color-background-raised: white;--color-background-disabled: rgba(0, 0, 0, .025);--color-background-info: hsl(201.03092784, 40%, 90%);--color-background-error: hsl(0, 40%, 90%);--color-background-success: hsl(120, 40%, 90%);--color-background-warning: var(--color-warning-100);--color-background-primary: #eb6429;--color-background-input: white;--color-background-listitem-active: #fff0e4;--color-background-listitem-hover: #f5f7f9;--color-background-menuitem-active: #edf1f4;--color-background-menuitem-hover: #f5f7f9;--color-background-menuitem-activehover: #e5eaef;--color-border: #ddd;--color-border-checkbox: var(--color-neutral-300);--color-border-hover: var(--color-neutral-400);--color-border-focus: var(--color-info-muted-500);--color-border-error: var(--color-error-muted-300);--color-border-error-hover: var(--color-error-muted-400);--color-border-warning: var(--color-warning-muted-300);--color-border-warning-hover: var(--color-warning-muted-400);--shadow-focus: 0 0 0 2px rgba(41, 167, 235, .25)}html[data-theme=dark]{color-scheme:dark;--color-text: var(--color-neutral-200);--color-text-muted: var(--color-neutral-400);--color-text-faint: var(--color-neutral-600);--color-text-primary: var(--color-primary-muted-450);--color-text-primary-active: var(--color-primary-muted-350);--color-text-primary-hover: var(--color-primary-muted-400);--color-text-error: var(--color-error-muted-300);--color-text-info: var(--color-info-muted-300);--color-text-success: var(--color-success-muted-300);--color-text-warning: var(--color-warning-muted-300);--color-text-placeholder: rgba(255, 255, 255, .3);--color-background: var(--color-neutral-900);--color-background-raised: var(--color-neutral-800);--color-background-disabled: rgba(0, 0, 0, .2);--color-background-error: var(--color-error-muted-700);--color-background-info: var(--color-info-muted-700);--color-background-success: var(--color-success-muted-700);--color-background-warning: var(--color-warning-muted-700);--color-background-primary: var(--color-primary-muted-500);--color-background-input: var(--color-neutral-750);--color-background-listitem-active: var(--color-primary-muted-750);--color-background-listitem-hover: var(--color-neutral-750);--color-background-menuitem-active: var(--color-neutral-650);--color-background-menuitem-hover: var(--color-neutral-700);--color-background-menuitem-activehover: var(--color-neutral-600);--color-border: var(--color-neutral-1000);--color-border-checkbox: var(--color-neutral-1000);--color-border-hover: var(--color-neutral-500);--color-border-focus: var(--color-info-500);--color-border-error: var(--color-neutral-1000);--color-border-warning: var(--color-neutral-1000);--shadow-focus: 0 0 0 2px rgba(41, 167, 235, .5)}._tabs_2ceh1_341{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--color-border);flex-shrink:0}._tabs_2ceh1_341._padding_2ceh1_347{padding-left:20px;padding-right:20px}._tabs_2ceh1_341._margin_2ceh1_351{margin:1rem 0}._contentPadding_2ceh1_354{padding-top:10px}._item_2ceh1_357{align-self:flex-end;display:flex;align-items:center;position:relative;vertical-align:middle;line-height:1;text-decoration:none;flex:0 0 auto;user-select:none;padding:.85714286em 0;transition:border .1s ease,color .1s ease;margin-bottom:-1px;border-bottom:1px solid transparent;text-transform:uppercase;letter-spacing:.05em;font-weight:400;color:var(--color-text-primary);cursor:pointer}._item_2ceh1_357:not(:last-child){margin-right:1.5rem}._item_2ceh1_357:hover{color:var(--color-text-primary-hover)}._item_2ceh1_357:active{color:var(--color-text-primary-active)}._item_2ceh1_357._active_2ceh1_386{border-color:var(--color-text);color:var(--color-text);cursor:default}._item_2ceh1_357._hidden_2ceh1_391{display:none!important}._item_2ceh1_357._disabled_2ceh1_394{color:var(--color-text-faint);pointer-events:none}._item_2ceh1_357._left_2ceh1_398+._item_2ceh1_357._right_2ceh1_398{margin-left:auto}