@scattered-light/loomiere-mojave 0.19.0 → 0.20.0

package/dist/exports/AGENTS.md

@@ -152,7 +152,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ### Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 

package/dist/exports/catalog.json

@@ -187,6 +187,8 @@
         "design-system/components/SideNav/preview.html",
         "design-system/components/Slider/README.md",
         "design-system/components/Slider/preview.html",
+        "design-system/components/SplitButton/README.md",
+        "design-system/components/SplitButton/preview.html",
         "design-system/components/Splitter/README.md",
         "design-system/components/Splitter/preview.html",
         "design-system/components/StatCard/README.md",

package/dist/exports/design-system/README.md

@@ -144,7 +144,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ## Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 

package/dist/exports/design-system/components/CollectionCards/README.md

@@ -23,4 +23,36 @@ export const Default: Story = {
   args: { collection: undefined as never, label: 'Entities', renderCard: () => null },
   render: () => <Demo />,
 };
+
+function SegmentedDemo() {
+  const collection = useCollection<Entity>({
+    rows: entities,
+    getRowId: (r) => r.id,
+    pageSize: 6,
+    columns: [
+      { id: 'name', header: 'Entity', value: (r) => r.name, searchable: true, sortable: true, rowHeader: true },
+      { id: 'open', header: 'Most open', value: (r) => (r.open ? 'open' : 'none'), filter: { kind: 'select', options: [{ value: 'open', label: 'Open items' }, { value: 'none', label: 'Nothing open' }] }, hidden: true },
+    ],
+  });
+  return (
+    <div style={{ display: 'grid', gap: '16px' }}>
+      <CollectionToolbar
+        collection={collection}
+        searchLabel="Find an Entity"
+        searchPlaceholder="Find an Entity"
+        ruled
+        segments={[
+          segmentFilter(collection, 'open', 'Filter', [{ value: 'all', label: 'All' }, { value: 'open', label: 'Open items' }, { value: 'none', label: 'Nothing open' }]),
+          { ...segmentSort(collection, 'Sort', [{ value: 'name', label: 'A–Z' }]), showLabel: true, end: true },
+        ]}
+        meta={`${collection.pageTotal} Entities`}
+      />
+      <CollectionCards collection={collection} label="Entities" renderCard={(row) => <StatCard title={row.name} facts={[{ label: 'Open', value: row.open || '–' }]} />} />
+    </div>
+  );
+}
+
+/** `segments` turns the toolbar into search plus toggle groups for quick filters and sort. */
 ```
+
+The preview also shows `SegmentedToolbar`.

package/dist/exports/design-system/components/CollectionCards/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Data" height=160 subtitle="Default" -->
+<!-- @dsCard group="Data" height=240 subtitle="Default / SegmentedToolbar" -->
 <!doctype html>
 <html>
 <head>
@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var h=Object.create;var c=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},F=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of w(e))!v.call(t,o)&&o!==n&&c(t,o,{get:()=>e[o],enumerable:!(r=S(e,o))||r.enumerable});return t};var u=(t,e,n)=>(n=t!=null?h(x(t)):{},F(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t));var y=p((P,g)=>{g.exports=window.Loomiere});var E=p((k,f)=>{f.exports=window.Loomiere});var m={};D(m,{Default:()=>A,default:()=>d});var C=u(y(),1),a=u(E(),1);var i=window.React;function s(t,e,n){let{children:r,...o}=e||{};return n!==void 0&&(o.key=n),r===void 0?i.createElement(t,o):Array.isArray(r)?i.createElement(t,o,...r):i.createElement(t,o,r)}var $=i.Fragment;var R=Array.from({length:14},(t,e)=>({id:String(e+1),name:["North","Boreal","Cedar","Delta","Elm","Fjord","Grove"][e%7]+(e>6?" Holdings":" Company"),open:e*3%5})),j={title:"Components/Lib/CollectionCards",component:a.CollectionCards,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},d=j;function z(){let t=(0,a.useCollection)({rows:R,getRowId:e=>e.id,pageSize:6,columns:[{id:"name",header:"Entity",value:e=>e.name,searchable:!0,sortable:!0,rowHeader:!0},{id:"open",header:"Most open",value:e=>e.open,kind:"number",sortable:!0,hidden:!0}]});return s("div",{style:{display:"grid",gap:"16px"},children:[s(a.CollectionToolbar,{collection:t,searchLabel:"Find an Entity",searchPlaceholder:"Find an Entity",showSort:!0}),s(a.CollectionCards,{collection:t,label:"Entities",renderCard:e=>s(C.StatCard,{title:e.name,caption:"USD",href:`#${e.id}`,facts:[{label:"Open",value:e.open||"\u2013",tone:e.open?"accent":"default"}]})}),s(a.CollectionPagination,{page:t.page,pageCount:t.pageCount,pageSize:t.pageSize,total:t.pageTotal,filtered:t.isFiltered,onPageChange:t.setPage,label:"Entities"})]})}var A={args:{collection:void 0,label:"Entities",renderCard:()=>null},render:()=>s(z,{})};var l=window.React,b=d||{},L=["Default"];function M({id:t}){let e=m[t],n={...b.args||{},...e.args||{}};return(e.render||(o=>l.createElement(b.component,o)))(n,{args:n,id:t,name:t})}var N=L.map(t=>l.createElement("section",{key:t,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(M,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,N));})();
+(()=>{var v=Object.create;var d=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var o in e)d(t,o,{get:e[o],enumerable:!0})},R=(t,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of w(e))!F.call(t,r)&&r!==o&&d(t,r,{get:()=>e[r],enumerable:!(l=C(e,r))||l.enumerable});return t};var g=(t,e,o)=>(o=t!=null?v(x(t)):{},R(e||!t||!t.__esModule?d(o,"default",{value:t,enumerable:!0}):o,t));var b=u((k,y)=>{y.exports=window.Loomiere});var f=u(($,E)=>{E.exports=window.Loomiere});var p={};D(p,{Default:()=>L,SegmentedToolbar:()=>j,default:()=>m});var c=g(b(),1),n=g(f(),1);var s=window.React;function a(t,e,o){let{children:l,...r}=e||{};return o!==void 0&&(r.key=o),l===void 0?s.createElement(t,r):Array.isArray(l)?s.createElement(t,r,...l):s.createElement(t,r,l)}var H=s.Fragment;var h=Array.from({length:14},(t,e)=>({id:String(e+1),name:["North","Boreal","Cedar","Delta","Elm","Fjord","Grove"][e%7]+(e>6?" Holdings":" Company"),open:e*3%5})),O={title:"Components/Lib/CollectionCards",component:n.CollectionCards,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},m=O;function A(){let t=(0,n.useCollection)({rows:h,getRowId:e=>e.id,pageSize:6,columns:[{id:"name",header:"Entity",value:e=>e.name,searchable:!0,sortable:!0,rowHeader:!0},{id:"open",header:"Most open",value:e=>e.open,kind:"number",sortable:!0,hidden:!0}]});return a("div",{style:{display:"grid",gap:"16px"},children:[a(n.CollectionToolbar,{collection:t,searchLabel:"Find an Entity",searchPlaceholder:"Find an Entity",showSort:!0}),a(n.CollectionCards,{collection:t,label:"Entities",renderCard:e=>a(c.StatCard,{title:e.name,caption:"USD",href:`#${e.id}`,facts:[{label:"Open",value:e.open||"\u2013",tone:e.open?"accent":"default"}]})}),a(n.CollectionPagination,{page:t.page,pageCount:t.pageCount,pageSize:t.pageSize,total:t.pageTotal,filtered:t.isFiltered,onPageChange:t.setPage,label:"Entities"})]})}var L={args:{collection:void 0,label:"Entities",renderCard:()=>null},render:()=>a(A,{})};function N(){let t=(0,n.useCollection)({rows:h,getRowId:e=>e.id,pageSize:6,columns:[{id:"name",header:"Entity",value:e=>e.name,searchable:!0,sortable:!0,rowHeader:!0},{id:"open",header:"Most open",value:e=>e.open?"open":"none",filter:{kind:"select",options:[{value:"open",label:"Open items"},{value:"none",label:"Nothing open"}]},hidden:!0}]});return a("div",{style:{display:"grid",gap:"16px"},children:[a(n.CollectionToolbar,{collection:t,searchLabel:"Find an Entity",searchPlaceholder:"Find an Entity",ruled:!0,segments:[(0,n.segmentFilter)(t,"open","Filter",[{value:"all",label:"All"},{value:"open",label:"Open items"},{value:"none",label:"Nothing open"}]),{...(0,n.segmentSort)(t,"Sort",[{value:"name",label:"A\u2013Z"}]),showLabel:!0,end:!0}],meta:`${t.pageTotal} Entities`}),a(n.CollectionCards,{collection:t,label:"Entities",renderCard:e=>a(c.StatCard,{title:e.name,facts:[{label:"Open",value:e.open||"\u2013"}]})})]})}var j={args:{collection:void 0,label:"Entities",renderCard:()=>null},render:()=>a(N,{})};var i=window.React,S=m||{},z=["Default","SegmentedToolbar"];function M({id:t}){let e=p[t],o={...S.args||{},...e.args||{}};return(e.render||(r=>i.createElement(S.component,r)))(o,{args:o,id:t,name:t})}var P=z.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(M,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,P));})();
 
 </script>
 </body>

