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

package/dist/storybook/assets/inputs.c953f359.js

@@ -0,0 +1,62 @@
+import{j as e}from"./jsx-runtime.bc0b5389.js";import{M as i,b as o}from"./index.cb7dd26b.js";import{Default as p}from"./button.stories.27af6450.js";import{Default as l}from"./check-box.stories.7357b1dd.js";import{Default as a}from"./file-input.stories.6b6094bd.js";import{Default as c,Date as d}from"./input.stories.97869383.js";import{Default as x}from"./number-input.stories.bdf66872.js";import{Default as h}from"./option-dropdown.stories.4d3bb152.js";import{Default as u}from"./radio-button.stories.f76396eb.js";import{Native as m,Default as f}from"./select.stories.ede87513.js";import{Default as j}from"./slider.stories.3760ea3d.js";import{Default as b}from"./textarea.stories.6849fcf3.js";import{Default as g}from"./toggle.stories.d02d171f.js";import{u as n}from"./index.24227caa.js";import"./index.8c7046c4.js";import"./iframe.4e6a05b8.js";import"../sb-preview/runtime.js";import"./index.3a536397.js";import"./index.9527c764.js";import"./flex.0003e6fb.js";import"./index.73b4811b.js";import"./button.a5847ae5.js";import"./index.55214191.js";import"./icon.e3eba0d8.js";import"./disabled-context.f2b44977.js";import"./spinner.bd672879.js";import"./tooltip.c75d575a.js";import"./check-box.7a8ba49b.js";import"./help-icon.ef78ffcd.js";import"./input-group.655b5741.js";import"./input.fc19e03b.js";import"./types.c5a118de.js";import"./lodash.96de7017.js";import"./spacer.23f7eb76.js";import"./message.0759eed3.js";import"./textarea.0b7740af.js";import"./number-input.42e9e068.js";import"./index.cb879655.js";import"./input-group-addon.cf112763.js";import"./select.1f357eba.js";import"./memoize-one.esm.7a54f149.js";import"./text.dbb2d441.js";import"./actions.181faed0.js";import"./badge.0f92e7c9.js";import"./select.input.1214f7f4.js";import"./divider.20ce8ba0.js";import"./radio-button.80c92da7.js";import"./slider.32b8bfb5.js";import"./index.95eaf8c8.js";import"./toggle.3c444612.js";function r(s){const t=Object.assign({h1:"h1",p:"p",h2:"h2",strong:"strong",ul:"ul",li:"li",code:"code",h3:"h3",a:"a"},n(),s.components);return e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx(i,{title:"Inputs"}),`
+`,e.exports.jsx(t.h1,{id:"inputs",children:"Inputs"}),`
+`,e.exports.jsx(t.p,{children:"React UI Library provides a comprehensive set of user input components."}),`
+`,e.exports.jsx(t.h2,{id:"button",children:"Button"}),`
+`,e.exports.jsx(t.p,{children:"Use buttons when users need to invoke actions."}),`
+`,e.exports.jsx(o,{of:p}),`
+`,e.exports.jsx(t.p,{children:e.exports.jsx(t.strong,{children:"Guidelines"})}),`
+`,e.exports.jsxs(t.ul,{children:[`
+`,e.exports.jsx(t.li,{children:"only the primary button on a page or view should normally be colored"}),`
+`,e.exports.jsx(t.li,{children:"all other buttons should use the default style (try to limit using different variants and colors of buttons)"}),`
+`,e.exports.jsx(t.li,{children:"for serious actions (e.g. permanently deleting records), use a red button"}),`
+`]}),`
+`,e.exports.jsx(t.h2,{id:"input",children:"Input"}),`
+`,e.exports.jsxs(t.p,{children:["Use an ",e.exports.jsx(t.code,{children:"Input"})," when users need to enter or edit single-line values."]}),`
+`,e.exports.jsx(o,{of:c}),`
+`,e.exports.jsx(t.h3,{id:"number-input",children:"Number Input"}),`
+`,e.exports.jsx(o,{of:x}),`
+`,e.exports.jsx(t.h3,{id:"date-input",children:"Date Input"}),`
+`,e.exports.jsx(o,{of:d}),`
+`,e.exports.jsx(t.h2,{id:"textarea",children:"TextArea"}),`
+`,e.exports.jsxs(t.p,{children:["Use a ",e.exports.jsx(t.code,{children:"TextArea"})," when users need to enter or edit multiline text."]}),`
+`,e.exports.jsx(o,{of:b}),`
+`,e.exports.jsx(t.h2,{id:"select",children:"Select"}),`
+`,e.exports.jsxs(t.p,{children:["Use a ",e.exports.jsx(t.code,{children:"Select"})," component when users need to choose from one or more values from a longer list of options (> 6 options)."]}),`
+`,e.exports.jsxs(t.p,{children:["React UI Library provides two different ",e.exports.jsx(t.code,{children:"Select"})," components, through one unified interface."]}),`
+`,e.exports.jsx(t.h3,{id:"native-select",children:"Native Select"}),`
+`,e.exports.jsxs(t.p,{children:["Native ",e.exports.jsx(t.code,{children:"Select"})," is a styled native browser ",e.exports.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select",target:"_blank",rel:"nofollow noopener noreferrer",children:"select input"}),`.
+You enable it via the `,e.exports.jsx(t.code,{children:"native"}),` prop. It's most useful for simple situations. Its advantages come from the browser
+handling dropdown positioning, performance, and accessibility. Its drawbacks are limited features and styling
+possibilities. A native `,e.exports.jsx(t.code,{children:"Select"})," looks like this:"]}),`
+`,e.exports.jsx(o,{of:m}),`
+`,e.exports.jsx(t.h3,{id:"custom-select",children:"Custom Select"}),`
+`,e.exports.jsxs(t.p,{children:["Custom ",e.exports.jsx(t.code,{children:"Select"}),` is a full implementation of a select component as a custom React component. It covers many additional
+features not offered by native select inputs, such as filtering and multi-select. Its drawbacks are that positioning and
+accessibility are not handled out-the-box by the browser, requiring custom code internally within the component. The
+custom `,e.exports.jsx(t.code,{children:"Select"})," in GUI Library uses ",e.exports.jsx(t.a,{href:"https://www.react-laag.com/",target:"_blank",rel:"nofollow noopener noreferrer",children:"react-laag"})," as a positioning engine."]}),`
+`,e.exports.jsx(o,{of:f}),`
+`,e.exports.jsx(t.h2,{id:"radiobutton",children:"RadioButton"}),`
+`,e.exports.jsxs(t.p,{children:["Use a ",e.exports.jsx(t.code,{children:"RadioButton"}),` group when users need to choose a single value from a short list of options (< 6 options). They are
+suitable for related but mutually exclusive choices.`]}),`
+`,e.exports.jsx(o,{of:u}),`
+`,e.exports.jsx(t.h2,{id:"checkbox",children:"CheckBox"}),`
+`,e.exports.jsxs(t.p,{children:["Use a ",e.exports.jsx(t.code,{children:"CheckBox"}),` when users need to select between opposite states (switching a binary value on or off). A CheckBox
+should have a label prop which makes the opposite states clear.`]}),`
+`,e.exports.jsx(o,{of:l}),`
+`,e.exports.jsx(t.p,{children:`You can also use a group of checkboxes when users need to select multiple values from a short list of options
+(< 6 options).`}),`
+`,e.exports.jsx(t.h2,{id:"optiondropdown",children:"OptionDropdown"}),`
+`,e.exports.jsxs(t.p,{children:["For a larger number of ",e.exports.jsx(t.code,{children:"CheckBox"})," options and where space is limited, there's a convenience component called ",e.exports.jsx(t.code,{children:"OptionDropdown"}),`,
+which allows selecting a multiple values, by presenting them in a dropdown, with an easy way to select all or clear.`]}),`
+`,e.exports.jsx(o,{of:h}),`
+`,e.exports.jsx(t.h2,{id:"toggle",children:"Toggle"}),`
+`,e.exports.jsxs(t.p,{children:["A ",e.exports.jsx(t.code,{children:"Toggle"})," is just an alternative variant to a ",e.exports.jsx(t.code,{children:"CheckBox"})," and has the same use-case (switching a binary value on or off)."]}),`
+`,e.exports.jsx(o,{of:g}),`
+`,e.exports.jsx(t.h2,{id:"slider",children:"Slider"}),`
+`,e.exports.jsxs(t.p,{children:["A ",e.exports.jsx(t.code,{children:"Slider"}),` helps a user to select a numerical value between two endpoints. It can be more convenient than typing values,
+particularly on touch devices.`]}),`
+`,e.exports.jsxs(t.p,{children:["A ",e.exports.jsx(t.code,{children:"Slider"})," can also be used to set a range of values (start and end points)."]}),`
+`,e.exports.jsx(o,{of:j}),`
+`,e.exports.jsx(t.h2,{id:"file-input",children:"File Input"}),`
+`,e.exports.jsxs(t.p,{children:["Use a ",e.exports.jsx(t.code,{children:"FileInput"})," when a user needs to upload a file. The ",e.exports.jsx(t.code,{children:"accept"})," prop allows you to restrict the accepted file types."]}),`
+`,e.exports.jsx(o,{of:a})]})}function fe(s={}){const{wrapper:t}=Object.assign({},n(),s.components);return t?e.exports.jsx(t,Object.assign({},s,{children:e.exports.jsx(r,s)})):r(s)}export{fe as default};

package/dist/storybook/assets/jsx-runtime.bc0b5389.js

@@ -0,0 +1,8 @@
+import{r as u}from"./index.8c7046c4.js";var m={exports:{}},t={};/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var y=u.exports,i=60103;t.Fragment=60107;if(typeof Symbol=="function"&&Symbol.for){var s=Symbol.for;i=s("react.element"),t.Fragment=s("react.fragment")}var a=y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c=Object.prototype.hasOwnProperty,v={key:!0,ref:!0,__self:!0,__source:!0};function l(o,r,p){var e,n={},f=null,_=null;p!==void 0&&(f=""+p),r.key!==void 0&&(f=""+r.key),r.ref!==void 0&&(_=r.ref);for(e in r)c.call(r,e)&&!v.hasOwnProperty(e)&&(n[e]=r[e]);if(o&&o.defaultProps)for(e in r=o.defaultProps,r)n[e]===void 0&&(n[e]=r[e]);return{$$typeof:i,type:o,key:f,ref:_,props:n,_owner:a.current}}t.jsx=l;t.jsxs=l;(function(o){o.exports=t})(m);export{m as j};

package/dist/storybook/assets/label.5f35b9cc.js

@@ -0,0 +1,7 @@
+import{j as l}from"./jsx-runtime.bc0b5389.js";import"./index.8c7046c4.js";import{c as x}from"./index.55214191.js";import{p as e}from"./index.73b4811b.js";import{H as o}from"./help-icon.ef78ffcd.js";import"./icon.e3eba0d8.js";const b="_label_12snn_341",v="_labelLeft_12snn_345",h="_icons_12snn_353",s={label:b,labelLeft:v,icons:h},a=({label:d,width:c,helpText:i,helpTextMaxWidth:f,onClickHelp:r,lock:t,info:p,libraryIcon:n,labelLeft:m})=>{var u;return l.exports.jsx("div",{className:x(s.label,m?s.labelLeft:""),children:l.exports.jsxs("label",{style:{width:c||""},children:[d,l.exports.jsxs("div",{className:s.icons,children:[(i||r)&&l.exports.jsx(o,{text:i,onClick:r,maxWidth:f}),p&&l.exports.jsx(o,{text:p,icon:"info"}),t&&t.visible&&t.onClick&&l.exports.jsx(o,{onClick:t.onClick,icon:t.active?"lock":"unlock",active:t.active,testId:t.testId}),n&&l.exports.jsx(o,{text:(u=n==null?void 0:n.tooltip)!=null?u:"",onClick:n.onClick,icon:"library"})]})]})})};a.defaultProps={label:null,helpText:null,helpTextMaxWidth:"300px",width:"auto",info:null,onClickHelp:null,lock:{visible:!1,active:!1,onClick:()=>{},tooltip:"",testId:void 0},libraryIcon:null,labelLeft:!1};a.propTypes={label:e.exports.oneOfType([e.exports.string,e.exports.number,e.exports.node]),helpText:e.exports.oneOfType([e.exports.string,e.exports.number,e.exports.node]),helpTextMaxWidth:e.exports.oneOfType([e.exports.string,e.exports.number]),width:e.exports.oneOfType([e.exports.string,e.exports.number]),info:e.exports.string,onClickHelp:e.exports.func,lock:e.exports.shape({visible:e.exports.bool,active:e.exports.bool,onClick:e.exports.func,tooltip:e.exports.string,testId:e.exports.string}),libraryIcon:e.exports.shape({onClick:e.exports.func,tooltip:e.exports.string}),labelLeft:e.exports.bool};a.__docgenInfo={description:"",methods:[],displayName:"Label",props:{label:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"union",value:[{name:"string"},{name:"number"},{name:"node"}]},required:!1},helpText:{defaultValue:{value:"null",computed:!1},description:"Adds a help icon with a tooltip",type:{name:"union",value:[{name:"string"},{name:"number"},{name:"node"}]},required:!1},helpTextMaxWidth:{defaultValue:{value:"'300px'",computed:!1},description:"",type:{name:"union",value:[{name:"string"},{name:"number"}]},required:!1},width:{defaultValue:{value:"'auto'",computed:!1},description:"",type:{name:"union",value:[{name:"string"},{name:"number"}]},required:!1},info:{defaultValue:{value:"null",computed:!1},description:"Adds an info icon with an optional tooltip and onClick event",type:{name:"string"},required:!1},onClickHelp:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"func"},required:!1},lock:{defaultValue:{value:`{
+  visible: false,
+  active: false,
+  onClick: () => {},
+  tooltip: '',
+  testId: undefined,
+}`,computed:!1},description:"Adds a lock icon with a tooltip",type:{name:"shape",value:{visible:{name:"bool",required:!1},active:{name:"bool",required:!1},onClick:{name:"func",required:!1},tooltip:{name:"string",required:!1},testId:{name:"string",required:!1}}},required:!1},libraryIcon:{defaultValue:{value:"null",computed:!1},description:"Adds a library icon with a tooltip and onClick event",type:{name:"shape",value:{onClick:{name:"func",required:!1},tooltip:{name:"string",required:!1}}},required:!1},labelLeft:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1}}};export{a as L};

package/dist/storybook/assets/label.stories.40321f05.js

@@ -0,0 +1,21 @@
+import{j as O}from"./jsx-runtime.bc0b5389.js";import"./index.8c7046c4.js";import{L as l}from"./label.5f35b9cc.js";import"./index.55214191.js";import"./index.73b4811b.js";import"./help-icon.ef78ffcd.js";import"./tooltip.c75d575a.js";import"./index.3a536397.js";import"./icon.e3eba0d8.js";import"./disabled-context.f2b44977.js";const{useState:H}=__STORYBOOK_MODULE_ADDONS__,M={title:"Forms/Label",component:l,args:{label:"Label"}},c=e=>O.exports.jsx(l,{...e}),n=c.bind({}),o=c.bind({});o.args={helpText:"Tooltip goes here"};const r=c.bind({});r.args={onClickHelp:()=>{}};const s=c.bind({});s.args={info:"Info goes here"};const a=()=>{const[e,y]=H(!1),D=()=>y(!e);return O.exports.jsx(l,{label:"Label",lock:{visible:!0,active:e,onClick:D,tooltip:e?"Unlock":"Lock",testId:"testId"}})},t=c.bind({});t.args={libraryIcon:{onClick:()=>{},tooltip:"View in library"}};var i,p,d;n.parameters={...n.parameters,docs:{...(i=n.parameters)==null?void 0:i.docs,source:{originalSource:`args => <Label
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(d=(p=n.parameters)==null?void 0:p.docs)==null?void 0:d.source}}};var m,g,b;o.parameters={...o.parameters,docs:{...(m=o.parameters)==null?void 0:m.docs,source:{originalSource:`args => <Label
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(b=(g=o.parameters)==null?void 0:g.docs)==null?void 0:b.source}}};var u,k,L;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`args => <Label
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(L=(k=r.parameters)==null?void 0:k.docs)==null?void 0:L.source}}};var I,x,f;s.parameters={...s.parameters,docs:{...(I=s.parameters)==null?void 0:I.docs,source:{originalSource:`args => <Label
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(f=(x=s.parameters)==null?void 0:x.docs)==null?void 0:f.source}}};var _,S,j;a.parameters={...a.parameters,docs:{...(_=a.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
+  const [locked, setLocked] = useState(false);
+  const handleToggleLock = () => setLocked(!locked);
+  return <Label label="Label" lock={{
+    visible: true,
+    active: locked,
+    onClick: handleToggleLock,
+    tooltip: locked ? 'Unlock' : 'Lock',
+    testId: 'testId'
+  }} />;
+}`,...(j=(S=a.parameters)==null?void 0:S.docs)==null?void 0:j.source}}};var T,h,C;t.parameters={...t.parameters,docs:{...(T=t.parameters)==null?void 0:T.docs,source:{originalSource:`args => <Label
+// eslint-disable-next-line react/jsx-props-no-spreading
+{...args} />`,...(C=(h=t.parameters)==null?void 0:h.docs)==null?void 0:C.source}}};a.__docgenInfo={description:"",methods:[],displayName:"LockIcon"};const V=["Default","HelpIconTooltip","HelpIconClickable","InfoIcon","LockIcon","LibraryIcon"];export{n as Default,r as HelpIconClickable,o as HelpIconTooltip,s as InfoIcon,t as LibraryIcon,a as LockIcon,V as __namedExportsOrder,M as default};

package/dist/storybook/assets/layout-forms.0bd3163b.js

@@ -0,0 +1,16 @@
+import{j as e}from"./jsx-runtime.bc0b5389.js";import{M as n,b as r}from"./index.cb7dd26b.js";import{Default as p,LabelOnLeft as l}from"./field.stories.1b816375.js";import{Default as a,LabelsOnLeft as m,Row as x}from"./form.stories.4698708f.js";import{u as s}from"./index.24227caa.js";import"./index.8c7046c4.js";import"./iframe.4e6a05b8.js";import"../sb-preview/runtime.js";import"./index.3a536397.js";import"./index.9527c764.js";import"./field.c30c885b.js";import"./index.55214191.js";import"./index.73b4811b.js";import"./label.5f35b9cc.js";import"./help-icon.ef78ffcd.js";import"./tooltip.c75d575a.js";import"./icon.e3eba0d8.js";import"./disabled-context.f2b44977.js";import"./input.fc19e03b.js";import"./types.c5a118de.js";import"./lodash.96de7017.js";import"./text.dbb2d441.js";import"./select.1f357eba.js";import"./memoize-one.esm.7a54f149.js";import"./actions.181faed0.js";import"./button.a5847ae5.js";import"./spinner.bd672879.js";import"./badge.0f92e7c9.js";import"./select.input.1214f7f4.js";import"./check-box.7a8ba49b.js";import"./button-group.62e79059.js";import"./toggle.3c444612.js";import"./input-group.655b5741.js";import"./input-group-addon.cf112763.js";import"./slider.32b8bfb5.js";import"./index.95eaf8c8.js";import"./textarea.0b7740af.js";import"./radio-button.80c92da7.js";import"./form-row.62f9b497.js";function i(o){const t=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code"},s(),o.components);return e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx(n,{title:"Layout (Forms)"}),`
+`,e.exports.jsx(t.h1,{id:"layout-forms",children:"Layout (Forms)"}),`
+`,e.exports.jsx(t.h2,{id:"field",children:"Field"}),`
+`,e.exports.jsxs(t.p,{children:["This is a wrapper for any form element with default bottom margin, and props like ",e.exports.jsx(t.code,{children:"label"})," for other default styling."]}),`
+`,e.exports.jsx(r,{of:p}),`
+`,e.exports.jsxs(t.p,{children:["For inline labels, use the ",e.exports.jsx(t.code,{children:"labelLeft"})," prop (and the optional ",e.exports.jsx(t.code,{children:"labelWidth"}),")."]}),`
+`,e.exports.jsx(r,{of:l}),`
+`,e.exports.jsx(t.h2,{id:"stacked",children:"Stacked"}),`
+`,e.exports.jsxs(t.p,{children:["This is the simplest form layout, and works well when horizontal space is limited, or inputs vary in height (e.g. ",e.exports.jsx(t.code,{children:"TextArea"}),")."]}),`
+`,e.exports.jsx(r,{of:a}),`
+`,e.exports.jsx(t.h2,{id:"stacked-with-inline-labels",children:"Stacked with inline labels"}),`
+`,e.exports.jsxs(t.p,{children:["This has the same markup, but with ",e.exports.jsx(t.code,{children:"labelLeft"})," and ",e.exports.jsx(t.code,{children:"labelWidth"})," set on each field."]}),`
+`,e.exports.jsx(r,{of:m}),`
+`,e.exports.jsx(t.h2,{id:"row",children:"Row"}),`
+`,e.exports.jsxs(t.p,{children:["Wrapping a group of form controls in ",e.exports.jsx(t.code,{children:"FormRow"})," arranges them horizontally, and applies default spacing between each item. This works well when vertical space is limited, because inputs will only wrap onto the next line when they need to."]}),`
+`,e.exports.jsx(r,{of:x})]})}function V(o={}){const{wrapper:t}=Object.assign({},s(),o.components);return t?e.exports.jsx(t,Object.assign({},o,{children:e.exports.jsx(i,o)})):i(o)}export{V as default};

package/dist/storybook/assets/layout-general.8172511b.js

@@ -0,0 +1,35 @@
+import{j as e}from"./jsx-runtime.bc0b5389.js";import{M as i,b as s}from"./index.cb7dd26b.js";import{Center as p,SpaceBetween as d,JustifyEnd as x,Column as a}from"./flex.stories.74298645.js";import{Default as c,CustomColumnWidth as l,DefaultGap as h,CustomGap as m,Responsive as j}from"./grid.stories.afb5ac88.js";import{Default as u,FixedWidth as f,NoPadding as g,ResponsiveWidth as w}from"./column.stories.4509a7e3.js";import{u as n}from"./index.24227caa.js";import"./index.8c7046c4.js";import"./iframe.4e6a05b8.js";import"../sb-preview/runtime.js";import"./index.3a536397.js";import"./index.9527c764.js";import"./flex.0003e6fb.js";import"./index.73b4811b.js";import"./button.a5847ae5.js";import"./index.55214191.js";import"./icon.e3eba0d8.js";import"./disabled-context.f2b44977.js";import"./spinner.bd672879.js";import"./tooltip.c75d575a.js";import"./text.dbb2d441.js";import"./grid.f42ec2d0.js";import"./styled-components.browser.esm.f7d36c01.js";import"./hoist-non-react-statics.cjs.10bac274.js";import"./card.8a3821be.js";import"./row.50a144b2.js";import"./heading.8dbffdbe.js";import"./help-icon.ef78ffcd.js";function r(t){const o=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",h3:"h3"},n(),t.components);return e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx(i,{title:"Layout (General)"}),`
+`,e.exports.jsx(o.h1,{id:"layout-general",children:"Layout (General)"}),`
+`,e.exports.jsx(o.h2,{id:"flex",children:"Flex"}),`
+`,e.exports.jsxs(o.p,{children:["The ",e.exports.jsx(o.code,{children:"Flex"})," component is a basic flexbox wrapper with optional props for ",e.exports.jsx(o.code,{children:"alignItems"}),", ",e.exports.jsx(o.code,{children:"justifyContent"})," and ",e.exports.jsx(o.code,{children:"flexDirection"}),". This is a conveninent way to center items vertically and/or horizontally, to align them to opposite edges, or align them to the far side."]}),`
+`,e.exports.jsx(o.p,{children:"This is best for situations for more fluid layouts, because the children set their own width."}),`
+`,e.exports.jsx(s,{of:p}),`
+`,e.exports.jsx(s,{of:d}),`
+`,e.exports.jsx(s,{of:x}),`
+`,e.exports.jsx(s,{of:a}),`
+`,e.exports.jsx(o.h2,{id:"grid",children:"Grid"}),`
+`,e.exports.jsxs(o.p,{children:["Similar to ",e.exports.jsx(o.code,{children:"Flex"}),", the ",e.exports.jsx(o.code,{children:"Grid"})," component is a conveninence wrapper for grid CSS. This is best for situations where the layout is predictable and static (i.e. you know how many columns there will be and how wide you want each to be)."]}),`
+`,e.exports.jsx(s,{of:c}),`
+`,e.exports.jsx(s,{of:l}),`
+`,e.exports.jsx(o.h3,{id:"gap",children:"Gap"}),`
+`,e.exports.jsxs(o.p,{children:["Use the ",e.exports.jsx(o.code,{children:"gap"})," prop to set spacing between grid items. You can set to the spacing you need, or omit the value for default spacing (20px)."]}),`
+`,e.exports.jsx(s,{of:h}),`
+`,e.exports.jsx(s,{of:m}),`
+`,e.exports.jsx(o.h3,{id:"responsive-grid",children:"Responsive grid"}),`
+`,e.exports.jsxs(o.p,{children:["To change the layout on smaller devices, you can set props for ",e.exports.jsx(o.code,{children:"columnsTablet"})," (up to 992px wide) and/or ",e.exports.jsx(o.code,{children:"columnsMobile"})," (up to 575px wide)."]}),`
+`,e.exports.jsx(s,{of:j}),`
+`,e.exports.jsx(o.h2,{id:"rows--columns",children:"Rows & Columns"}),`
+`,e.exports.jsxs(o.p,{children:[e.exports.jsx(o.code,{children:"Row"})," and ",e.exports.jsx(o.code,{children:"Column"})," are a more opinionated flexbox layout, best used together for top-level layouts that require separate scrolling areas. For most layout needs it would be better to use something simpler like ",e.exports.jsx(o.code,{children:"Flex"})," or ",e.exports.jsx(o.code,{children:"Grid"}),"."]}),`
+`,e.exports.jsx(o.h3,{id:"default",children:"Default"}),`
+`,e.exports.jsxs(o.p,{children:["Each ",e.exports.jsx(o.code,{children:"Column"})," shares the available width of its ",e.exports.jsx(o.code,{children:"Row"}),"."]}),`
+`,e.exports.jsx(s,{of:u}),`
+`,e.exports.jsx(o.h3,{id:"fixed-width",children:"Fixed width"}),`
+`,e.exports.jsxs(o.p,{children:["You can set a fixed or percentage ",e.exports.jsx(o.code,{children:"width"})," on a ",e.exports.jsx(o.code,{children:"Column"}),", and any others will share the remaining space."]}),`
+`,e.exports.jsx(s,{of:f}),`
+`,e.exports.jsx(o.h3,{id:"padding--spacing",children:"Padding & spacing"}),`
+`,e.exports.jsxs(o.p,{children:["There is 20px ",e.exports.jsx(o.code,{children:"spacing"})," between each ",e.exports.jsx(o.code,{children:"Column"})," by default. You can set different ",e.exports.jsx(o.code,{children:"spacing"}),", or remove it entirely if you want them to be flush."]}),`
+`,e.exports.jsxs(o.p,{children:["There is no ",e.exports.jsx(o.code,{children:"padding"})," inside a ",e.exports.jsx(o.code,{children:"Column"})," by default. You can add the ",e.exports.jsx(o.code,{children:"padding"})," prop on its own for standard padding, or set it to what you need."]}),`
+`,e.exports.jsx(s,{of:g}),`
+`,e.exports.jsx(o.h3,{id:"responsive",children:"Responsive"}),`
+`,e.exports.jsxs(o.p,{children:["To change the layout on smaller devices, you can set props for ",e.exports.jsx(o.code,{children:"widthTablet"})," (up to 992px wide) and/or ",e.exports.jsx(o.code,{children:"widthMobile"})," (up to 575px wide)."]}),`
+`,e.exports.jsx(s,{of:w})]})}function $(t={}){const{wrapper:o}=Object.assign({},n(),t.components);return o?e.exports.jsx(o,Object.assign({},t,{children:e.exports.jsx(r,t)})):r(t)}export{$ as default};

package/dist/{assets/list-heading-6e01443b.css → storybook/assets/list-heading.0b169dd3.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)}._inputInTable_1udco_341{background-color:transparent;border-radius:inherit!important;height:var(--size);min-height:100%}._inputInTable_1udco_341:not(:hover){border-color:transparent}._inputHover_1udco_350{position:relative;border-color:var(--color-border-hover);z-index:2}._inputFocus_1udco_355{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputError_1udco_362,._inputWarning_1udco_363{position:relative}._inputError_1udco_362{z-index:2;border-color:var(--color-border-error);color:var(--color-text-error)!important;background-color:var(--color-background-error)}._inputError_1udco_362:hover{border-color:var(--color-border-error-hover)!important}._inputError_1udco_362:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputWarning_1udco_363{z-index:1;border-color:var(--color-border-warning);color:var(--color-text-warning)!important;background-color:var(--color-background-warning)}._inputWarning_1udco_363:hover{border-color:var(--color-border-warning-hover)!important}._inputWarning_1udco_363:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputDisabled_1udco_398{pointer-events:none;background-color:var(--color-background-disabled);color:var(--color-text-muted)}._hideScrollbars_1udco_403{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbars_1udco_403::-webkit-scrollbar{display:none}._header_1udco_413 ._headerTitle_1udco_413,._heading_1udco_414 ._itemHeader_1udco_414{transition:opacity .3s}._narrow_1udco_417 ._header_1udco_413 ._headerTitle_1udco_413,._narrow_1udco_417 ._heading_1udco_414 ._itemHeader_1udco_414{opacity:0}._stickyHeader_1udco_421{position:sticky;top:0;background-color:var(--color-background);z-index:10}._itemHeader_1udco_414{padding:12px 20px;display:flex;align-items:flex-start}._itemHeader_1udco_414 ._title_1udco_432{margin:0;padding:0;flex-grow:1;min-width:0}._itemHeader_1udco_414 ._name_1udco_438{font-weight:400}._itemHeader_1udco_414 ._iconTooltipMargin_1udco_441{margin-left:10px}._itemHeader_1udco_414 ._bold_1udco_444{font-weight:900}._header_1udco_413{padding:16px 20px;display:flex;align-items:center;border-bottom:1px solid var(--color-border)}._toggleNarrow_1udco_453{margin-right:16px;margin-left:-5px;color:#c8c8c8;transition:all .4s;display:flex;width:22px;justify-content:center}._toggleNarrow_1udco_453:hover{color:var(--color-text-primary-hover)}._toggleNarrow_1udco_453:active{color:var(--color-text-primary-active)}._narrow_1udco_417 ._toggleNarrow_1udco_453{transform:scaleX(-1)}._drag_1udco_471{color:var(--color-text-faint);display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:-6px;cursor:move;height:19px;width:19px}._drag_1udco_471 path{stroke:var(--color-text-faint)}._drag_1udco_471:hover path{stroke:var(--color-text-primary-hover)}._drag_1udco_471:active path{stroke:var(--color-text-primary-active)}._list_1udco_491{flex-shrink:0;background:var(--color-background)}._list_1udco_491._bordered_1udco_495:first-child,._list_1udco_491._bordered_1udco_495:first-child>:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}._list_1udco_491._bordered_1udco_495:last-child,._list_1udco_491._bordered_1udco_495:last-child>:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;border-bottom:0}._item_1udco_414{color:inherit;display:block;transition:background-color .2s;position:relative;border-bottom:1px solid var(--color-border);background-color:var(--color-background-raised);transition:background .3s;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}._item_1udco_414:not(._heading_1udco_414):after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-top-left-radius:inherit;border-bottom-left-radius:inherit;transition:background .3s}._item_1udco_414._action_1udco_528{cursor:pointer}._item_1udco_414._action_1udco_528:not(._active_1udco_531):hover{background:var(--color-background-listitem-hover)}._item_1udco_414._action_1udco_528:not(._active_1udco_531):hover:after{background:rgba(0,0,0,.1)}._item_1udco_414._active_1udco_531{cursor:default;position:relative;z-index:1;background:var(--color-background-listitem-active)}._item_1udco_414._active_1udco_531:after{background:var(--color-background-primary)!important}._item_1udco_414._disabled_1udco_546{color:var(--color-text-faint);pointer-events:none}._item_1udco_414._heading_1udco_414{color:var(--color-text-muted);background-color:transparent}._item_1udco_414._heading_1udco_414._action_1udco_528:hover{color:var(--color-text-primary-hover)}._item_1udco_414 ._label_1udco_557{margin:-2px 15px -2px -5px;flex-shrink:0}._item_1udco_414 ._details_1udco_564,._item_1udco_414 ._metadata_1udco_565{display:block;width:100%;font-weight:400;margin-top:3px}._item_1udco_414 ._metadata_1udco_565{color:var(--color-text-muted)}._item_1udco_414 ._itemContent_1udco_574{padding:0 20px 12px;cursor:auto}._item_1udco_414 ._itemContent_1udco_574:empty{padding:inherit}._indentIcon_1udco_581{color:var(--color-text-faint);width:20px;flex-shrink:0}._expandIcon_1udco_586{width:20px;flex-shrink:0;position:relative;margin-top:1px}._expandIcon_1udco_586._expanded_1udco_592 svg{transform:rotate(90deg)}._right_1udco_595{margin-left:auto;display:flex;align-items:center;margin-top:-2px;margin-bottom:-2px}._actions_1udco_602{margin-left:8px;display:flex;align-items:center}._scrollableList_1udco_607{height:100%;overflow-y:auto;scroll-behavior:smooth}._hideScrollbar_1udco_403{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbar_1udco_403::-webkit-scrollbar{display:none}
+: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)}._inputInTable_1udco_341{background-color:transparent;border-radius:inherit!important;height:var(--size);min-height:100%}._inputInTable_1udco_341:not(:hover){border-color:transparent}._inputHover_1udco_350{position:relative;border-color:var(--color-border-hover);z-index:2}._inputFocus_1udco_355{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputError_1udco_362,._inputWarning_1udco_363{position:relative}._inputError_1udco_362{z-index:2;border-color:var(--color-border-error);color:var(--color-text-error)!important;background-color:var(--color-background-error)}._inputError_1udco_362:hover{border-color:var(--color-border-error-hover)!important}._inputError_1udco_362:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputWarning_1udco_363{z-index:1;border-color:var(--color-border-warning);color:var(--color-text-warning)!important;background-color:var(--color-background-warning)}._inputWarning_1udco_363:hover{border-color:var(--color-border-warning-hover)!important}._inputWarning_1udco_363:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputDisabled_1udco_398{pointer-events:none;background-color:var(--color-background-disabled);color:var(--color-text-muted)}._hideScrollbars_1udco_403{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbars_1udco_403::-webkit-scrollbar{display:none}._header_1udco_413 ._headerTitle_1udco_413,._heading_1udco_414 ._itemHeader_1udco_414{transition:opacity .3s}._narrow_1udco_417 ._header_1udco_413 ._headerTitle_1udco_413,._narrow_1udco_417 ._heading_1udco_414 ._itemHeader_1udco_414{opacity:0}._stickyHeader_1udco_421{position:sticky;top:0;background-color:var(--color-background);z-index:10}._itemHeader_1udco_414{padding:12px 20px;display:flex;align-items:flex-start}._itemHeader_1udco_414 ._title_1udco_432{margin:0;padding:0;flex-grow:1;min-width:0}._itemHeader_1udco_414 ._name_1udco_438{font-weight:400}._itemHeader_1udco_414 ._iconTooltipMargin_1udco_441{margin-left:10px}._itemHeader_1udco_414 ._bold_1udco_444{font-weight:900}._header_1udco_413{padding:16px 20px;display:flex;align-items:center;border-bottom:1px solid var(--color-border)}._toggleNarrow_1udco_453{margin-right:16px;margin-left:-5px;color:#c8c8c8;transition:all .4s;display:flex;width:22px;justify-content:center}._toggleNarrow_1udco_453:hover{color:var(--color-text-primary-hover)}._toggleNarrow_1udco_453:active{color:var(--color-text-primary-active)}._narrow_1udco_417 ._toggleNarrow_1udco_453{transform:scaleX(-1)}._drag_1udco_471{color:var(--color-text-faint);display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:-6px;cursor:move;height:19px;width:19px}._drag_1udco_471 path{stroke:var(--color-text-faint)}._drag_1udco_471:hover path{stroke:var(--color-text-primary-hover)}._drag_1udco_471:active path{stroke:var(--color-text-primary-active)}._list_1udco_491{flex-shrink:0;background:var(--color-background)}._list_1udco_491._bordered_1udco_495:first-child,._list_1udco_491._bordered_1udco_495:first-child>:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}._list_1udco_491._bordered_1udco_495:last-child,._list_1udco_491._bordered_1udco_495:last-child>:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;border-bottom:0}._item_1udco_414{color:inherit;display:block;transition:background-color .2s;position:relative;border-bottom:1px solid var(--color-border);background-color:var(--color-background-raised);transition:background .3s;overflow-wrap:break-word;hyphens:auto}._item_1udco_414:not(._heading_1udco_414):after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-top-left-radius:inherit;border-bottom-left-radius:inherit;transition:background .3s}._item_1udco_414._action_1udco_528{cursor:pointer}._item_1udco_414._action_1udco_528:not(._active_1udco_531):hover{background:var(--color-background-listitem-hover)}._item_1udco_414._action_1udco_528:not(._active_1udco_531):hover:after{background:rgba(0,0,0,.1)}._item_1udco_414._active_1udco_531{cursor:default;position:relative;z-index:1;background:var(--color-background-listitem-active)}._item_1udco_414._active_1udco_531:after{background:var(--color-background-primary)!important}._item_1udco_414._disabled_1udco_546{color:var(--color-text-faint);pointer-events:none}._item_1udco_414._heading_1udco_414{color:var(--color-text-muted);background-color:transparent}._item_1udco_414._heading_1udco_414._action_1udco_528:hover{color:var(--color-text-primary-hover)}._item_1udco_414 ._label_1udco_557{margin:-2px 15px -2px -5px;flex-shrink:0}._item_1udco_414 ._details_1udco_564,._item_1udco_414 ._metadata_1udco_565{display:block;width:100%;font-weight:400;margin-top:3px}._item_1udco_414 ._metadata_1udco_565{color:var(--color-text-muted)}._item_1udco_414 ._itemContent_1udco_574{padding:0 20px 12px;cursor:auto}._item_1udco_414 ._itemContent_1udco_574:empty{padding:inherit}._indentIcon_1udco_581{color:var(--color-text-faint);width:20px;flex-shrink:0}._expandIcon_1udco_586{width:20px;flex-shrink:0;position:relative;margin-top:1px}._expandIcon_1udco_586._expanded_1udco_592 svg{transform:rotate(90deg)}._right_1udco_595{margin-left:auto;display:flex;align-items:center;margin-top:-2px;margin-bottom:-2px}._actions_1udco_602{margin-left:8px;display:flex;align-items:center}._scrollableList_1udco_607{height:100%;overflow-y:auto;scroll-behavior:smooth}._hideScrollbar_1udco_403{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbar_1udco_403::-webkit-scrollbar{display:none}

package/dist/storybook/assets/list-heading.e7f3e9ec.js

@@ -0,0 +1 @@
+import{j as e}from"./jsx-runtime.bc0b5389.js";import{r as g}from"./index.8c7046c4.js";import{B as h}from"./badge.0f92e7c9.js";import{c as _}from"./index.55214191.js";import{p as o}from"./index.73b4811b.js";import{I as m}from"./icon.e3eba0d8.js";import{T as f}from"./tooltip.c75d575a.js";import{H as b}from"./heading.8dbffdbe.js";import{A as N,a as T}from"./actions.181faed0.js";const v="_inputInTable_1udco_341",y="_inputHover_1udco_350",j="_inputFocus_1udco_355",w="_inputError_1udco_362",I="_inputWarning_1udco_363",H="_inputDisabled_1udco_398",q="_hideScrollbars_1udco_403",S="_header_1udco_413",C="_headerTitle_1udco_413",M="_heading_1udco_414",k="_itemHeader_1udco_414",L="_narrow_1udco_417",V="_stickyHeader_1udco_421",O="_title_1udco_432",R="_name_1udco_438",W="_iconTooltipMargin_1udco_441",A="_bold_1udco_444",B="_toggleNarrow_1udco_453",D="_drag_1udco_471",E="_list_1udco_491",F="_bordered_1udco_495",$="_item_1udco_414",P="_action_1udco_528",z="_active_1udco_531",G="_disabled_1udco_546",J="_label_1udco_557",K="_details_1udco_564",Q="_metadata_1udco_565",U="_itemContent_1udco_574",X="_indentIcon_1udco_581",Y="_expandIcon_1udco_586",Z="_expanded_1udco_592",ee="_right_1udco_595",oe="_actions_1udco_602",te="_scrollableList_1udco_607",ae="_hideScrollbar_1udco_403",a={inputInTable:v,inputHover:y,inputFocus:j,inputError:w,inputWarning:I,inputDisabled:H,hideScrollbars:q,header:S,headerTitle:C,heading:M,itemHeader:k,narrow:L,stickyHeader:V,title:O,name:R,iconTooltipMargin:W,bold:A,toggleNarrow:B,drag:D,list:E,bordered:F,item:$,action:P,active:z,disabled:G,label:J,details:K,metadata:Q,itemContent:U,indentIcon:X,expandIcon:Y,expanded:Z,right:ee,actions:oe,scrollableList:te,hideScrollbar:ae},c=({name:n,icon:t,testId:i})=>{const s=t&&e.exports.jsx(m,{icon:t.icon,color:t.color||"#db2828",size:12});return e.exports.jsxs("span",{className:_(a.name,a.bold),"data-testid":i,children:[n,t&&t.tooltip&&t.tooltip.text?e.exports.jsx("span",{className:a.iconTooltipMargin,children:e.exports.jsx(f,{text:t.tooltip.text,maxWidth:"350px",children:s})}):t&&t.icon&&e.exports.jsx("span",{className:a.iconTooltipMargin,children:s})]})};c.propTypes={name:o.exports.oneOfType([o.exports.string,o.exports.number,o.exports.node]).isRequired,icon:o.exports.shape({icon:o.exports.node,color:o.exports.string,tooltip:o.exports.shape({text:o.exports.oneOfType([o.exports.node,o.exports.string])})}),testId:o.exports.string};c.defaultProps={icon:null,testId:void 0};c.__docgenInfo={description:"",methods:[],displayName:"Name",props:{icon:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"shape",value:{icon:{name:"node",required:!1},color:{name:"string",required:!1},tooltip:{name:"shape",value:{text:{name:"union",value:[{name:"node"},{name:"string"}],required:!1}},required:!1}}},required:!1},testId:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"string"},required:!1},name:{description:"",type:{name:"union",value:[{name:"string"},{name:"number"},{name:"node"}]},required:!0}}};const ne=({item:n})=>{const{name:t,icon:i,details:s,metadata:d,invalid:l,testId:r}=n;let p=e.exports.jsx(c,{name:t,icon:i,testId:r&&`${r}-name`});return l&&(p=e.exports.jsx(h,{small:!0,margin:"-2px",title:"!",children:p})),e.exports.jsxs("span",{className:a.title,children:[p,s&&e.exports.jsx("span",{className:a.details,"data-testid":r&&`${r}-details`,children:s}),d&&e.exports.jsx("span",{className:a.metadata,"data-testid":r&&`${r}-metadata`,children:d})]})};ne.__docgenInfo={description:"",methods:[],displayName:"MetaContent"};const x=({toggleNarrow:n,onClickToggleNarrow:t})=>n?e.exports.jsx("a",{className:a.toggleNarrow,onClick:t,children:e.exports.jsx(m,{icon:"chevron left"})}):null;x.__docgenInfo={description:"",methods:[],displayName:"ToggleNarrow"};const u=g.exports.forwardRef(({name:n,actions:t,toggleNarrow:i,onToggleNarrow:s,stickyHeader:d},l)=>e.exports.jsxs("div",{ref:l,className:_(a.header,d?a.stickyHeader:""),children:[e.exports.jsx(x,{toggleNarrow:i,onClickToggleNarrow:s}),n&&e.exports.jsx("div",{className:a.headerTitle,children:e.exports.jsx(b,{top:!0,marginBottom:0,children:n})}),e.exports.jsx("div",{className:a.right,children:e.exports.jsx("div",{className:a.actions,children:e.exports.jsx(N,{actions:t,right:!0})})})]}));u.defaultProps={actions:[],toggleNarrow:!1,onToggleNarrow:()=>{}};u.propTypes={name:o.exports.oneOfType([o.exports.string,o.exports.number,o.exports.node]).isRequired,actions:T,toggleNarrow:o.exports.bool,onToggleNarrow:o.exports.func};u.__docgenInfo={description:"",methods:[],displayName:"ListHeading",props:{actions:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"union",value:[{name:"custom",raw:"actionShape"},{name:"custom",raw:"subActionShape"},{name:"custom",raw:"childComponentShape"}]}},required:!1},toggleNarrow:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},onToggleNarrow:{defaultValue:{value:"() => {}",computed:!1},description:"",type:{name:"func"},required:!1},name:{description:"",type:{name:"union",value:[{name:"string"},{name:"number"},{name:"node"}]},required:!0}}};export{u as L,ne as M,c as N,a as s};

package/dist/storybook/assets/list.eee26d12.js

@@ -0,0 +1,8 @@
+import{j as r}from"./jsx-runtime.bc0b5389.js";import{r as l}from"./index.8c7046c4.js";import{p as e}from"./index.73b4811b.js";import"./lodash.96de7017.js";import{c as I}from"./index.55214191.js";import{P as ne,D as ae,C as ie,I as le}from"./index.es.724dbd7e.js";import{A as E,a as V}from"./actions.181faed0.js";import{C as de}from"./card.8a3821be.js";import{s,N as pe,M as ce,L as ue}from"./list-heading.e7f3e9ec.js";import{B}from"./badge.0f92e7c9.js";import{I as k}from"./icon.e3eba0d8.js";import{D as z}from"./disabled-context.f2b44977.js";const F=({label:t})=>t?r.exports.jsx("span",{className:s.label,children:r.exports.jsx(B,{color:t.color,title:t.value})}):null;F.__docgenInfo={description:"",methods:[],displayName:"Label"};const _=({item:t})=>t.metaCount!==void 0&&r.exports.jsx(B,{color:"var(--color-text-faint)",title:t.metaCount});_.__docgenInfo={description:"",methods:[],displayName:"MetaCount"};const W=({item:t,expanding:d})=>{const f=u=>{u.preventDefault(),u.stopPropagation()};return d&&t.active&&t.content?r.exports.jsx("div",{className:s.itemContent,onClick:f,children:t.content}):null};W.__docgenInfo={description:"",methods:[],displayName:"ItemContent"};const R=l.exports.forwardRef(({item:t,index:d},f)=>{const u=l.exports.useContext(z),{actions:j,disabled:b,expanded:x,onClick:g,title:n,name:i,icon:o,testId:p}=t;return r.exports.jsx("div",{ref:m=>f?f.current[d]=m:void 0,"data-testid":p!=null?p:null,className:I(s.item,s.heading,b||u?s.disabled:"",g?s.action:""),onClick:m=>{g&&g(m)},title:n,children:r.exports.jsx("div",{children:r.exports.jsxs("div",{className:s.itemHeader,children:[typeof x=="boolean"&&r.exports.jsx("div",{className:I(s.expandIcon,x&&s.expanded),children:r.exports.jsx(k,{icon:"chevron right"})}),r.exports.jsx(pe,{name:i,icon:o}),r.exports.jsxs("div",{className:s.right,children:[r.exports.jsx(_,{item:t}),!(b||u)&&t.actions&&r.exports.jsx("div",{className:s.actions,children:r.exports.jsx(E,{actions:t.actions,right:!0})})]})]})})})});R.defaultProps={index:void 0};R.propTypes={item:e.exports.shape({actions:V,disabled:e.exports.bool,expanded:e.exports.bool,name:e.exports.oneOfType([e.exports.string,e.exports.number,e.exports.node]).isRequired,onClick:e.exports.func,title:e.exports.oneOfType([e.exports.string,e.exports.number]),testId:e.exports.string}).isRequired,index:e.exports.number};R.__docgenInfo={description:"",methods:[],displayName:"ListSubheading",props:{index:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"number"},required:!1},item:{description:"",type:{name:"shape",value:{actions:{name:"custom",raw:"actionsShape",required:!1},disabled:{name:"bool",required:!1},expanded:{name:"bool",required:!1},name:{name:"union",value:[{name:"string"},{name:"number"},{name:"node"}],required:!0},onClick:{name:"func",required:!1},title:{name:"union",value:[{name:"string"},{name:"number"}],required:!1},testId:{name:"string",required:!1}}},required:!0}}};const me=(t,d)=>t?{cursor:d.cursor?d.cursor:"",...t.style}:null,D=l.exports.forwardRef(({items:t,expanding:d,invokeEditOnRowClick:f,provided:u,draggable:j},b)=>{const x=l.exports.useContext(z),g=(n,i,o,p,m,h)=>l.exports.createElement("a",{href:o.url,ref:i==null?void 0:i.innerRef,...i.draggableProps,style:me(i.draggableProps,o),className:I(s.item,o.active?s.active:"",o.disabled||x?s.disabled:"",m?s.action:""),onClick:c=>{if(f&&h&&h.onClick(c,o.id),o.onClick)return o.onClick(c)},key:n,"data-id":n,title:o.title,"data-testid":o.testId},r.exports.jsxs("div",{ref:c=>b.current[n]=c,style:{paddingLeft:p},children:[r.exports.jsxs("div",{className:s.itemHeader,children:[j&&r.exports.jsx("div",{className:s.drag,...i.dragHandleProps,children:r.exports.jsx(k,{icon:"drag"})}),o.level&&o.level>0?r.exports.jsx("div",{className:s.indentIcon,children:r.exports.jsx(k,{icon:"indent"})}):null,r.exports.jsx(F,{label:o.label}),r.exports.jsx(ce,{item:o}),r.exports.jsxs("div",{className:s.right,children:[r.exports.jsx(_,{item:o}),!(o.disabled||x)&&o.actions&&r.exports.jsx("div",{className:s.actions,children:r.exports.jsx(E,{actions:o.actions,right:!0})})]})]}),r.exports.jsx(W,{item:o,expanding:d})]}));return r.exports.jsxs(r.exports.Fragment,{children:[t.map((n,i)=>{const o=n.type==="Heading",p=n.actions&&n.actions.find(c=>c.label&&c.label.toLowerCase()==="edit"),m=p||n.url||n.onClick,h=n.level&&n.level>1?(n.level-1)*20:0;return o?r.exports.jsx(R,{ref:b,item:n,index:i},i):j?r.exports.jsx(ne,{draggableId:n.id+"",index:i,children:c=>g(i,c,n,h,m,p)},n.id):g(i,u,n,h,m,p)}),u.placeholder]})});D.__docgenInfo={description:"",methods:[],displayName:"ListRow"};const H=({list:t,bordered:d,expanding:f,narrow:u,toggleNarrow:j,onToggleNarrow:b,invokeEditOnRowClick:x,noHeader:g,stickyHeader:n,draggable:i,onListReorder:o,marginBottom:p,height:m,testId:h,scrollDetails:c})=>{const{scrollable:G,hideScrollbar:J,triggerScrollToActiveItem:L,infiniteScroll:M,infiniteScrollTarget:K}=c,v=l.exports.useRef(),y=l.exports.useRef([]),T=l.exports.useRef(),Q=44,P=M?Math.ceil(window.innerHeight/Q):t.items.length,[S,U]=l.exports.useState(P),[X,Y]=l.exports.useState(S<(t==null?void 0:t.items.length));l.exports.useEffect(()=>{y.current=y.current.slice(0,t.items.length)},[t.items.length]);const Z=()=>{if(S>=t.items.length){Y(!1);return}const a=P+S;U(a)},$=a=>a.findIndex(q=>q.active===!0),ee=a=>{var N,C;if(L&&a>=0){const w=y.current.reduce((O,oe,se)=>se<a?O+oe.clientHeight+1:O,0),re=T.current.clientHeight/2-y.current[a].clientHeight/2,A=w-re;if(n){const O=((N=v==null?void 0:v.current)==null?void 0:N.clientHeight)/2;T.current.scrollTop=A+O}const te=(C=v==null?void 0:v.current)==null?void 0:C.clientHeight;T.current.scrollTop=A+te}};return l.exports.useEffect(()=>{if(L){const a=$(t==null?void 0:t.items);ee(a)}},[L]),r.exports.jsx(ae,{onDragEnd:a=>{var C,w;const q=(C=a==null?void 0:a.source)==null?void 0:C.index,N=(w=a==null?void 0:a.destination)==null?void 0:w.index;o({from:q,to:N})},children:r.exports.jsx(ie,{droppableId:"droppable",children:(a,q)=>r.exports.jsx("div",{className:I(u?s.narrow:"",G?s.scrollableList:"",J?s.hideScrollbar:""),"data-testid":h,id:"scrollableDiv",style:{height:m,marginBottom:p},ref:T,children:r.exports.jsx("div",{ref:a.innerRef,...a.droppableProps,children:r.exports.jsxs(de,{bordered:d,padding:!1,children:[!g&&r.exports.jsx(ue,{name:t.name,actions:t.actions,toggleNarrow:j,onToggleNarrow:b,stickyHeader:n,ref:v}),r.exports.jsx("div",{className:I(s.list,d?s.bordered:""),children:M?r.exports.jsx(le,{dataLength:S,next:Z,hasMore:X,scrollableTarget:K||"scrollableDiv",children:r.exports.jsx(D,{draggable:i,items:t.items.slice(0,S),expanding:f,invokeEditOnRowClick:x,onListReorder:o,provided:a,snapshot:q,ref:y})}):r.exports.jsx(D,{draggable:i,items:t.items,expanding:f,invokeEditOnRowClick:x,onListReorder:o,provided:a,snapshot:q,ref:y})})]})})})})})};H.defaultProps={bordered:!1,expanding:!1,narrow:!1,toggleNarrow:!1,onToggleNarrow:()=>{},invokeEditOnRowClick:!0,noHeader:!1,draggable:!1,onListReorder:()=>{},marginBottom:0,height:void 0,scrollDetails:{scrollable:!1,hideScrollbar:!1,triggerScrollToActiveItem:!1,infiniteScroll:!1,limit:10,infiniteScrollTarget:void 0},testId:void 0};H.propTypes={list:e.exports.shape({name:e.exports.oneOfType([e.exports.string,e.exports.node]),actions:V,items:e.exports.arrayOf(e.exports.shape({id:e.exports.oneOfType([e.exports.string,e.exports.number]).isRequired,name:e.exports.oneOfType([e.exports.string,e.exports.node]).isRequired,title:e.exports.string,active:e.exports.bool,details:e.exports.oneOfType([e.exports.string,e.exports.node]),metadata:e.exports.string,metaCount:e.exports.number,invalid:e.exports.bool,content:e.exports.element,actions:V,testId:e.exports.string,icon:e.exports.shape({icon:e.exports.node.isRequired,color:e.exports.string.isRequired,tooltip:e.exports.shape({text:e.exports.oneOfType([e.exports.string,e.exports.number,e.exports.node]),error:e.exports.bool,warning:e.exports.bool,placement:e.exports.string,enabled:e.exports.bool,maxWidth:e.exports.oneOfType([e.exports.string,e.exports.number]),triggerOffset:e.exports.oneOfType([e.exports.string,e.exports.number]),possiblePlacements:e.exports.array,fontSize:e.exports.oneOfType([e.exports.string,e.exports.number]),padding:e.exports.oneOfType([e.exports.string,e.exports.number])})})})).isRequired}).isRequired,bordered:e.exports.bool,expanding:e.exports.bool,narrow:e.exports.bool,toggleNarrow:e.exports.bool,onToggleNarrow:e.exports.func,invokeEditOnRowClick:e.exports.bool,noHeader:e.exports.bool,draggable:e.exports.bool,onListReorder:e.exports.func,marginBottom:e.exports.oneOfType([e.exports.string,e.exports.number]),height:e.exports.oneOfType([e.exports.string,e.exports.number]),scrollDetails:e.exports.shape({scrollable:e.exports.bool,hideScrollbar:e.exports.bool,triggerScrollToActiveItem:e.exports.bool,infiniteScroll:e.exports.bool,limit:e.exports.number,infiniteScrollTarget:e.exports.string}),testId:e.exports.string};H.__docgenInfo={description:"",methods:[],displayName:"List",props:{bordered:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},expanding:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},narrow:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},toggleNarrow:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},onToggleNarrow:{defaultValue:{value:"() => {}",computed:!1},description:"",type:{name:"func"},required:!1},invokeEditOnRowClick:{defaultValue:{value:"true",computed:!1},description:"",type:{name:"bool"},required:!1},noHeader:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},draggable:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},onListReorder:{defaultValue:{value:"() => {}",computed:!1},description:"",type:{name:"func"},required:!1},marginBottom:{defaultValue:{value:"0",computed:!1},description:"",type:{name:"union",value:[{name:"string"},{name:"number"}]},required:!1},height:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"union",value:[{name:"string"},{name:"number"}]},required:!1},scrollDetails:{defaultValue:{value:`{
+  scrollable: false,
+  hideScrollbar: false,
+  triggerScrollToActiveItem: false,
+  infiniteScroll: false,
+  limit: 10,
+  infiniteScrollTarget: undefined,
+}`,computed:!1},description:"",type:{name:"shape",value:{scrollable:{name:"bool",required:!1},hideScrollbar:{name:"bool",required:!1},triggerScrollToActiveItem:{name:"bool",required:!1},infiniteScroll:{name:"bool",required:!1},limit:{name:"number",required:!1},infiniteScrollTarget:{name:"string",required:!1}}},required:!1},testId:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"string"},required:!1},list:{description:"",type:{name:"shape",value:{name:{name:"union",value:[{name:"string"},{name:"node"}],required:!1},actions:{name:"custom",raw:"actionsShape",required:!1},items:{name:"arrayOf",value:{name:"shape",value:{id:{name:"union",value:[{name:"string"},{name:"number"}],required:!0},name:{name:"union",value:[{name:"string"},{name:"node"}],required:!0},title:{name:"string",required:!1},active:{name:"bool",required:!1},details:{name:"union",value:[{name:"string"},{name:"node"}],required:!1},metadata:{name:"string",required:!1},metaCount:{name:"number",required:!1},invalid:{name:"bool",required:!1},content:{name:"element",required:!1},actions:{name:"custom",raw:"actionsShape",required:!1},testId:{name:"string",required:!1},icon:{name:"shape",value:{icon:{name:"node",required:!0},color:{name:"string",required:!0},tooltip:{name:"shape",value:{text:{name:"union",value:[{name:"string"},{name:"number"},{name:"node"}],required:!1},error:{name:"bool",required:!1},warning:{name:"bool",required:!1},placement:{name:"string",required:!1},enabled:{name:"bool",required:!1},maxWidth:{name:"union",value:[{name:"string"},{name:"number"}],required:!1},triggerOffset:{name:"union",value:[{name:"string"},{name:"number"}],required:!1},possiblePlacements:{name:"array",required:!1},fontSize:{name:"union",value:[{name:"string"},{name:"number"}],required:!1},padding:{name:"union",value:[{name:"string"},{name:"number"}],required:!1}},required:!1}},required:!1}}},required:!0}}},required:!0}}};export{H as L,R as a};

package/dist/storybook/assets/list.stories-data.181830b6.js

@@ -0,0 +1 @@
+import{j as a}from"./jsx-runtime.bc0b5389.js";import"./index.8c7046c4.js";import{F as n}from"./flex.0003e6fb.js";import{M as m}from"./actions.181faed0.js";import{I as i}from"./icon.e3eba0d8.js";const t=[{id:1,name:"Aardvark"},{id:2,name:"Kangaroo",active:!0},{id:3,name:"Jaguar",disabled:!0}],r=[{id:1,name:"Marsupials",type:"Heading",metaCount:1},{id:2,name:"Aardvark"},{id:3,name:"Kangaroo",active:!0},{id:4,name:"Mammals",type:"Heading",metaCount:1},{id:5,name:"Jaguar"}],c=[{id:1,name:"Aardvark"},{id:2,name:"Kangaroo",active:!0},{id:3,name:"Grey",level:1},{id:4,name:"Eastern",level:2},{id:5,name:"Macropus giganteus giganteus",title:"Macropus giganteus giganteus",level:3},{id:6,name:"Macropus giganteus tasmaniensis",title:"Macropus giganteus tasmaniensis",level:3},{id:7,name:"Western",level:2},{id:8,name:"Red",level:1},{id:9,name:"Jaguar"}],v={items:t},l={name:"Animals",actions:[{label:"More",subActions:[{label:"Item",icon:"up",onClick:()=>{}},{label:"Item",icon:"down",onClick:()=>{}}]},{label:"Add",primary:!0,icon:"add",onClick:()=>{}}],items:t},o={...l,items:r},b={...l,name:a.exports.jsxs(n,{gap:"8px",children:["Animals",a.exports.jsx(i,{icon:"star"})]}),items:t.map(e=>({...e,name:a.exports.jsxs(n,{gap:"8px",alignItems:"center",children:[e.name,a.exports.jsx(i,{icon:"star"})]})}))};t.map((e,s)=>({...e,actions:[{childComponent:a.exports.jsx(m,{menu:{trigger:"Component",component:a.exports.jsx(i,{icon:"menu"}),placement:"bottom-end",sections:[{type:"Option",label:"Item",onClick:()=>{}},{type:"Option",label:"Item",onClick:()=>{}}]}})}]}));const C={items:t.map(e=>({...e,actions:[{label:"More",subActions:[{label:"Move Up",icon:"up",onClick:()=>{}},{label:"Move Down",icon:"down",onClick:()=>{}}]}]}))},h={items:t.map((e,s)=>({...e,label:{value:s+1,color:"var(--color-text-info)"}}))},k={...o,items:o.items.map((e,s)=>({...e,label:{value:s+1,color:"var(--color-text-info)"}}))},A={items:t.map(e=>({...e,actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]}))},M={items:t.map((e,s)=>({...e,details:"Description goes here",metadata:"2019-05-03 09:03:51",testId:`story-list-item-${s}`}))},j={items:t.map(e=>({...e,content:a.exports.jsx("div",{children:"Example content element (for show/hide)."})}))},I={items:c},f={items:[...t,{id:4,name:"Dodo",invalid:!0}]},y={items:t.map(e=>({...e,icon:{icon:"success",color:"var(--color-text-success)",tooltip:{text:a.exports.jsx(a.exports.Fragment,{children:"Tooltip goes here"})}}}))},D={items:t.map(e=>({...e,metaCount:3}))},w={name:"Animals",items:[...Array(50)].map((e,s)=>({id:s,name:`Aardvark #${s+1}`}))};export{A as a,C as b,M as c,j as d,l as e,h as f,I as g,f as h,b as i,y as j,D as k,v as l,w as m,k as n};