@oliasoft-open-source/react-ui-library 4.0.0-beta-40 → 4.0.0-beta-42

package/dist/storybook/assets/input-group.stories-a808b59f.js

@@ -0,0 +1,167 @@
+import{j as e}from"./jsx-runtime-f961835c.js";import{T as x}from"./common-types-3a5f9d98.js";import{I as s}from"./input-group-9ddeb24a.js";import{I as h}from"./input-group-addon-63147930.js";import{I as M}from"./input-8db939f4.js";import{B as C}from"./button-1a1d00ec.js";import{M as f}from"./actions-adb8a67c.js";import{S as I}from"./select-ef19f734.js";import{T as P}from"./tooltip-23e84186.js";import{M as o}from"./types-cc224262.js";import"./index-f80c8c95.js";import"./index-a80ed1cf.js";import"./disabled-context-d654f6ff.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./spinner-cb92a546.js";import"./index-c89a1915.js";import"./icon-281c0950.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./badge-a96e6194.js";import"./assertThisInitialized-081f9914.js";import"./memoize-one.esm-52518564.js";import"./text-ad1f5f1d.js";import"./select.input-88b6ebab.js";import"./index-3d476d02.js";const ee={title:"Forms/InputGroup",component:s,args:{}},t=i=>e.jsxs(s,{...i,children:[e.jsx(h,{children:"$"}),e.jsx(M,{width:"100%",name:"example",value:"123",onChange:()=>{}}),e.jsx(I,{options:[{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{label:"Possums",value:"slugs"}],onChange:()=>{},value:{label:"Monkeys",value:"bananas"},width:"auto",native:!0}),e.jsx(f,{menu:{label:"E-06/degC",trigger:x.DROP_DOWN_BUTTON,small:i.small,sections:[{type:o.OPTION,label:"403.5433",description:"ft",inline:!0,onClick:()=>{}},{type:o.OPTION,label:"0.123",description:"km",inline:!0,onClick:()=>{}},{type:o.OPTION,label:"4842.4608",description:"in",inline:!0,onClick:()=>{}}]}}),e.jsx(C,{name:"example",label:"Confirm",colored:!0,onClick:()=>{}})]}),n=t.bind({}),a=t.bind({});a.args={width:"480px"};const l=t.bind({});l.args={small:!0};const r=()=>e.jsxs(s,{children:[e.jsx(I,{options:[{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{label:"Possums",value:"slugs"}],onChange:()=>{},value:{label:"Monkeys",value:"bananas"}}),e.jsx(P,{text:"This is a tooltip",children:e.jsx(C,{name:"example",label:"Confirm",colored:!0,onClick:()=>{},groupOrder:"last"})})]});var u,p,m;n.parameters={...n.parameters,docs:{...(u=n.parameters)==null?void 0:u.docs,source:{originalSource:`args => {
+  return <InputGroup
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args}>
+      <InputGroupAddon>$</InputGroupAddon>
+      <Input width="100%" name="example" value="123" onChange={() => {}} />
+      <Select options={[{
+      label: 'Aardvarks',
+      value: 'termites'
+    }, {
+      label: 'Kangaroos',
+      value: 'grass'
+    }, {
+      label: 'Monkeys',
+      value: 'bananas'
+    }, {
+      label: 'Possums',
+      value: 'slugs'
+    }]} onChange={() => {}} value={{
+      label: 'Monkeys',
+      value: 'bananas'
+    }} width="auto" native />
+      <Menu menu={{
+      label: 'E-06/degC',
+      trigger: TriggerType.DROP_DOWN_BUTTON,
+      small: args.small,
+      sections: [{
+        type: MenuType.OPTION,
+        label: '403.5433',
+        description: 'ft',
+        inline: true,
+        onClick: () => {}
+      }, {
+        type: MenuType.OPTION,
+        label: '0.123',
+        description: 'km',
+        inline: true,
+        onClick: () => {}
+      }, {
+        type: MenuType.OPTION,
+        label: '4842.4608',
+        description: 'in',
+        inline: true,
+        onClick: () => {}
+      }]
+    }} />
+      <Button name="example" label="Confirm" colored onClick={() => {}} />
+    </InputGroup>;
+}`,...(m=(p=n.parameters)==null?void 0:p.docs)==null?void 0:m.source}}};var c,d,b;a.parameters={...a.parameters,docs:{...(c=a.parameters)==null?void 0:c.docs,source:{originalSource:`args => {
+  return <InputGroup
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args}>
+      <InputGroupAddon>$</InputGroupAddon>
+      <Input width="100%" name="example" value="123" onChange={() => {}} />
+      <Select options={[{
+      label: 'Aardvarks',
+      value: 'termites'
+    }, {
+      label: 'Kangaroos',
+      value: 'grass'
+    }, {
+      label: 'Monkeys',
+      value: 'bananas'
+    }, {
+      label: 'Possums',
+      value: 'slugs'
+    }]} onChange={() => {}} value={{
+      label: 'Monkeys',
+      value: 'bananas'
+    }} width="auto" native />
+      <Menu menu={{
+      label: 'E-06/degC',
+      trigger: TriggerType.DROP_DOWN_BUTTON,
+      small: args.small,
+      sections: [{
+        type: MenuType.OPTION,
+        label: '403.5433',
+        description: 'ft',
+        inline: true,
+        onClick: () => {}
+      }, {
+        type: MenuType.OPTION,
+        label: '0.123',
+        description: 'km',
+        inline: true,
+        onClick: () => {}
+      }, {
+        type: MenuType.OPTION,
+        label: '4842.4608',
+        description: 'in',
+        inline: true,
+        onClick: () => {}
+      }]
+    }} />
+      <Button name="example" label="Confirm" colored onClick={() => {}} />
+    </InputGroup>;
+}`,...(b=(d=a.parameters)==null?void 0:d.docs)==null?void 0:b.source}}};var g,v,T;l.parameters={...l.parameters,docs:{...(g=l.parameters)==null?void 0:g.docs,source:{originalSource:`args => {
+  return <InputGroup
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args}>
+      <InputGroupAddon>$</InputGroupAddon>
+      <Input width="100%" name="example" value="123" onChange={() => {}} />
+      <Select options={[{
+      label: 'Aardvarks',
+      value: 'termites'
+    }, {
+      label: 'Kangaroos',
+      value: 'grass'
+    }, {
+      label: 'Monkeys',
+      value: 'bananas'
+    }, {
+      label: 'Possums',
+      value: 'slugs'
+    }]} onChange={() => {}} value={{
+      label: 'Monkeys',
+      value: 'bananas'
+    }} width="auto" native />
+      <Menu menu={{
+      label: 'E-06/degC',
+      trigger: TriggerType.DROP_DOWN_BUTTON,
+      small: args.small,
+      sections: [{
+        type: MenuType.OPTION,
+        label: '403.5433',
+        description: 'ft',
+        inline: true,
+        onClick: () => {}
+      }, {
+        type: MenuType.OPTION,
+        label: '0.123',
+        description: 'km',
+        inline: true,
+        onClick: () => {}
+      }, {
+        type: MenuType.OPTION,
+        label: '4842.4608',
+        description: 'in',
+        inline: true,
+        onClick: () => {}
+      }]
+    }} />
+      <Button name="example" label="Confirm" colored onClick={() => {}} />
+    </InputGroup>;
+}`,...(T=(v=l.parameters)==null?void 0:v.docs)==null?void 0:T.source}}};var k,O,y;r.parameters={...r.parameters,docs:{...(k=r.parameters)==null?void 0:k.docs,source:{originalSource:`() => {
+  return <InputGroup>
+      <Select options={[{
+      label: 'Aardvarks',
+      value: 'termites'
+    }, {
+      label: 'Kangaroos',
+      value: 'grass'
+    }, {
+      label: 'Monkeys',
+      value: 'bananas'
+    }, {
+      label: 'Possums',
+      value: 'slugs'
+    }]} onChange={() => {}} value={{
+      label: 'Monkeys',
+      value: 'bananas'
+    }} />
+      <Tooltip text="This is a tooltip">
+        <Button name="example" label="Confirm" colored onClick={() => {}} groupOrder="last" />
+      </Tooltip>
+    </InputGroup>;
+}`,...(y=(O=r.parameters)==null?void 0:O.docs)==null?void 0:y.source}}};const ae=["Default","FixedWidth","Small","SelectWithButton"];export{n as Default,a as FixedWidth,r as SelectWithButton,l as Small,ae as __namedExportsOrder,ee as default};

package/dist/storybook/assets/input-validation-2de5fb85.js

@@ -0,0 +1,26 @@
+import{j as e}from"./jsx-runtime-f961835c.js";import{M as s,C as n}from"./index-a18dd03f.js";import{NonExistentValue as a,Error as l}from"./select.stories-5a102d99.js";import{u as r}from"./index-5cdc9468.js";import"./index-f80c8c95.js";import"./iframe-3bbaf5e1.js";import"../sb-preview/runtime.js";import"./index-3d476d02.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./index-97a99495.js";import"./select-ef19f734.js";import"./index-a80ed1cf.js";import"./common-types-3a5f9d98.js";import"./disabled-context-d654f6ff.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./tooltip-23e84186.js";import"./index-c89a1915.js";import"./memoize-one.esm-52518564.js";import"./types-cc224262.js";import"./text-ad1f5f1d.js";import"./actions-adb8a67c.js";import"./button-1a1d00ec.js";import"./spinner-cb92a546.js";import"./icon-281c0950.js";import"./tslib.es6-dfef685f.js";import"./badge-a96e6194.js";import"./select.input-88b6ebab.js";import"./spacer-54db0620.js";function o(t){const i=Object.assign({h1:"h1",h2:"h2",h3:"h3",p:"p",code:"code",strong:"strong"},r(),t.components);return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Input Validation"}),`
+`,e.jsx(i.h1,{id:"input-validation",children:"Input Validation"}),`
+`,e.jsx(i.h2,{id:"select",children:"Select"}),`
+`,e.jsx(i.h3,{id:"invalid-states",children:"Invalid states"}),`
+`,e.jsxs(i.p,{children:["It's possible for a ",e.jsx(i.code,{children:"Select"})," input to be in an invalid state, where a value is explicitly set via the ",e.jsx(i.code,{children:"value"}),` prop,
+but the option is not available for re-selection in the dropdown (i.e. not in the `,e.jsx(i.code,{children:"options"}),` prop). Some guidelines are
+provided here to help.`]}),`
+`,e.jsx(i.p,{children:e.jsx(i.strong,{children:"Avoid invalid values via the business logic"})}),`
+`,e.jsx(i.p,{children:"It's best to prevent invalid values from happening, via the application business logic."}),`
+`,e.jsx(i.p,{children:`If they can happen, handling them is a concern of the business layer. The UI framework is generally only responsible
+for presentation.`}),`
+`,e.jsx(i.p,{children:e.jsx(i.strong,{children:"Select will always display the value if it is explicitly set"})}),`
+`,e.jsxs(i.p,{children:["If the ",e.jsx(i.code,{children:"value"})," prop is set, it will be displayed, even if it is not available for re-selection from the ",e.jsx(i.code,{children:"options"}),` prop.
+The library does not hide or mask set values.`]}),`
+`,e.jsx(i.p,{children:e.jsx(i.strong,{children:'"Soft invalid" values'})}),`
+`,e.jsx(i.p,{children:`For a 'soft invalid' state, where the value is usable, but not available for re-reselection, the UI library automatically
+adds a warning state with a tooltip message: "Value no longer available for re-selection". Technically, this should be
+handled by the business logic, not the UI framework, but the behaviour exists for historical reasons.
+In the future it may be optional (via a prop), or deprecated/removed, so it's better to handle it properly in the
+application layer.`}),`
+`,e.jsx(n,{of:a}),`
+`,e.jsx(i.p,{children:e.jsx(i.strong,{children:'"Hard invalid" value'})}),`
+`,e.jsxs(i.p,{children:[`For a 'hard invalid' state (where the value is unusable, but required), it is recommended for the business logic to not
+set a value (use `,e.jsx(i.code,{children:"null"})," or ",e.jsx(i.code,{children:"undefined"}),"), and to set the ",e.jsx(i.code,{children:"error"}),` prop with an appropriate message
+(e.g. "Value is required").`]}),`
+`,e.jsx(n,{of:l})]})}function H(t={}){const{wrapper:i}=Object.assign({},r(),t.components);return i?e.jsx(i,Object.assign({},t,{children:e.jsx(o,t)})):o(t)}export{H as default};

package/dist/storybook/assets/input.stories-aae510d1.js

@@ -0,0 +1,41 @@
+import{j as b}from"./jsx-runtime-f961835c.js";import{I}from"./input-8db939f4.js";import"./index-f80c8c95.js";import"./index-a80ed1cf.js";import"./disabled-context-d654f6ff.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";const{useArgs:L}=__STORYBOOK_MODULE_ADDONS__,F={title:"Forms/Input",component:I,args:{disabled:!1,small:!1,placeholder:"Placeholder"}},t=S=>{const[M,f]=L(),D=T=>{f({value:T.target.value})};return b.jsx(I,{...S,onChange:D})},s=t.bind({}),e=t.bind({});e.args={small:!0};const n=t.bind({});n.args={error:"Error goes here"};const r=t.bind({});r.args={warning:"Warning goes here"};const a=t.bind({});a.args={type:"date",value:"2020-01-01"};var o,g,u;s.parameters={...s.parameters,docs:{...(o=s.parameters)==null?void 0:o.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <Input {...args} onChange={handleChange} />;
+}`,...(u=(g=s.parameters)==null?void 0:g.docs)==null?void 0:u.source}}};var p,c,l;e.parameters={...e.parameters,docs:{...(p=e.parameters)==null?void 0:p.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <Input {...args} onChange={handleChange} />;
+}`,...(l=(c=e.parameters)==null?void 0:c.docs)==null?void 0:l.source}}};var d,m,h;n.parameters={...n.parameters,docs:{...(d=n.parameters)==null?void 0:d.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <Input {...args} onChange={handleChange} />;
+}`,...(h=(m=n.parameters)==null?void 0:m.docs)==null?void 0:h.source}}};var i,v,C;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <Input {...args} onChange={handleChange} />;
+}`,...(C=(v=r.parameters)==null?void 0:v.docs)==null?void 0:C.source}}};var A,E,_;a.parameters={...a.parameters,docs:{...(A=a.parameters)==null?void 0:A.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    updateArgs({
+      value: evt.target.value
+    });
+  };
+  return <Input {...args} onChange={handleChange} />;
+}`,...(_=(E=a.parameters)==null?void 0:E.docs)==null?void 0:_.source}}};const K=["Default","Small","Error","Warning","Date"];export{a as Date,s as Default,n as Error,e as Small,r as Warning,K as __namedExportsOrder,F as default};