package/dist/exports/design-system/components/CollectionToolbar/README.md

@@ -10,7 +10,7 @@ Not a Base UI part, so there is no base-ui.com page for it.
 
 | Class | Data attributes it answers to |
 |---|---|
-| `CollectionToolbar` | `data-narrow`; `data-search`: `fixed`; `data-framed` |
+| `CollectionToolbar` | `data-narrow`; `data-search`: `fixed`; `data-framed`; `data-segmented`; `data-ruled` |
 | `CollectionToolbarMain` |   |
 | `CollectionSelectionBar` |   |
 | `CollectionSort` |   |
@@ -27,5 +27,7 @@ Not a Base UI part, so there is no base-ui.com page for it.
 | `CollectionCount` |   |
 | `CollectionToolbarMeta` |   |
 | `CollectionToolbarMetaEnd` |   |
+| `CollectionSegment` | `data-end` |
+| `CollectionSegmentLabel` |   |
 
 Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.

package/dist/exports/design-system/components/PickerButton/README.md

@@ -1,6 +1,6 @@
 # PickerButton
 
-Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Label and choice share a baseline, so caps beside lowercase read as one line; picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
+Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Label and choice are centered on the control's height, so a caps label and its choice sit level at any font size; picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
 
 Use `Loomiere.PickerButton`, this package's component: it puts the class names on for you (`import { PickerButton } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
 

