@scattered-light/loomiere-base-ui 0.17.0 → 0.19.0

package/dist/custom/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, aL as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, aM as CurrencySelect, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, aN as KeyOptions, L as ListDetail, u as ListDetailCloseReason, aO as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, aP as ListDetailList, aQ as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aR as MAX_MINOR_UNITS, aS as MoneyChangeDetails, aT as MoneyDisplay, M as MoneyField, aU as MoneyFieldAffix, aV as MoneyFieldGroup, aW as MoneyFieldInput, z as MoneyFieldProps, aX as MoneyFieldRoot, F as MoneyFieldRootProps, aY as MoneyFieldSteps, aZ as NormalizedPaste, a_ as PanelSpec, P as PickerButton, H as PickerButtonProps, I as PickerSplit, J as PickerSplitMain, K as PickerSplitMainProps, O as PickerSplitProps, Q as PickerSplitTrigger, R as PickerSplitTriggerProps, S as Preset, T as PresetValue, a$ as RuntimePanel, U as Sheet, V as SheetProps, W as SideNav, X as SideNavGroup, Y as SideNavGroupProps, Z as SideNavItem, _ as SideNavItemProps, $ as SideNavProps, a0 as SideNavToggle, a1 as SideNavToggleProps, b0 as Size, b1 as SizeInput, a2 as Splitter, b2 as SplitterHandle, a3 as SplitterHandleProps, b3 as SplitterKey, b4 as SplitterPanel, a4 as SplitterPanelProps, b5 as SplitterRoot, a5 as SplitterRootProps, a6 as StatCard, a7 as StatCardFact, a8 as StatCardProps, a9 as StatFigure, aa as StatFigureProps, b6 as StoredLayout, b7 as StoredPanel, ab as addDays, ac as addMonths, b8 as affixSide, b9 as applyKey, ba as applyStored, bb as ariaPercents, ad as builtinPresets, ae as clampDate, bc as createPanels, bd as cssSize, be as currencyName, bf as currencySymbol, af as daysInMonth, ag as defaultPresets, ah as defaultWeekStartsOn, ai as endOfWeek, bg as formatDay, bh as formatFull, aj as formatMoney, ak as fromMinorUnits, al as getCurrencyDigits, bi as handleTarget, am as inclusiveDays, an as isValidCurrency, ao as isoWeek, ap as last30Days, aq as last7Days, ar as lastMonth, as as lastWeek, bj as layoutOf, at as lengthBlockReason, bk as measure, bl as monthCells, bm as moveFocusDate, au as nextMonth, av as nextWeek, bn as normalizePaste, aw as orderRange, bo as parseDate, ax as parseDecimalString, bp as parseSize, bq as presetInBounds, br as resetToDefault, bs as resizeByDelta, ay as resolvePreset, bt as roundHalfExpand, bu as roundingChangesValue, bv as sameSelection, bw as serializeSize, bx as settle, by as sizeText, az as startOfWeek, bz as syncPanels, aA as thisMonth, aB as thisQuarter, aC as thisWeek, aD as toDecimalString, aE as toMinorUnits, aF as today, aG as todayDate, bA as toggleCollapsed, aH as tomorrow, aI as useListDetail, bB as valueText, aJ as yearToDate, aK as yesterday } from '../index-C-lxJXk8.js';
+export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, aL as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, aM as CurrencySelect, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, aN as KeyOptions, L as ListDetail, u as ListDetailCloseReason, aO as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, aP as ListDetailList, aQ as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aR as MAX_MINOR_UNITS, aS as MoneyChangeDetails, aT as MoneyDisplay, M as MoneyField, aU as MoneyFieldAffix, aV as MoneyFieldGroup, aW as MoneyFieldInput, z as MoneyFieldProps, aX as MoneyFieldRoot, F as MoneyFieldRootProps, aY as MoneyFieldSteps, aZ as NormalizedPaste, a_ as PanelSpec, P as PickerButton, H as PickerButtonProps, I as PickerSplit, J as PickerSplitMain, K as PickerSplitMainProps, O as PickerSplitProps, Q as PickerSplitTrigger, R as PickerSplitTriggerProps, S as Preset, T as PresetValue, a$ as RuntimePanel, U as Sheet, V as SheetProps, W as SideNav, X as SideNavGroup, Y as SideNavGroupProps, Z as SideNavItem, _ as SideNavItemProps, $ as SideNavProps, a0 as SideNavToggle, a1 as SideNavToggleProps, b0 as Size, b1 as SizeInput, a2 as Splitter, b2 as SplitterHandle, a3 as SplitterHandleProps, b3 as SplitterKey, b4 as SplitterPanel, a4 as SplitterPanelProps, b5 as SplitterRoot, a5 as SplitterRootProps, a6 as StatCard, a7 as StatCardFact, a8 as StatCardProps, a9 as StatFigure, aa as StatFigureProps, b6 as StoredLayout, b7 as StoredPanel, ab as addDays, ac as addMonths, b8 as affixSide, b9 as applyKey, ba as applyStored, bb as ariaPercents, ad as builtinPresets, ae as clampDate, bc as createPanels, bd as cssSize, be as currencyName, bf as currencySymbol, af as daysInMonth, ag as defaultPresets, ah as defaultWeekStartsOn, ai as endOfWeek, bg as formatDay, bh as formatFull, aj as formatMoney, ak as fromMinorUnits, al as getCurrencyDigits, bi as handleTarget, am as inclusiveDays, an as isValidCurrency, ao as isoWeek, ap as last30Days, aq as last7Days, ar as lastMonth, as as lastWeek, bj as layoutOf, at as lengthBlockReason, bk as measure, bl as monthCells, bm as moveFocusDate, au as nextMonth, av as nextWeek, bn as normalizePaste, aw as orderRange, bo as parseDate, ax as parseDecimalString, bp as parseSize, bq as presetInBounds, br as resetToDefault, bs as resizeByDelta, ay as resolvePreset, bt as roundHalfExpand, bu as roundingChangesValue, bv as sameSelection, bw as serializeSize, bx as settle, by as sizeText, az as startOfWeek, bz as syncPanels, aA as thisMonth, aB as thisQuarter, aC as thisWeek, aD as toDecimalString, aE as toMinorUnits, aF as today, aG as todayDate, bA as toggleCollapsed, aH as tomorrow, aI as useListDetail, bB as valueText, aJ as yearToDate, aK as yesterday } from '../index-ywBkS0AA.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@base-ui/react';