package/dist/storybook/assets/inputs-fbf4bf88.js

@@ -0,0 +1,62 @@
+import{j as e}from"./jsx-runtime-f961835c.js";import{M as r,C as n}from"./index-a18dd03f.js";import{Default as l}from"./button.stories-b133b0a3.js";import{Default as a}from"./check-box.stories-0e963883.js";import{Default as c}from"./file-input.stories-35ad4a1b.js";import{Default as d,Date as p}from"./input.stories-aae510d1.js";import{Default as h}from"./number-input.stories-354ddc4f.js";import{Default as u}from"./option-dropdown.stories-220ed20f.js";import{Default as m}from"./radio-button.stories-9f4c96ed.js";import{Native as f,Default as x}from"./select.stories-5a102d99.js";import{Default as j}from"./slider.stories-12e9cebd.js";import{Default as b}from"./textarea.stories-72c40473.js";import{Default as g}from"./toggle.stories-12e2a6ff.js";import{u as i}from"./index-5cdc9468.js";import"./index-f80c8c95.js";import"./iframe-3bbaf5e1.js";import"../sb-preview/runtime.js";import"./index-3d476d02.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./index-97a99495.js";import"./flex-47732c42.js";import"./button-1a1d00ec.js";import"./index-a80ed1cf.js";import"./common-types-3a5f9d98.js";import"./disabled-context-d654f6ff.js";import"./spinner-cb92a546.js";import"./index-c89a1915.js";import"./icon-281c0950.js";import"./tslib.es6-dfef685f.js";import"./tooltip-23e84186.js";import"./check-box-283097fe.js";import"./help-icon-ca6c6ab6.js";import"./input-group-9ddeb24a.js";import"./input-8db939f4.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./spacer-54db0620.js";import"./types-b4f47076.js";import"./textarea-cd192287.js";import"./number-input-11543c86.js";import"./index-54f0d271.js";import"./input-group-addon-63147930.js";import"./select-ef19f734.js";import"./memoize-one.esm-52518564.js";import"./types-cc224262.js";import"./text-ad1f5f1d.js";import"./actions-adb8a67c.js";import"./badge-a96e6194.js";import"./select.input-88b6ebab.js";import"./divider-ad08aee5.js";import"./radio-button-ef3cb8a9.js";import"./slider-83f9ed96.js";import"./objectSpread2-fdee9b6d.js";import"./index-c7f280f6.js";import"./toggle-7a716fc4.js";function s(o){const t=Object.assign({h1:"h1",p:"p",h2:"h2",strong:"strong",ul:"ul",li:"li",code:"code",h3:"h3",a:"a"},i(),o.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Inputs"}),`
+`,e.jsx(t.h1,{id:"inputs",children:"Inputs"}),`
+`,e.jsx(t.p,{children:"React UI Library provides a comprehensive set of user input components."}),`
+`,e.jsx(t.h2,{id:"button",children:"Button"}),`
+`,e.jsx(t.p,{children:"Use buttons when users need to invoke actions."}),`
+`,e.jsx(n,{of:l}),`
+`,e.jsx(t.p,{children:e.jsx(t.strong,{children:"Guidelines"})}),`
+`,e.jsxs(t.ul,{children:[`
+`,e.jsx(t.li,{children:"only the primary button on a page or view should normally be colored"}),`
+`,e.jsx(t.li,{children:"all other buttons should use the default style (try to limit using different variants and colors of buttons)"}),`
+`,e.jsx(t.li,{children:"for serious actions (e.g. permanently deleting records), use a red button"}),`
+`]}),`
+`,e.jsx(t.h2,{id:"input",children:"Input"}),`
+`,e.jsxs(t.p,{children:["Use an ",e.jsx(t.code,{children:"Input"})," when users need to enter or edit single-line values."]}),`
+`,e.jsx(n,{of:d}),`
+`,e.jsx(t.h3,{id:"number-input",children:"Number Input"}),`
+`,e.jsx(n,{of:h}),`
+`,e.jsx(t.h3,{id:"date-input",children:"Date Input"}),`
+`,e.jsx(n,{of:p}),`
+`,e.jsx(t.h2,{id:"textarea",children:"TextArea"}),`
+`,e.jsxs(t.p,{children:["Use a ",e.jsx(t.code,{children:"TextArea"})," when users need to enter or edit multiline text."]}),`
+`,e.jsx(n,{of:b}),`
+`,e.jsx(t.h2,{id:"select",children:"Select"}),`
+`,e.jsxs(t.p,{children:["Use a ",e.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.jsxs(t.p,{children:["React UI Library provides two different ",e.jsx(t.code,{children:"Select"})," components, through one unified interface."]}),`
+`,e.jsx(t.h3,{id:"native-select",children:"Native Select"}),`
+`,e.jsxs(t.p,{children:["Native ",e.jsx(t.code,{children:"Select"})," is a styled native browser ",e.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.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.jsx(t.code,{children:"Select"})," looks like this:"]}),`
+`,e.jsx(n,{of:f}),`
+`,e.jsx(t.h3,{id:"custom-select",children:"Custom Select"}),`
+`,e.jsxs(t.p,{children:["Custom ",e.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.jsx(t.code,{children:"Select"})," in GUI Library uses ",e.jsx(t.a,{href:"https://www.react-laag.com/",target:"_blank",rel:"nofollow noopener noreferrer",children:"react-laag"})," as a positioning engine."]}),`
+`,e.jsx(n,{of:x}),`
+`,e.jsx(t.h2,{id:"radiobutton",children:"RadioButton"}),`
+`,e.jsxs(t.p,{children:["Use a ",e.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.jsx(n,{of:m}),`
+`,e.jsx(t.h2,{id:"checkbox",children:"CheckBox"}),`
+`,e.jsxs(t.p,{children:["Use a ",e.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.jsx(n,{of:a}),`
+`,e.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.jsx(t.h2,{id:"optiondropdown",children:"OptionDropdown"}),`
+`,e.jsxs(t.p,{children:["For a larger number of ",e.jsx(t.code,{children:"CheckBox"})," options and where space is limited, there's a convenience component called ",e.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.jsx(n,{of:u}),`
+`,e.jsx(t.h2,{id:"toggle",children:"Toggle"}),`
+`,e.jsxs(t.p,{children:["A ",e.jsx(t.code,{children:"Toggle"})," is just an alternative variant to a ",e.jsx(t.code,{children:"CheckBox"})," and has the same use-case (switching a binary value on or off)."]}),`
+`,e.jsx(n,{of:g}),`
+`,e.jsx(t.h2,{id:"slider",children:"Slider"}),`
+`,e.jsxs(t.p,{children:["A ",e.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.jsxs(t.p,{children:["A ",e.jsx(t.code,{children:"Slider"})," can also be used to set a range of values (start and end points)."]}),`
+`,e.jsx(n,{of:j}),`
+`,e.jsx(t.h2,{id:"file-input",children:"File Input"}),`
+`,e.jsxs(t.p,{children:["Use a ",e.jsx(t.code,{children:"FileInput"})," when a user needs to upload a file. The ",e.jsx(t.code,{children:"accept"})," prop allows you to restrict the accepted file types."]}),`
+`,e.jsx(n,{of:c})]})}function ye(o={}){const{wrapper:t}=Object.assign({},i(),o.components);return t?e.jsx(t,Object.assign({},o,{children:e.jsx(s,o)})):s(o)}export{ye as default};

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

@@ -0,0 +1,8 @@
+import{r as u}from"./index-f80c8c95.js";var i={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 a=u,l=60103;t.Fragment=60107;if(typeof Symbol=="function"&&Symbol.for){var _=Symbol.for;l=_("react.element"),t.Fragment=_("react.fragment")}var y=a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,v=Object.prototype.hasOwnProperty,x={key:!0,ref:!0,__self:!0,__source:!0};function m(o,r,p){var e,n={},f=null,s=null;p!==void 0&&(f=""+p),r.key!==void 0&&(f=""+r.key),r.ref!==void 0&&(s=r.ref);for(e in r)v.call(r,e)&&!x.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:l,type:o,key:f,ref:s,props:n,_owner:y.current}}t.jsx=m;t.jsxs=m;i.exports=t;var d=i.exports;export{d as j};

package/dist/storybook/assets/label-17fa7b23.js

@@ -0,0 +1,7 @@
+import{j as t}from"./jsx-runtime-f961835c.js";import{c as m}from"./index-a80ed1cf.js";import{I as a}from"./common-types-3a5f9d98.js";import{H as n}from"./help-icon-ca6c6ab6.js";const b="_label_18pfe_1",v="_labelLeft_18pfe_5",x="_icons_18pfe_13",i={label:b,labelLeft:v,icons:x},u=({label:s=null,width:c="auto",helpText:o="",helpTextMaxWidth:p="300px",onClickHelp:r=void 0,lock:e={visible:!1,active:!1,onClick:()=>{},tooltip:"",testId:void 0},info:d,libraryIcon:l,labelLeft:f=!1})=>t.jsx("div",{className:m(i.label,f?i.labelLeft:""),children:t.jsxs("label",{style:{width:c||""},children:[s,t.jsxs("div",{className:i.icons,children:[(o||r)&&t.jsx(n,{text:o,onClick:r,maxWidth:p}),d&&t.jsx(n,{text:d,icon:a.INFO}),e&&e.visible&&e.onClick&&t.jsx(n,{onClick:e.onClick,icon:e.active?a.LOCK:a.UNLOCK,active:e.active,testId:e.testId}),l&&t.jsx(n,{text:(l==null?void 0:l.tooltip)??"",onClick:l.onClick,icon:a.LIBRARY})]})]})});try{u.displayName="Label",u.__docgenInfo={description:"",displayName:"Label",props:{label:{defaultValue:{value:"null"},description:"",name:"label",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},helpText:{defaultValue:{value:""},description:"",name:"helpText",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},helpTextMaxWidth:{defaultValue:{value:"300px"},description:"",name:"helpTextMaxWidth",required:!1,type:{name:"TStringOrNumber"}},width:{defaultValue:{value:"auto"},description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},info:{defaultValue:null,description:"",name:"info",required:!1,type:{name:"string"}},onClickHelp:{defaultValue:{value:"undefined"},description:"",name:"onClickHelp",required:!1,type:{name:"((event?: MouseEvent<HTMLDivElement, MouseEvent>) => void)"}},lock:{defaultValue:{value:`{
+    visible: false,
+    active: false,
+    onClick: () => {},
+    tooltip: '',
+    testId: undefined,
+  }`},description:"",name:"lock",required:!1,type:{name:"ILabelLockProps"}},libraryIcon:{defaultValue:null,description:"",name:"libraryIcon",required:!1,type:{name:"ILabelIcon"}},labelLeft:{defaultValue:{value:"false"},description:"",name:"labelLeft",required:!1,type:{name:"boolean"}}}}}catch{}export{u as L};

package/dist/storybook/assets/label-fc529eb8.css

@@ -0,0 +1 @@
+._label_18pfe_1{display:flex;align-items:center}._label_18pfe_1._labelLeft_18pfe_5{margin-bottom:0;flex-shrink:0;padding-right:var(--padding-xs)}._label_18pfe_1._labelLeft_18pfe_5>label{margin-bottom:0}._label_18pfe_1 ._icons_18pfe_13{display:inline-flex}._label_18pfe_1 ._icons_18pfe_13>*{margin-left:var(--padding-xxs)}._label_18pfe_1>label{display:flex;align-items:center;font-weight:700;font-size:var(--font-size);margin-bottom:var(--padding-xxs);line-height:1.25}

package/dist/storybook/assets/label.stories-aff645b4.js

@@ -0,0 +1,11 @@
+import{j}from"./jsx-runtime-f961835c.js";import{r as E}from"./index-f80c8c95.js";import{L as p}from"./label-17fa7b23.js";import"./index-a80ed1cf.js";import"./common-types-3a5f9d98.js";import"./help-icon-ca6c6ab6.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";import"./icon-281c0950.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";const J={title:"Forms/Label",component:p,args:{label:"Label"}},t=e=>j.jsx(p,{...e}),c=t.bind({}),o=t.bind({});o.args={helpText:"Tooltip goes here"};const r=t.bind({});r.args={onClickHelp:()=>{}};const s=t.bind({});s.args={info:"Info goes here"};const l=()=>{const[e,v]=E.useState(!1),y=()=>v(!e);return j.jsx(p,{label:"Label",lock:{visible:!0,active:e,onClick:y,tooltip:e?"Unlock":"Lock",testId:"testId"}})},a=t.bind({});a.args={libraryIcon:{onClick:()=>{},tooltip:"View in library"}};var i,n,m;c.parameters={...c.parameters,docs:{...(i=c.parameters)==null?void 0:i.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(m=(n=c.parameters)==null?void 0:n.docs)==null?void 0:m.source}}};var d,b,g;o.parameters={...o.parameters,docs:{...(d=o.parameters)==null?void 0:d.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(g=(b=o.parameters)==null?void 0:b.docs)==null?void 0:g.source}}};var L,u,k;r.parameters={...r.parameters,docs:{...(L=r.parameters)==null?void 0:L.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(k=(u=r.parameters)==null?void 0:u.docs)==null?void 0:k.source}}};var I,f,x;s.parameters={...s.parameters,docs:{...(I=s.parameters)==null?void 0:I.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(x=(f=s.parameters)==null?void 0:f.docs)==null?void 0:x.source}}};var S,T,h;l.parameters={...l.parameters,docs:{...(S=l.parameters)==null?void 0:S.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'
+  }} />;
+}`,...(h=(T=l.parameters)==null?void 0:T.docs)==null?void 0:h.source}}};var C,H,P;a.parameters={...a.parameters,docs:{...(C=a.parameters)==null?void 0:C.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(P=(H=a.parameters)==null?void 0:H.docs)==null?void 0:P.source}}};const K=["Default","HelpIconTooltip","HelpIconClickable","InfoIcon","LockIcon","LibraryIcon"];export{c as Default,r as HelpIconClickable,o as HelpIconTooltip,s as InfoIcon,a as LibraryIcon,l as LockIcon,K as __namedExportsOrder,J as default};