package/dist/exports/design-system/components/SplitButton/README.md

@@ -0,0 +1,26 @@
+# SplitButton
+
+Loomiere component, not part of Base UI. A Button and a square Menu trigger side by side, joined into one outline: the inner corners are square and the trigger overlaps the main part's border by one stroke.
+
+Use `Loomiere.SplitButton`, this package's component: it puts the class names on for you (`import { SplitButton } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `SplitButton` |   |
+| `Button` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the SplitButton stories (`Default`):
+
+```tsx
+export const Default: Story = {};
+```
+
+The preview also shows `Disabled`.

package/dist/exports/design-system/components/SplitButton/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Actions" height=240 subtitle="Default / Disabled" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var y=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of u(t))!f.call(e,a)&&a!==o&&s(e,a,{get:()=>t[a],enumerable:!(n=b(t,a))||n.enumerable});return e};var k=(e,t,o)=>(o=e!=null?y(S(e)):{},E(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e));var d=g((L,m)=>{m.exports=window.Loomiere});var c={};w(c,{Default:()=>B,Disabled:()=>D,default:()=>l});var i=k(d(),1),x={title:"Components/Lib/SplitButton",component:i.SplitButton,parameters:{layout:"padded"},tags:["autodocs","ds:lib"],args:{label:"Add Transaction",onClick:()=>{},moreLabel:"More ways to add transactions",items:[{label:"Bank connection (not yet available)",onSelect:()=>{},disabled:!0},{label:"Import CSV",onSelect:()=>{}},{label:"Import Excel workbook",onSelect:()=>{}}]}},l=x,B={},D={args:{disabled:!0}};var r=window.React,p=l||{},M=["Default","Disabled"];function R({id:e}){let t=c[e],o={...p.args||{},...t.args||{}};return(t.render||(a=>r.createElement(p.component,a)))(o,{args:o,id:e,name:e})}var C=M.map(e=>r.createElement("section",{key:e,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(R,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,C));})();
+
+</script>
+</body>
+</html>

package/dist/exports/design-system/components/StatCard/README.md

@@ -10,7 +10,7 @@ Not a Base UI part, so there is no base-ui.com page for it.
 
 | Class | Data attributes it answers to |
 |---|---|
-| `StatCard` | `data-interactive` |
+| `StatCard` | `data-interactive`; `data-detailed` |
 | `StatCardHeader` |   |
 | `StatCardHeading` |   |
 | `StatCardTag` |   |
@@ -19,6 +19,9 @@ Not a Base UI part, so there is no base-ui.com page for it.
 | `StatCardLink` |   |
 | `StatCardFacts` |   |
 | `StatCardFooter` |   |
+| `DescriptionList` |   |
+| `StatCardBar` |   |
+| `StatCardStatus` |   |
 
 Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
 