package/dist/custom/index.js

@@ -1,4 +1,4 @@
-export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatCard, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday } from '../chunk-DBNGJCTF.js';
+export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatCard, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday } from '../chunk-2BFNETZZ.js';
 export { EmptyState } from '../chunk-M7KJASGK.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,26 @@
+# CollectionCards
+
+Loomiere component, not part of Base UI. The page of a collection as a grid. Columns fill the width, none narrower than --sl-collection-cards-min-width. Each card stretches to the row's height.
+
+Use `Loomiere.CollectionCards` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `CollectionCards` |   |
+
+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 CollectionCards stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  args: { collection: undefined as never, label: 'Entities', renderCard: () => null },
+  render: () => <Demo />,
+};
+```

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Data" height=160 subtitle="Default" -->
+<!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 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));})();
+
+</script>
+</body>
+</html>

package/dist/design-system/components/SideNav/README.md

@@ -12,7 +12,7 @@ Not a Base UI part, so there is no base-ui.com page for it.
 |---|---|
 | `SideNav` | `data-collapsed` |
 | `SideNavToggle` |   |
-| `SideNavItem` | `data-current`; `data-disabled` |
+| `SideNavItem` | `data-current`; `data-disabled`; `data-nested` |
 | `SideNavItemText` |   |
 | `SideNavItemLabel` |   |
 | `SideNavItemHint` |   |
@@ -51,6 +51,12 @@ export const Default: Story = {
             <SideNavItem current={current === 'accounts'} onClick={go('accounts')}>
               Financial Accounts
             </SideNavItem>
+            <SideNavItem nested current={current === 'checking'} onClick={go('checking')}>
+              Test Checking
+            </SideNavItem>
+            <SideNavItem nested current={current === 'savings'} onClick={go('savings')}>
+              Reserve Savings
+            </SideNavItem>
             <SideNavItem current={current === 'chart'} onClick={go('chart')}>
               Chart of Accounts
             </SideNavItem>

package/dist/design-system/components/SideNav/preview.html

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var C=Object.create;var l=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),k=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},D=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of I(t))!x.call(e,s)&&s!==n&&l(e,s,{get:()=>t[s],enumerable:!(r=E(t,s))||r.enumerable});return e};var S=(e,t,n)=>(n=e!=null?C(R(e)):{},D(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e));var N=v((L,y)=>{y.exports=window.React});var g=v((Q,f)=>{f.exports=window.Loomiere});var p={};k(p,{Default:()=>F,QuietCount:()=>O,default:()=>u});var m=S(N(),1),a=S(g(),1);var d=window.React;function o(e,t,n){let{children:r,...s}=t||{};return n!==void 0&&(s.key=n),r===void 0?d.createElement(e,s):Array.isArray(r)?d.createElement(e,s,...r):d.createElement(e,s,r)}var T=d.Fragment;var A={title:"Components/Lib/SideNav",component:a.SideNav,parameters:{layout:"fullscreen"},tags:["autodocs","ds:lib"]},u=A,F={render:function(){let[t,n]=m.useState(!1),[r,s]=m.useState("dashboard"),c=w=>b=>{b.preventDefault(),s(w)};return o("div",{style:{display:"flex",height:520,width:t?44:240,transition:"width 150ms"},children:o(a.SideNav,{"aria-label":"Entity navigation",collapsed:t,style:{width:"100%"},children:[o(a.SideNavItem,{current:r==="dashboard",onClick:c("dashboard"),children:"Entity Dashboard"}),o(a.SideNavItem,{current:r==="open",count:5,onClick:c("open"),children:"Open Items"}),o(a.SideNavItem,{current:r==="review",count:2,onClick:c("review"),children:"For Review"}),o(a.SideNavGroup,{label:"Books",children:[o(a.SideNavItem,{current:r==="accounts",onClick:c("accounts"),children:"Financial Accounts"}),o(a.SideNavItem,{current:r==="chart",onClick:c("chart"),children:"Chart of Accounts"})]}),o(a.SideNavGroup,{label:"Coming later",children:o(a.SideNavItem,{disabled:!0,hint:"Not yet available",children:"Invoicing"})}),o(a.SideNavToggle,{collapsed:t,onCollapsedChange:n})]})})}},O={render:()=>o("div",{style:{width:240},children:o(a.SideNav,{"aria-label":"Client navigation",children:[o(a.SideNavItem,{current:!0,children:"Client Dashboard"}),o(a.SideNavItem,{count:6,children:"Open Items"}),o(a.SideNavItem,{count:2,countTone:"quiet",children:"All Entities"})]})})};var i=window.React,h=u||{},j=["Default","QuietCount"];function M({id:e}){let t=p[e],n={...h.args||{},...t.args||{}};return(t.render||(s=>i.createElement(h.component,s)))(n,{args:n,id:e,name:e})}var G=j.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(M,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,G));})();
+(()=>{var b=Object.create;var l=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var p=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),x=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},D=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of E(t))!k.call(e,s)&&s!==o&&l(e,s,{get:()=>t[s],enumerable:!(r=I(t,s))||r.enumerable});return e};var S=(e,t,o)=>(o=e!=null?b(R(e)):{},D(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e));var g=p((B,y)=>{y.exports=window.React});var f=p((L,N)=>{N.exports=window.Loomiere});var v={};x(v,{Default:()=>F,QuietCount:()=>O,default:()=>u});var m=S(g(),1),n=S(f(),1);var d=window.React;function a(e,t,o){let{children:r,...s}=t||{};return o!==void 0&&(s.key=o),r===void 0?d.createElement(e,s):Array.isArray(r)?d.createElement(e,s,...r):d.createElement(e,s,r)}var Q=d.Fragment;var A={title:"Components/Lib/SideNav",component:n.SideNav,parameters:{layout:"fullscreen"},tags:["autodocs","ds:lib"]},u=A,F={render:function(){let[t,o]=m.useState(!1),[r,s]=m.useState("dashboard"),i=C=>w=>{w.preventDefault(),s(C)};return a("div",{style:{display:"flex",height:520,width:t?44:240,transition:"width 150ms"},children:a(n.SideNav,{"aria-label":"Entity navigation",collapsed:t,style:{width:"100%"},children:[a(n.SideNavItem,{current:r==="dashboard",onClick:i("dashboard"),children:"Entity Dashboard"}),a(n.SideNavItem,{current:r==="open",count:5,onClick:i("open"),children:"Open Items"}),a(n.SideNavItem,{current:r==="review",count:2,onClick:i("review"),children:"For Review"}),a(n.SideNavGroup,{label:"Books",children:[a(n.SideNavItem,{current:r==="accounts",onClick:i("accounts"),children:"Financial Accounts"}),a(n.SideNavItem,{nested:!0,current:r==="checking",onClick:i("checking"),children:"Test Checking"}),a(n.SideNavItem,{nested:!0,current:r==="savings",onClick:i("savings"),children:"Reserve Savings"}),a(n.SideNavItem,{current:r==="chart",onClick:i("chart"),children:"Chart of Accounts"})]}),a(n.SideNavGroup,{label:"Coming later",children:a(n.SideNavItem,{disabled:!0,hint:"Not yet available",children:"Invoicing"})}),a(n.SideNavToggle,{collapsed:t,onCollapsedChange:o})]})})}},O={render:()=>a("div",{style:{width:240},children:a(n.SideNav,{"aria-label":"Client navigation",children:[a(n.SideNavItem,{current:!0,children:"Client Dashboard"}),a(n.SideNavItem,{count:6,children:"Open Items"}),a(n.SideNavItem,{count:2,countTone:"quiet",children:"All Entities"})]})})};var c=window.React,h=u||{},j=["Default","QuietCount"];function M({id:e}){let t=v[e],o={...h.args||{},...t.args||{}};return(t.render||(s=>c.createElement(h.component,s)))(o,{args:o,id:e,name:e})}var G=j.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(M,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,G));})();
 
 </script>
 </body>