package/dist/storybook/assets/layout-forms-db068a65.js

@@ -0,0 +1,16 @@
+import{j as t}from"./jsx-runtime-f961835c.js";import{M as s,C as o}from"./index-a18dd03f.js";import{Default as l,LabelOnLeft as p}from"./field.stories-350dea4d.js";import{Default as m,LabelsOnLeft as a,Row as h}from"./form.stories-c4887282.js";import{u as n}from"./index-5cdc9468.js";import"./index-f80c8c95.js";import"./iframe-3bbaf5e1.js";import"../sb-preview/runtime.js";import"./index-3d476d02.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./index-97a99495.js";import"./field-8f023b56.js";import"./index-a80ed1cf.js";import"./label-17fa7b23.js";import"./common-types-3a5f9d98.js";import"./help-icon-ca6c6ab6.js";import"./tooltip-23e84186.js";import"./icon-281c0950.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./input-8db939f4.js";import"./types-332ceaf3.js";import"./lodash-75c70a11.js";import"./text-ad1f5f1d.js";import"./select-ef19f734.js";import"./memoize-one.esm-52518564.js";import"./types-cc224262.js";import"./actions-adb8a67c.js";import"./button-1a1d00ec.js";import"./spinner-cb92a546.js";import"./badge-a96e6194.js";import"./select.input-88b6ebab.js";import"./check-box-283097fe.js";import"./button-group-7a580d77.js";import"./toggle-7a716fc4.js";import"./input-group-9ddeb24a.js";import"./input-group-addon-63147930.js";import"./slider-83f9ed96.js";import"./objectSpread2-fdee9b6d.js";import"./index-c7f280f6.js";import"./textarea-cd192287.js";import"./radio-button-ef3cb8a9.js";import"./form-row-19dd7f6e.js";function r(i){const e=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code"},n(),i.components);return t.jsxs(t.Fragment,{children:[t.jsx(s,{title:"Layout (Forms)"}),`
+`,t.jsx(e.h1,{id:"layout-forms",children:"Layout (Forms)"}),`
+`,t.jsx(e.h2,{id:"field",children:"Field"}),`
+`,t.jsxs(e.p,{children:["This is a wrapper for any form element with default bottom margin, and props like ",t.jsx(e.code,{children:"label"})," for other default styling."]}),`
+`,t.jsx(o,{of:l}),`
+`,t.jsxs(e.p,{children:["For inline labels, use the ",t.jsx(e.code,{children:"labelLeft"})," prop (and the optional ",t.jsx(e.code,{children:"labelWidth"}),")."]}),`
+`,t.jsx(o,{of:p}),`
+`,t.jsx(e.h2,{id:"stacked",children:"Stacked"}),`
+`,t.jsxs(e.p,{children:["This is the simplest form layout, and works well when horizontal space is limited, or inputs vary in height (e.g. ",t.jsx(e.code,{children:"TextArea"}),")."]}),`
+`,t.jsx(o,{of:m}),`
+`,t.jsx(e.h2,{id:"stacked-with-inline-labels",children:"Stacked with inline labels"}),`
+`,t.jsxs(e.p,{children:["This has the same markup, but with ",t.jsx(e.code,{children:"labelLeft"})," and ",t.jsx(e.code,{children:"labelWidth"})," set on each field."]}),`
+`,t.jsx(o,{of:a}),`
+`,t.jsx(e.h2,{id:"row",children:"Row"}),`
+`,t.jsxs(e.p,{children:["Wrapping a group of form controls in ",t.jsx(e.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."]}),`
+`,t.jsx(o,{of:h})]})}function ot(i={}){const{wrapper:e}=Object.assign({},n(),i.components);return e?t.jsx(e,Object.assign({},i,{children:t.jsx(r,i)})):r(i)}export{ot as default};

package/dist/storybook/assets/layout-general-cd66c69b.js

@@ -0,0 +1,35 @@
+import{j as e}from"./jsx-runtime-f961835c.js";import{M as r,C as n}from"./index-a18dd03f.js";import{Center as d,SpaceBetween as a,JustifyEnd as c,Column as l}from"./flex.stories-a3bc260d.js";import{Default as h,CustomColumnWidth as p,DefaultGap as x,CustomGap as m,Responsive as j}from"./grid.stories-40a81209.js";import{Default as u,FixedWidth as f,NoPadding as g,ResponsiveWidth as w}from"./column.stories-c33c262e.js";import{u as t}from"./index-5cdc9468.js";import"./index-f80c8c95.js";import"./iframe-3bbaf5e1.js";import"../sb-preview/runtime.js";import"./index-3d476d02.js";import"./inheritsLoose-d4851ab8.js";import"./assertThisInitialized-081f9914.js";import"./index-97a99495.js";import"./flex-47732c42.js";import"./button-1a1d00ec.js";import"./index-a80ed1cf.js";import"./common-types-3a5f9d98.js";import"./disabled-context-d654f6ff.js";import"./spinner-cb92a546.js";import"./index-c89a1915.js";import"./icon-281c0950.js";import"./tslib.es6-dfef685f.js";import"./tooltip-23e84186.js";import"./text-ad1f5f1d.js";import"./grid-78d1b29a.js";import"./styled-components.browser.esm-416d73e5.js";import"./card-2de0de0b.js";import"./row-bd69aca9.js";import"./heading-2919c91b.js";import"./help-icon-ca6c6ab6.js";function s(i){const o=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",h3:"h3"},t(),i.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Layout (General)"}),`
+`,e.jsx(o.h1,{id:"layout-general",children:"Layout (General)"}),`
+`,e.jsx(o.h2,{id:"flex",children:"Flex"}),`
+`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Flex"})," component is a basic flexbox wrapper with optional props for ",e.jsx(o.code,{children:"alignItems"}),", ",e.jsx(o.code,{children:"justifyContent"})," and ",e.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.jsx(o.p,{children:"This is best for situations for more fluid layouts, because the children set their own width."}),`
+`,e.jsx(n,{of:d}),`
+`,e.jsx(n,{of:a}),`
+`,e.jsx(n,{of:c}),`
+`,e.jsx(n,{of:l}),`
+`,e.jsx(o.h2,{id:"grid",children:"Grid"}),`
+`,e.jsxs(o.p,{children:["Similar to ",e.jsx(o.code,{children:"Flex"}),", the ",e.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.jsx(n,{of:h}),`
+`,e.jsx(n,{of:p}),`
+`,e.jsx(o.h3,{id:"gap",children:"Gap"}),`
+`,e.jsxs(o.p,{children:["Use the ",e.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."]}),`
+`,e.jsx(n,{of:x}),`
+`,e.jsx(n,{of:m}),`
+`,e.jsx(o.h3,{id:"responsive-grid",children:"Responsive grid"}),`
+`,e.jsxs(o.p,{children:["To change the layout on smaller devices, you can set props for ",e.jsx(o.code,{children:"columnsTablet"})," (up to 992px wide) and/or ",e.jsx(o.code,{children:"columnsMobile"})," (up to 575px wide)."]}),`
+`,e.jsx(n,{of:j}),`
+`,e.jsx(o.h2,{id:"rows--columns",children:"Rows & Columns"}),`
+`,e.jsxs(o.p,{children:[e.jsx(o.code,{children:"Row"})," and ",e.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.jsx(o.code,{children:"Flex"})," or ",e.jsx(o.code,{children:"Grid"}),"."]}),`
+`,e.jsx(o.h3,{id:"default",children:"Default"}),`
+`,e.jsxs(o.p,{children:["Each ",e.jsx(o.code,{children:"Column"})," shares the available width of its ",e.jsx(o.code,{children:"Row"}),"."]}),`
+`,e.jsx(n,{of:u}),`
+`,e.jsx(o.h3,{id:"fixed-width",children:"Fixed width"}),`
+`,e.jsxs(o.p,{children:["You can set a fixed or percentage ",e.jsx(o.code,{children:"width"})," on a ",e.jsx(o.code,{children:"Column"}),", and any others will share the remaining space."]}),`
+`,e.jsx(n,{of:f}),`
+`,e.jsx(o.h3,{id:"padding--spacing",children:"Padding & spacing"}),`
+`,e.jsxs(o.p,{children:["There is ",e.jsx(o.code,{children:"spacing"})," between each ",e.jsx(o.code,{children:"Column"})," by default. You can set different ",e.jsx(o.code,{children:"spacing"}),", or remove it entirely if you want them to be flush."]}),`
+`,e.jsxs(o.p,{children:["There is no ",e.jsx(o.code,{children:"padding"})," inside a ",e.jsx(o.code,{children:"Column"})," by default. You can add the ",e.jsx(o.code,{children:"padding"})," prop on its own for standard padding, or set it to what you need."]}),`
+`,e.jsx(n,{of:g}),`
+`,e.jsx(o.h3,{id:"responsive",children:"Responsive"}),`
+`,e.jsxs(o.p,{children:["To change the layout on smaller devices, you can set props for ",e.jsx(o.code,{children:"widthTablet"})," (up to 992px wide) and/or ",e.jsx(o.code,{children:"widthMobile"})," (up to 575px wide)."]}),`
+`,e.jsx(n,{of:w})]})}function K(i={}){const{wrapper:o}=Object.assign({},t(),i.components);return o?e.jsx(o,Object.assign({},i,{children:e.jsx(s,i)})):s(i)}export{K as default};

package/dist/storybook/assets/list-697735f7.js

@@ -0,0 +1,8 @@
+import{j as e}from"./jsx-runtime-f961835c.js";import{r as o}from"./index-f80c8c95.js";import{c as C}from"./index-a80ed1cf.js";import{P as ne,D as re,C as te,I as le}from"./index.es-a10b54aa.js";import{C as ie}from"./card-2de0de0b.js";import{s as r,N as se,M as oe,L as ce}from"./list-heading-125fdb52.js";import{I as w}from"./common-types-3a5f9d98.js";import{D as B}from"./disabled-context-d654f6ff.js";import{A as G}from"./actions-adb8a67c.js";import{B as F}from"./badge-a96e6194.js";import{I as T}from"./icon-281c0950.js";import{L as de}from"./loader-1947f6cd.js";const E=({label:a})=>a?e.jsx("span",{className:r.label,children:e.jsx(F,{color:a.color,title:a.value})}):null;try{E.displayName="Label",E.__docgenInfo={description:"",displayName:"Label",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"ILabel"}}}}}catch{}const S=({item:a})=>a.metaCount!==void 0?e.jsx(F,{color:"var(--color-text-faint)",title:a.metaCount}):null;try{S.displayName="MetaCount",S.__docgenInfo={description:"",displayName:"MetaCount",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"{ metaCount?: number | undefined; }"}}}}}catch{}const R=({item:a,expanding:s})=>{const c=u=>{u.preventDefault(),u.stopPropagation()};return s&&a.active&&a.content?e.jsx("div",{className:r.itemContent,onClick:c,children:a.content}):null};try{R.displayName="ItemContent",R.__docgenInfo={description:"",displayName:"ItemContent",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"{ active?: boolean | undefined; content?: ReactNode; }"}},expanding:{defaultValue:null,description:"",name:"expanding",required:!1,type:{name:"boolean"}}}}}catch{}const A=o.forwardRef(({item:a,index:s},c)=>{const u=o.useContext(B),{actions:x,disabled:f,expanded:g,onClick:b,title:t,name:i,icon:n,testId:m}=a;return e.jsx("div",{ref:p=>{c&&"current"in c&&Array.isArray(c.current)&&s!==void 0&&(c.current[s]=p)},"data-testid":m??null,className:C(r.item,r.heading,f||u?r.disabled:"",b?r.action:""),onClick:p=>{b&&b(p)},title:t,children:e.jsx("div",{children:e.jsxs("div",{className:r.itemHeader,children:[typeof g=="boolean"&&e.jsx("div",{className:C(r.expandIcon,g&&r.expanded),children:e.jsx(T,{icon:w.CHEVRON_RIGHT})}),e.jsx(se,{name:i,icon:n}),e.jsxs("div",{className:r.right,children:[e.jsx(S,{item:a}),!(f||u)&&x&&e.jsx("div",{className:r.actions,children:e.jsx(G,{actions:a.actions??[]})})]})]})})})});try{A.displayName="ListSubheading",A.__docgenInfo={description:"",displayName:"ListSubheading",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"IListSubheadingItem"}},index:{defaultValue:null,description:"",name:"index",required:!1,type:{name:"number"}}}}}catch{}const ue=(a,s)=>a?{cursor:s.cursor?s.cursor:"",...a.style}:null,H=o.forwardRef(({items:a,expanding:s,invokeEditOnRowClick:c,provided:u,draggable:x},f)=>{const g=o.useContext(B),b=(t,i,n,m,p,y)=>o.createElement("a",{href:n.url,ref:i==null?void 0:i.innerRef,...i.draggableProps,style:ue(i.draggableProps,n),className:C(r.item,n.active?r.active:"",n.disabled||g?r.disabled:"",p?r.action:""),onClick:d=>{if(c&&y&&y.onClick&&y.onClick(d,n.id),n.onClick)return n.onClick(d)},key:t,"data-id":t,title:n.title,"data-testid":n.testId},e.jsxs("div",{ref:d=>{f&&"current"in f&&Array.isArray(f.current)&&t!==void 0&&(f.current[t]=d)},style:{paddingLeft:m},children:[e.jsxs("div",{className:r.itemHeader,children:[x&&e.jsx("div",{className:r.drag,...i.dragHandleProps,children:e.jsx(T,{icon:w.DRAG})}),n.level&&n.level>0?e.jsx("div",{className:r.indentIcon,children:e.jsx(T,{icon:w.INDENT})}):null,e.jsx(E,{label:n.label}),e.jsx(oe,{item:n}),e.jsxs("div",{className:r.right,children:[e.jsx(S,{item:n}),!(n.disabled||g)&&n.actions&&e.jsx("div",{className:r.actions,children:e.jsx(G,{actions:n.actions})})]})]}),e.jsx(R,{item:n,expanding:s})]}));return e.jsxs(e.Fragment,{children:[a.map((t,i)=>{const n=t.type==="Heading",m=t.actions&&t.actions.find(d=>{var V;return d.label&&((V=String(d.label))==null?void 0:V.toLowerCase())==="edit"}),p=!!(m||t.url||t.onClick),y=t.level&&t.level>1?(t.level-1)*20:0;return n?e.jsx(A,{ref:f,item:t,index:i},i):x?e.jsx(ne,{draggableId:t.id+"",index:i,children:d=>b(i,d,t,y,p,m)},t.id):b(i,u,t,y,p,m)}),u.placeholder]})});try{H.displayName="ListRow",H.__docgenInfo={description:"",displayName:"ListRow",props:{draggable:{defaultValue:null,description:"",name:"draggable",required:!1,type:{name:"boolean"}},expanding:{defaultValue:null,description:"",name:"expanding",required:!1,type:{name:"boolean"}},invokeEditOnRowClick:{defaultValue:null,description:"",name:"invokeEditOnRowClick",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:null,description:"",name:"onListReorder",required:!1,type:{name:"((args: { from?: number; to?: number; }) => void) | undefined"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"IListItem[]"}},provided:{defaultValue:null,description:"",name:"provided",required:!1,type:{name:"any"}},snapshot:{defaultValue:null,description:"",name:"snapshot",required:!1,type:{name:"DroppableStateSnapshot"}}}}}catch{}const P=({list:a,bordered:s=!1,expanding:c=!1,narrow:u=!1,toggleNarrow:x=!1,onToggleNarrow:f=()=>{},invokeEditOnRowClick:g=!0,noHeader:b=!1,stickyHeader:t,draggable:i=!1,onListReorder:n=()=>{},marginBottom:m=0,height:p,testId:y,scrollDetails:d={scrollable:!1,hideScrollbar:!1,triggerScrollToActiveItem:!1,infiniteScroll:!1,limit:10,infiniteScrollTarget:void 0}})=>{const{scrollable:V,hideScrollbar:z,triggerScrollToActiveItem:D,infiniteScroll:M,infiniteScrollTarget:J}=d,j=o.useRef(null),_=o.useRef([]),v=o.useRef(null),K=44,O=M?Math.ceil(window.innerHeight/K):a.items.length,[I,Q]=o.useState(O),[U,W]=o.useState(I<(a==null?void 0:a.items.length));o.useEffect(()=>{_.current=_.current.slice(0,a.items.length)},[a.items.length]);const X=()=>{if(I>=a.items.length){W(!1);return}const l=O+I;Q(l)},Y=l=>l.findIndex(h=>h.active===!0),Z=l=>{if(!v.current||!j.current)return;const h=1;if(D&&l>=0){const k=_.current.reduce((L,ee,ae)=>ae<l?L+ee.clientHeight+h:L,0),q=v.current.clientHeight/2-_.current[l].clientHeight/2,N=k-q;if(t){const L=j.current.clientHeight/2;v.current.scrollTop=N+L}const $=j.current.clientHeight;v.current.scrollTop=N+$}};return o.useEffect(()=>{if(D){const l=Y(a==null?void 0:a.items);Z(l)}},[v.current,j.current,D]),e.jsx(re,{onDragEnd:l=>{var q,N;const h=(q=l==null?void 0:l.source)==null?void 0:q.index,k=(N=l==null?void 0:l.destination)==null?void 0:N.index;n({from:h,to:k})},children:e.jsx(te,{droppableId:"droppable",children:(l,h)=>e.jsx("div",{className:C(u?r.narrow:"",V?r.scrollableList:"",z?r.hideScrollbar:""),"data-testid":y,id:"scrollableDiv",style:{height:p,marginBottom:m},ref:v,children:e.jsx("div",{ref:l.innerRef,...l.droppableProps,children:e.jsxs(ie,{bordered:s,padding:!1,children:[!b&&e.jsx(ce,{name:a.name,actions:a.actions,toggleNarrow:x,onToggleNarrow:f,stickyHeader:t,ref:j}),e.jsx("div",{className:C(r.list,s?r.bordered:""),children:M?e.jsx(le,{dataLength:I,next:X,hasMore:U,scrollableTarget:J||"scrollableDiv",loader:e.jsx(de,{}),children:e.jsx(H,{draggable:i,items:a.items.slice(0,I),expanding:c,invokeEditOnRowClick:g,onListReorder:n,provided:l,snapshot:h,ref:_})}):e.jsx(H,{draggable:i,items:a.items,expanding:c,invokeEditOnRowClick:g,onListReorder:n,provided:l,snapshot:h,ref:_})})]})})})})})};try{P.displayName="List",P.__docgenInfo={description:"",displayName:"List",props:{drawer:{defaultValue:null,description:"",name:"drawer",required:!1,type:{name:"boolean"}},list:{defaultValue:null,description:"",name:"list",required:!0,type:{name:"IListData"}},bordered:{defaultValue:{value:"false"},description:"",name:"bordered",required:!1,type:{name:"boolean"}},expanding:{defaultValue:{value:"false"},description:"",name:"expanding",required:!1,type:{name:"boolean"}},narrow:{defaultValue:{value:"false"},description:"",name:"narrow",required:!1,type:{name:"boolean"}},toggleNarrow:{defaultValue:{value:"false"},description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onToggleNarrow:{defaultValue:{value:"() => {}"},description:"",name:"onToggleNarrow",required:!1,type:{name:"TEmpty"}},invokeEditOnRowClick:{defaultValue:{value:"true"},description:"",name:"invokeEditOnRowClick",required:!1,type:{name:"boolean"}},noHeader:{defaultValue:{value:"false"},description:"",name:"noHeader",required:!1,type:{name:"boolean"}},stickyHeader:{defaultValue:null,description:"",name:"stickyHeader",required:!1,type:{name:"boolean"}},draggable:{defaultValue:{value:"false"},description:"",name:"draggable",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:{value:"() => {}"},description:"",name:"onListReorder",required:!1,type:{name:"((args: IReorderData) => void)"}},marginBottom:{defaultValue:{value:"0"},description:"",name:"marginBottom",required:!1,type:{name:"string | number"}},height:{defaultValue:null,description:"",name:"height",required:!1,type:{name:"string | number"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}},scrollDetails:{defaultValue:{value:`{
+    scrollable: false,
+    hideScrollbar: false,
+    triggerScrollToActiveItem: false,
+    infiniteScroll: false,
+    limit: 10,
+    infiniteScrollTarget: undefined,
+  }`},description:"",name:"scrollDetails",required:!1,type:{name:"IScrollDetails"}}}}}catch{}export{P as L,A as a};

package/dist/storybook/assets/list-heading-125fdb52.js

@@ -0,0 +1 @@
+import{j as e}from"./jsx-runtime-f961835c.js";import{B as N}from"./badge-a96e6194.js";import{c as u}from"./index-a80ed1cf.js";import{I as g}from"./icon-281c0950.js";import{T as f}from"./tooltip-23e84186.js";import{r as y}from"./index-f80c8c95.js";import{I as h}from"./common-types-3a5f9d98.js";import{H as x}from"./heading-2919c91b.js";import{A as b}from"./actions-adb8a67c.js";const I="_inputInTable_pre97_1",T="_inputHover_pre97_13",j="_inputFocus_pre97_18",w="_inputError_pre97_25",H="_inputWarning_pre97_26",V="_inputDisabled_pre97_61",q="_hideScrollbars_pre97_67",v="_header_pre97_77",C="_headerTitle_pre97_77",R="_heading_pre97_78",E="_itemHeader_pre97_78",k="_narrow_pre97_81",M="_stickyHeader_pre97_85",L="_title_pre97_96",S="_name_pre97_102",F="_iconTooltipMargin_pre97_105",W="_bold_pre97_108",$="_toggleNarrow_pre97_117",B="_drag_pre97_135",D="_list_pre97_152",A="_bordered_pre97_156",J="_item_pre97_78",O="_action_pre97_189",P="_active_pre97_192",X="_disabled_pre97_207",z="_label_pre97_218",G="_details_pre97_224",K="_metadata_pre97_225",Q="_itemContent_pre97_233",U="_indentIcon_pre97_240",Y="_expandIcon_pre97_245",Z="_expanded_pre97_252",ee="_right_pre97_255",te="_actions_pre97_264",ae="_scrollableList_pre97_269",re="_hideScrollbar_pre97_67",r={inputInTable:I,inputHover:T,inputFocus:j,inputError:w,inputWarning:H,inputDisabled:V,hideScrollbars:q,header:v,headerTitle:C,heading:R,itemHeader:E,narrow:k,stickyHeader:M,title:L,name:S,iconTooltipMargin:F,bold:W,toggleNarrow:$,drag:B,list:D,bordered:A,item:J,action:O,active:P,disabled:X,label:z,details:G,metadata:K,itemContent:Q,indentIcon:U,expandIcon:Y,expanded:Z,right:ee,actions:te,scrollableList:ae,hideScrollbar:re},c=({name:a,icon:t,testId:i})=>{const n=t&&e.jsx(g,{icon:t.icon,color:t.color||"#db2828"});return e.jsxs("span",{className:u(r.name,r.bold),"data-testid":i,children:[a,t&&t.tooltip&&t.tooltip.text?e.jsx("span",{className:r.iconTooltipMargin,children:e.jsx(f,{text:t.tooltip.text,maxWidth:"350px",children:n})}):t&&t.icon&&e.jsx("span",{className:r.iconTooltipMargin,children:n})]})};try{c.displayName="Name",c.__docgenInfo={description:"",displayName:"Name",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"ReactNode"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"{ icon: ReactNode; color?: string; tooltip?: { text: ReactNode; }; } | undefined"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}try{name.displayName="name",name.__docgenInfo={description:"",displayName:"name",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"ReactNode"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"{ icon: ReactNode; color?: string; tooltip?: { text: ReactNode; }; } | undefined"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const _=({item:a})=>{const{name:t,icon:i,details:n,metadata:s,invalid:l,testId:o}=a;let d=e.jsx(c,{name:t,icon:i,testId:o&&`${o}-name`});return l&&(d=e.jsx(N,{small:!0,margin:"-2px",title:"!",children:d})),e.jsxs("span",{className:r.title,children:[d,n&&e.jsx("span",{className:r.details,"data-testid":o&&`${o}-details`,children:n}),s&&e.jsx("span",{className:r.metadata,"data-testid":o&&`${o}-metadata`,children:s})]})};try{_.displayName="MetaContent",_.__docgenInfo={description:"",displayName:"MetaContent",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"IMetaContentItem"}}}}}catch{}const p=({toggleNarrow:a,onClickToggleNarrow:t})=>a?e.jsx("a",{className:r.toggleNarrow,onClick:t,children:e.jsx(g,{icon:h.CHEVRON_LEFT})}):null;try{p.displayName="ToggleNarrow",p.__docgenInfo={description:"",displayName:"ToggleNarrow",props:{toggleNarrow:{defaultValue:null,description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onClickToggleNarrow:{defaultValue:null,description:"",name:"onClickToggleNarrow",required:!1,type:{name:"TEmpty"}}}}}catch{}const m=y.forwardRef(({name:a,actions:t=[],toggleNarrow:i=!1,onToggleNarrow:n=()=>{},stickyHeader:s},l)=>e.jsxs("div",{ref:l,className:u(r.header,s?r.stickyHeader:""),children:[e.jsx(p,{toggleNarrow:i,onClickToggleNarrow:n}),a&&e.jsx("div",{className:r.headerTitle,children:e.jsx(x,{top:!0,marginBottom:0,children:a})}),e.jsx("div",{className:r.right,children:e.jsx("div",{className:r.actions,children:e.jsx(b,{actions:t})})})]}));try{m.displayName="ListHeading",m.__docgenInfo={description:"",displayName:"ListHeading",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined"}},actions:{defaultValue:{value:"[]"},description:"",name:"actions",required:!1,type:{name:"any[]"}},toggleNarrow:{defaultValue:{value:"false"},description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onToggleNarrow:{defaultValue:{value:"() => {}"},description:"",name:"onToggleNarrow",required:!1,type:{name:"TEmpty"}},stickyHeader:{defaultValue:null,description:"",name:"stickyHeader",required:!1,type:{name:"boolean"}}}}}catch{}export{m as L,_ as M,c as N,r as s};

package/dist/storybook/assets/list-heading-7615c8e6.css

@@ -0,0 +1 @@
+._inputInTable_pre97_1{background-color:transparent;border-radius:inherit!important;height:var(--size);min-height:100%}._inputInTable_pre97_1:not(:hover){border-color:transparent}._inputInTable_pre97_1:not(:focus){box-shadow:none}._inputHover_pre97_13{position:relative;border-color:var(--color-border-hover);z-index:2}._inputFocus_pre97_18{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputError_pre97_25,._inputWarning_pre97_26{position:relative}._inputError_pre97_25{z-index:2;border-color:var(--color-border-error);color:var(--color-text-error)!important;background-color:var(--color-background-error)}._inputError_pre97_25:hover{border-color:var(--color-border-error-hover)!important}._inputError_pre97_25:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputWarning_pre97_26{z-index:1;border-color:var(--color-border-warning);color:var(--color-text-warning)!important;background-color:var(--color-background-warning)}._inputWarning_pre97_26:hover{border-color:var(--color-border-warning-hover)!important}._inputWarning_pre97_26:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputDisabled_pre97_61{pointer-events:none;background-color:var(--color-background-disabled);color:var(--color-text-muted);box-shadow:none}._hideScrollbars_pre97_67{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbars_pre97_67::-webkit-scrollbar{display:none}._header_pre97_77 ._headerTitle_pre97_77,._heading_pre97_78 ._itemHeader_pre97_78{transition:opacity .3s}._narrow_pre97_81 ._header_pre97_77 ._headerTitle_pre97_77,._narrow_pre97_81 ._heading_pre97_78 ._itemHeader_pre97_78{opacity:0}._stickyHeader_pre97_85{position:sticky;top:0;background-color:var(--color-background);z-index:10}._itemHeader_pre97_78{padding:var(--padding-xs) var(--padding);display:flex;align-items:flex-start}._itemHeader_pre97_78 ._title_pre97_96{margin:0;padding:0;flex-grow:1;min-width:0}._itemHeader_pre97_78 ._name_pre97_102{font-weight:400}._itemHeader_pre97_78 ._iconTooltipMargin_pre97_105{margin-left:var(--padding-xs)}._itemHeader_pre97_78 ._bold_pre97_108{font-weight:700}._header_pre97_77{padding:var(--padding);display:flex;align-items:center;border-bottom:1px solid var(--color-border)}._toggleNarrow_pre97_117{margin-right:16px;margin-left:-5px;color:#c8c8c8;transition:all .4s;display:flex;width:22px;justify-content:center}._toggleNarrow_pre97_117:hover{color:var(--color-text-primary-hover)}._toggleNarrow_pre97_117:active{color:var(--color-text-primary-active)}._narrow_pre97_81 ._toggleNarrow_pre97_117{transform:scaleX(-1)}._drag_pre97_135{color:var(--color-text-faint);display:flex;align-items:center;justify-content:center;margin-right:var(--padding-xs);margin-left:-6px;cursor:move;height:19px;width:19px}._drag_pre97_135:hover{color:var(--color-text-primary-hover)}._drag_pre97_135:active{color:var(--color-text-primary-active)}._list_pre97_152{flex-shrink:0;background:var(--color-background)}._list_pre97_152._bordered_pre97_156:first-child,._list_pre97_152._bordered_pre97_156:first-child>:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}._list_pre97_152._bordered_pre97_156:last-child,._list_pre97_152._bordered_pre97_156:last-child>:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;border-bottom:0}._item_pre97_78{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_pre97_78:not(._heading_pre97_78):after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-top-left-radius:inherit;border-bottom-left-radius:inherit;transition:background .3s}._item_pre97_78._action_pre97_189{cursor:pointer}._item_pre97_78._action_pre97_189:not(._active_pre97_192):hover{background:var(--color-background-listitem-hover)}._item_pre97_78._action_pre97_189:not(._active_pre97_192):hover:after{background:rgba(0,0,0,.1)}._item_pre97_78._active_pre97_192{cursor:default;position:relative;z-index:1;background:var(--color-background-listitem-active)}._item_pre97_78._active_pre97_192:after{background:var(--color-background-primary)!important}._item_pre97_78._disabled_pre97_207{color:var(--color-text-faint);pointer-events:none}._item_pre97_78._heading_pre97_78{color:var(--color-text-muted);background-color:transparent}._item_pre97_78._heading_pre97_78._action_pre97_189:hover{color:var(--color-text-primary-hover)}._item_pre97_78 ._label_pre97_218{display:flex;align-items:center;margin-right:var(--padding-xs);flex-shrink:0}._item_pre97_78 ._details_pre97_224,._item_pre97_78 ._metadata_pre97_225{display:block;width:100%;font-weight:400}._item_pre97_78 ._metadata_pre97_225{color:var(--color-text-muted)}._item_pre97_78 ._itemContent_pre97_233{padding:0 var(--padding) var(--padding-sm);cursor:auto}._item_pre97_78 ._itemContent_pre97_233:empty{padding:inherit}._indentIcon_pre97_240{color:var(--color-text-faint);flex-shrink:0;margin-right:var(--padding-xxs)}._expandIcon_pre97_245{flex-shrink:0;position:relative;display:flex;height:var(--line-height);margin-right:var(--padding-xxs)}._expandIcon_pre97_245._expanded_pre97_252 svg{transform:rotate(90deg)}._right_pre97_255{margin-left:auto;display:flex;align-items:center;margin-top:calc((var(--line-height) - var(--size-sm)) / 2);margin-bottom:calc((var(--line-height) - var(--size-sm)) / 2);margin-right:calc(var(--padding-xs) * -1);min-height:var(--size-sm)}._actions_pre97_264{margin-left:var(--padding-xs);display:flex;align-items:center}._scrollableList_pre97_269{height:100%;overflow-y:auto;scroll-behavior:smooth}._hideScrollbar_pre97_67{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbar_pre97_67::-webkit-scrollbar{display:none}