package/dist/exports/design-system/components/StatCard/preview.html

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var f=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of S(t))!x.call(e,a)&&a!==o&&i(e,a,{get:()=>t[a],enumerable:!(r=g(t,a))||r.enumerable});return e};var h=(e,t,o)=>(o=e!=null?f(b(e)):{},E(t||!e||!e.__esModule?i(o,"default",{value:e,enumerable:!0}):o,e));var u=v((T,d)=>{d.exports=window.Loomiere});var p={};w(p,{AsButton:()=>F,Default:()=>C,Static:()=>A,TwoFigures:()=>O,WithFooter:()=>B,WithTag:()=>j,default:()=>m});var l=h(u(),1);var c=window.React;function s(e,t,o){let{children:r,...a}=t||{};return o!==void 0&&(a.key=o),r===void 0?c.createElement(e,a):Array.isArray(r)?c.createElement(e,a,...r):c.createElement(e,a,r)}var U=c.Fragment;var D={title:"Components/Lib/StatCard",component:l.StatCard,parameters:{layout:"padded"},tags:["autodocs","ds:lib"],args:{title:"North Company",caption:"USD \xB7 1 account",facts:[{label:"Questions",value:"1",tone:"accent"},{label:"Docs",value:"\u2013"},{label:"Review",value:"2",tone:"accent"}]}},m=D,R={display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(18rem, 1fr))",gap:"16px"},C={render:e=>s("div",{style:R,children:[s(l.StatCard,{...e,href:"#north"}),s(l.StatCard,{...e,title:"Boreal Company",caption:"USD \xB7 3 accounts",facts:[{label:"Questions",value:"\u2013"},{label:"Docs",value:"4",tone:"accent"},{label:"Review",value:"12",tone:"accent"}],href:"#boreal"})]})},F={args:{onOpen:()=>{}}},A={},B={args:{footer:"Last reconciled Oct 29"}},O={args:{facts:[{label:"Book balance",value:"75.00",caption:"DR"},{label:"Unposted",value:"2",tone:"accent"}]}},j={args:{tag:"2 new",footer:"1 account \xB7 Cash 75.00 Dr"}};var n=window.React,y=m||{},N=["Default","AsButton","Static","WithFooter"];function k({id:e}){let t=p[e],o={...y.args||{},...t.args||{}};return(t.render||(a=>n.createElement(y.component,a)))(o,{args:o,id:e,name:e})}var L=N.map(e=>n.createElement("section",{key:e,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(k,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,L));})();
+(()=>{var f=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},E=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of S(e))!x.call(t,a)&&a!==o&&i(t,a,{get:()=>e[a],enumerable:!(n=g(e,a))||n.enumerable});return t};var h=(t,e,o)=>(o=t!=null?f(b(t)):{},E(e||!t||!t.__esModule?i(o,"default",{value:t,enumerable:!0}):o,t));var u=v((T,d)=>{d.exports=window.Loomiere});var p={};w(p,{AsButton:()=>C,Default:()=>R,Detailed:()=>j,Static:()=>B,TwoFigures:()=>A,WithFooter:()=>F,WithTag:()=>N,default:()=>m});var l=h(u(),1);var c=window.React;function s(t,e,o){let{children:n,...a}=e||{};return o!==void 0&&(a.key=o),n===void 0?c.createElement(t,a):Array.isArray(n)?c.createElement(t,a,...n):c.createElement(t,a,n)}var U=c.Fragment;var D={title:"Components/Lib/StatCard",component:l.StatCard,parameters:{layout:"padded"},tags:["autodocs","ds:lib"],args:{title:"North Company",caption:"USD \xB7 1 account",facts:[{label:"Questions",value:"1",tone:"accent"},{label:"Docs",value:"\u2013"},{label:"Review",value:"2",tone:"accent"}]}},m=D,O={display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(18rem, 1fr))",gap:"16px"},R={render:t=>s("div",{style:O,children:[s(l.StatCard,{...t,href:"#north"}),s(l.StatCard,{...t,title:"Boreal Company",caption:"USD \xB7 3 accounts",facts:[{label:"Questions",value:"\u2013"},{label:"Docs",value:"4",tone:"accent"},{label:"Review",value:"12",tone:"accent"}],href:"#boreal"})]})},C={args:{onOpen:()=>{}}},B={},F={args:{footer:"Last reconciled Oct 29"}},A={args:{facts:[{label:"Book balance",value:"75.00",caption:"DR"},{label:"Unposted",value:"2",tone:"accent"}]}},N={args:{tag:"2 new",footer:"1 account \xB7 Cash 75.00 Dr"}},j={args:{details:[["Last activity","Oct 29"],["Open since","Oct 3"]],status:"Waiting on client",actions:s("button",{type:"button",className:"Button","data-emphasis":"quiet",children:"Open Entity \u2192"})}};var r=window.React,y=m||{},L=["Default","AsButton","Static","WithFooter"];function W({id:t}){let e=p[t],o={...y.args||{},...e.args||{}};return(e.render||(a=>r.createElement(y.component,a)))(o,{args:o,id:t,name:t})}var k=L.map(t=>r.createElement("section",{key:t,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(W,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,k));})();
 
 </script>
 </body>