@muibook/components 1.0.2 → 1.0.4

package/dist/muibook/assets/index-CAkZAmud.js

@@ -1,514 +0,0 @@
-import{H as v}from"./index-BrZBJGo2.js";const f="/hero-outcomes.png";class $ extends HTMLElement{constructor(){super();const l=this.attachShadow({mode:"open"}),c=`
-      :host { display: block; }
-
-      /* Customised Carousel */ 
-      .grid {
-        display: grid;
-        grid-template-columns: 1fr;
-      }
-
-      .hero {
-        display: flex;
-        background: var(--surface-recessed-100);
-        padding: var(--space-400);
-        padding-bottom: var(--space-000);
-      }
-      .content {
-        padding: var(--space-500);
-        padding-bottom: var(--space-400);
-        margin-bottom: var(--carousel-tab-offset);
-      }
-
-      @media (min-width: 600px) {
-        .content {
-          padding: var(--space-600);
-        }
-      }
-
-      @media (min-width: 1100px) {
-        .grid  {
-          align-content: end;
-          grid-template-columns: 300px 1fr;
-          gap: var(--space-600);
-          padding: var(--space-400);
-          padding-bottom: var(--space-000);
-        }
-        .hero {
-          background: var(--black-opacity-0);
-          padding: var(--space-000);
-        }
-        .content {
-          padding: var(--space-000);
-          max-width: 45ch;
-        }
-      }
-      @media (min-width: 1300px) {
-        .grid  {
-          justify-self: center;
-          grid-template-columns: 400px 1fr;
-          gap: var(--space-800);
-          padding: var(--space-600);
-          padding-bottom: var(--space-000);
-        }
-        .hero {
-          background: var(--black-opacity-0);
-        }
-        .content {
-          padding: var(--space-000);
-        }
-      }
-      @media (min-width: 1800px) {
-        .grid  {
-          grid-template-columns: 500px 1fr;
-          padding: var(--space-800);
-          padding-bottom: var(--space-000);
-        }
-      }
-
-    `,e=[{name:"slot",required:!0,type:"HTML attribute",options:"mui-tab-bar, mui-carousel-panel",default:"",description:"Assigns the element to a named slot in the Carousel Controller. Required for light DOM content like tabs and panels."}],d=e.map(s=>`
-      <story-type-row
-        ${s.required?"required":""}
-        name="${s.name}"
-        type="${s.type}" 
-        options="${s.options||""}"
-        default="${s.default||""}"
-        description="${s.description}">
-      </story-type-row>
-    `).join(""),u=e.map((s,t)=>{const n=t===e.length-1?"last-child":"";return`
-      <mui-accordion-block 
-        size="medium" 
-        heading=${s.name.charAt(0).toUpperCase()+s.name.slice(1)} 
-        ${n}>
-        <story-type-slat
-          slot="detail"
-          ${s.required?"required":""}
-          name="${s.name}"
-          type="${s.type}" 
-          options="${s.options||""}"
-          default="${s.default||""}"
-          description="${s.description}">
-        </story-type-slat>
-      </mui-accordion-block>
-    `}).join(""),b=[{name:"slot",required:!0,type:"HTML attribute",options:"slot=&#8220;controls&#8221;",default:"",description:"Used when placing mui-tab-bar inside carousel-controller. Required to inject this element into the controls slot."},{name:"controlsPosition",type:"string",options:"top, right, bottom, left, top-right, top-left, bottom-right, bottom-left",default:"bottom",description:"Define the position of the controls for the Carousel"}],m=b.map(s=>`
-          <story-type-row
-            ${s.required?"required":""}
-            name="${s.name}"
-            type="${s.type}" 
-            options="${s.options||""}"
-            default="${s.default||""}"
-            description="${s.description}">
-          </story-type-row>
-        `).join(""),g=b.map((s,t)=>{const n=t===b.length-1?"last-child":"";return`
-          <mui-accordion-block 
-            size="medium" 
-            heading=${s.name.charAt(0).toUpperCase()+s.name.slice(1)} 
-            ${n}>
-            <story-type-slat
-              slot="detail"
-              ${s.required?"required":""}
-              name="${s.name}"
-              type="${s.type}" 
-              options="${s.options||""}"
-              default="${s.default||""}"
-              description="${s.description}">
-            </story-type-slat>
-          </mui-accordion-block>
-        `}).join(""),o=[{name:"slot",required:!0,type:"HTML attribute",options:"slot=&#8220;item&#8221;",default:"",description:"Places the individual panel in the correct slot within the Carousel"},{name:"item",type:"string",options:"any",default:"",description:"Maps to the corresponding id of a tab-item in the tab bar. Controls which panel is shown based on the selected tab."}],h=o.map(s=>`
-            <story-type-row
-              ${s.required?"required":""}
-              name="${s.name}"
-              type="${s.type}" 
-              options="${s.options||""}"
-              default="${s.default||""}"
-              description="${s.description}">
-            </story-type-row>
-          `).join(""),y=o.map((s,t)=>{const n=t===o.length-1?"last-child":"";return`
-          <mui-accordion-block 
-            size="medium" 
-            heading=${s.name.charAt(0).toUpperCase()+s.name.slice(1)} 
-            ${n}>
-            <story-type-slat
-              slot="detail"
-              ${s.required?"required":""}
-              name="${s.name}"
-              type="${s.type}" 
-              options="${s.options||""}"
-              default="${s.default||""}"
-              description="${s.description}">
-            </story-type-slat>
-          </mui-accordion-block>
-        `}).join(""),a=[{id:"one",label:"1",active:!0,heading:"Guides",description:"A Figma plugin that delivers UX guidelines and customisable content, seamlessly integrating design system guides into Figma workflows.",image:`${v}`},{id:"two",label:"2",heading:"Outcomes",description:"Track objectives and key results in an outcome-based roadmap. Organise tasks into Upcoming, Doing, and Finished columns to drive meaningful progress.",image:`${f}`}],r=a.map(({id:s,label:t,icon:n,active:i})=>`<mui-tab-item id="${s}" icon="${n}"${i?" active":""}>${t}</mui-tab-item>`).join(""),p=a.map(({id:s,heading:t,description:n,image:i})=>`
-        <mui-carousel-panel slot="item" item="${s}">
-          <div class="grid">
-            <div class="hero">
-              <img style="width: 100%; height: auto;" width="400" height="376" src="${i}" alt="${t}" />
-            </div>
-            <mui-v-stack class="content">
-              <mui-heading size="2" level="3">${t}</mui-heading>
-              <mui-body>${n}</mui-body>
-            </mui-v-stack>
-          </div>
-        </mui-carousel-panel>
-        `).join("");l.innerHTML=`
-      <style>${c}</style>
-
-      <story-template
-        title="Carousel"
-        description="A carousel component with tab-based navigation, enabling users to switch between views or content sections with ease."
-        github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-carousel"
-        figma=""
-        accessibility="
-          Left/Right arrows, Home and End keys let keyboard users navigate between carousel items.; 
-          aria-selected and tabindex attributes are updated on each tab-item when it becomes active or inactive.; 
-          Each active tab-item can receive focus and shows a focus-visible outline.; 
-          tab-bar uses role=tablist to group related tab-items and each tab-item uses role=tab within the tab-bar.
-        "
-
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-        <spec-card title="Props: Carousel Controller" description="The carousel-controller handles layout and transitions. Slotted children like tab-bar and carousel-panel must include the correct slot attributes to integrate properly.">
-          <mui-responsive breakpoint="767" slot="body">
-            <story-type-table slot="showAbove">
-              ${d}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${u}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-        <spec-card title="Props: Tab Bar" description="When used inside carousel-controller, mui-tab-bar can accept additional props to control placement and integration within the carousel layout.">
-          <mui-responsive breakpoint="767" slot="body">
-            <story-type-table slot="showAbove">
-              ${m}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${g}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-        <spec-card title="Props: Carousel Panel " description="Used to display the content for each carousel item. This component is typically slotted into a mui-carousel-controller and responds to tab selection based on the item mapping.">
-          <mui-responsive breakpoint="767" slot="body">
-            <story-type-table slot="showAbove">
-              ${h}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${y}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-        <story-card 
-          title="Default"
-          description="A flexible, composable carousel that gives you full control over the content and internal layout."
-          github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/muibook/story/components/mui-carousel/index.js"
-          usage="
-            Carousel controls are set to bottom-center by default.;
-            Internal padding is required.;
-            The var(--carousel-tab-offset) is available to help with control spacing - though, not required.;
-            You will need knowledge of CSS to add your specific custom content.
-          "  
-        >
-          <mui-carousel-controller slot="body">
-            <mui-tab-bar slot="controls">
-              <mui-tab-item active id="one">1</mui-tab-item>
-              <mui-tab-item id="two">2</mui-tab-item>
-            </mui-tab-bar>
-            <mui-carousel-panel slot="item" item="one" >
-              <mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);">
-                <mui-v-stack style="padding: var(--space-500) var(--space-600);">
-                  <mui-heading level="3" size="2">Item 1</mui-heading>
-                  <mui-body>The default carousel is a flexible canvas. Your content defines the layout and spacing.</mui-body>
-                  <mui-code>
-                  &lt;mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);"&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-v-stack style="padding: var(--space-600);"&gt;
-                  <br />
-                  &nbsp;&nbsp;&nbsp;&nbsp;...
-                  <br />
-                  &nbsp;&nbsp;&lt;/mui-v-stack
-                  <br />
-                  &lt;/mui-grid&gt;
-                  </mui-code>
-                </mui-v-stack>
-              </mui-grid>  
-            </mui-carousel-panel>
-            <mui-carousel-panel slot="item" item="two" >
-              <mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);">
-                <mui-v-stack style="padding: var(--space-500) var(--space-600);">
-                  <mui-heading level="3" size="2">Item 2</mui-heading>
-                  <mui-body>The default carousel is a flexible canvas. Your content defines the layout and spacing.</mui-body>
-                  <mui-code>
-                  &lt;mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);"&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-v-stack style="padding: var(--space-600);"&gt;
-                  <br />
-                  &nbsp;&nbsp;&nbsp;&nbsp;...
-                  <br />
-                  &nbsp;&nbsp;&lt;/mui-v-stack
-                  <br />
-                  &lt;/mui-grid&gt;
-                  </mui-code>
-                </mui-v-stack>
-              </mui-grid>  
-            </mui-carousel-panel>
-          </mui-carousel-controller>
-
-          <mui-code slot="footer">
-            &lt;mui-carousel-controller&gt;<br />
-            &nbsp;&nbsp;&lt;mui-tab-bar slot="controls"&gt;<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-tab-item active id="one"&gt;1&lt;/mui-tab-item&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;... Add other tabs ...
-            <br />
-            &nbsp;&nbsp;&lt;/mui-tab-bar&gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;&lt;mui-carousel-panel slot="item" item="one"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);"&gt;<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack style="padding: var(--space-500) var(--space-600);"&gt;<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-heading level="3" size="2"&gt;Item 1&lt;/mui-heading&gt;<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;Content...&lt;/mui-body&gt;<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-grid&gt;
-            <br />
-            &nbsp;&nbsp;&lt;/mui-carousel-panel&gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;... Add other panels ...
-            <br />
-            <br />
-            &lt;/mui-carousel-controller&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Custom Layout" 
-          description="Demonstrates how to add custom compositions and layouts within the carousel panels."
-          github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/muibook/story/components/mui-carousel/index.js"  
-        >
-          <mui-carousel-controller slot="body">
-            <mui-tab-bar slot="controls" controlsPosition="bottom-right">
-              ${r}
-            </mui-tab-bar>
-            ${p}
-          </mui-carousel-controller>
-          <mui-code slot="footer">
-            /* === Author Styles ================= */
-            <br />
-            <br />
-            .grid {<br />
-            &nbsp;&nbsp;display: grid;<br />
-            &nbsp;&nbsp;grid-template-columns: 1fr;<br />
-            }<br /><br />
-            .hero {<br />
-            &nbsp;&nbsp;display: flex;<br />
-            &nbsp;&nbsp;background: var(--black-opacity-40);<br />
-            &nbsp;&nbsp;padding: var(--space-400);<br />
-            &nbsp;&nbsp;padding-bottom: var(--space-000);<br />
-            }<br /><br />
-            .content {<br />
-            &nbsp;&nbsp;padding: var(--space-600);<br />
-            &nbsp;&nbsp;padding-bottom: var(--space-400);<br />
-            &nbsp;&nbsp;margin-bottom: var(--carousel-tab-offset);<br />
-            }<br /><br />
-            @media (min-width: 1100px) {<br />
-            &nbsp;&nbsp;.grid { ... }<br />
-            &nbsp;&nbsp;.hero { ... }<br />
-            &nbsp;&nbsp;.content { ... }<br />
-            }
-            <br />
-            <br />
-            <br />
-            
-            /* === Component Usage =============== */
-            <br />
-            <br />
-            &lt;mui-carousel-controller&gt;<br />
-            &nbsp;&nbsp;&lt;mui-tab-bar slot="controls" controlsPosition="bottom-right"&gt;<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-tab-item active id="one"&gt;1&lt;/mui-tab-item&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;...
-            <br />
-            &nbsp;&nbsp;&lt;/mui-tab-bar&gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;&lt;mui-carousel-panel slot="item" item="one"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="grid"&gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="hero"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style="width: 100%; height: auto;"
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width="400"
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height="376"
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src="./images/guides.png"
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack class="content"&gt;<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-heading level="3" size="2"&gt;Guides&lt;/mui-heading&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A Figma plugin that delivers UX...
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-body&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
-            &nbsp;&nbsp;&lt;/mui-carousel-panel&gt;<br />
-            <br />
-            &nbsp;&nbsp;...
-            <br />
-            <br />
-            &lt;/mui-carousel-controller&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Map Data" 
-          description="Map dynamic data to generate carousel tabs and panels."
-          github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/muibook/story/components/mui-carousel/index.js"  
-        >
-          <mui-carousel-controller slot="body">
-            <mui-tab-bar slot="controls" controlsPosition="bottom-right">
-              ${r}
-            </mui-tab-bar>
-            ${p}
-          </mui-carousel-controller>
-          <mui-code slot="footer">
-            /* === Carousel Data =================== */
-            <br />
-            <br />
-            const carouselData = [
-            <br />
-            &nbsp;&nbsp;{
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;id: 'one',
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;label: '1',
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;active: true
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;heading: 'Guides',
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;description: 'A Figma plugin that...',
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;image: './images/guru/hero-guides.png',
-              <br />
-            &nbsp;&nbsp;},
-            <br />
-            &nbsp;&nbsp;{
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;id: 'two',
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;label: '2',
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;heading: 'Outcomes',
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;description: 'Track objectives and key...',
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;image: './images/guru/hero-outcomes.png',
-              <br />
-            &nbsp;&nbsp;},
-            <br />
-            ];
-            <br />
-            <br />
-            /* === Carousel Tabs Items ============== */
-            <br />
-            <br />
-            const carouselTabItems = carouselData
-            <br />
-            &nbsp;&nbsp;.map(({ label, icon, active }) => {
-              <br />
-            &nbsp;&nbsp;const activeAttr = active ? ' active' : '';
-            <br />
-            &nbsp;&nbsp;return &#96;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-tab-item 
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id="&#36;{id}" 
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;icon="&#36;{icon}" 
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#36;{activeAttr}
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#36;{label}
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-tab-item&gt;
-            <br />
-            &nbsp;&nbsp;&#96;;
-            <br />
-            })
-            <br />
-            .join('');
-            <br />
-            <br />
-            /* === Carousel Panels =============== */
-            <br />
-            <br />
-            const carouselItems = carouselData
-            <br />
-            &nbsp;&nbsp;.map(({ heading, description, image }) => {
-            <br />
-            &nbsp;&nbsp;return &#96;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-carousel-panel 
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slot="item" 
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item="&#36;{id}" 
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-carousel-panel&gt;
-            <br />
-            &nbsp;&nbsp;&#96;;
-            <br />
-            })
-            <br />
-            .join('');
-            <br />
-            <br />
-            /* === Component Usage =============== */
-            <br />
-            <br />
-            &lt;mui-carousel-controller&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-tab-bar slot="controls"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&#36;{carouselTabItems}
-            <br />
-            &nbsp;&nbsp;&lt;/mui-tab-bar&gt;
-            <br />
-            &nbsp;&nbsp;&#36;{carouselItems}
-            <br />
-            &lt;/mui-carousel-controller&gt;
-          </mui-code>
-        </story-card>
-  
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-carousel",$);

package/dist/muibook/assets/index-CCegrD2J.js

@@ -1,130 +0,0 @@
-import{V as n,M as p}from"./mui-D6S1tQ24.js";const t="/snowy-mint.png";class a extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),b=`
-      :host { 
-        display: block;
-      }
-    `;s.innerHTML=`
-      <style>${b}</style>
-
-      <story-template 
-        title="Wallet"
-        description=""
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-        <story-card title="Transactions">
-
-          <mui-v-stack alignX="stretch" slot="body" style="max-width: 365px; margin: 0 auto; padding-top: var(--space-700); padding-bottom: var(--space-700)">
-            <mui-smart-card
-              variant="animated"
-              partner="${n}"
-              type="Debit"
-              number="1234"
-              logo="${p}"
-              logo-height="100"
-              bg-image="${t}"
-            >
-            </mui-smart-card>
-
-            <mui-slat style="padding-left: var(--space-400); padding-right: var(--space-400);">
-              <mui-v-stack slot="start" space="0" slot="end">
-                <mui-body size="small" weight="bold">Espresso Bar</mui-body>
-                <mui-body size="x-small">Food & Drink</mui-body>
-              </mui-v-stack>
-              <mui-v-stack space="0" slot="end" alignX="end">
-                <mui-body size="x-small">Pending</mui-body>
-                <mui-body size="small">-$8.12</mui-body>
-              </mui-v-stack>
-            </mui-slat>
-
-            <mui-slat style="padding-left: var(--space-400); padding-right: var(--space-400);">
-              <mui-v-stack slot="start" space="0" slot="end">
-                <mui-body size="small" weight="bold">Apple App Store</mui-body>
-                <mui-body size="x-small">Entertainment</mui-body>
-              </mui-v-stack>
-              <mui-v-stack space="0" slot="end" alignX="end">
-                <mui-body size="x-small">Pending</mui-body>
-                <mui-body size="small">-$4.99</mui-body>
-              </mui-v-stack>
-            </mui-slat>
-
-            <mui-slat style="padding-left: var(--space-400); padding-right: var(--space-400);">
-              <mui-v-stack slot="start" space="0" slot="end">
-                <mui-body size="small" weight="bold">IGA South Yarra</mui-body>
-                <mui-body size="x-small">Groceries</mui-body>
-              </mui-v-stack>
-              <mui-v-stack space="0" slot="end" alignX="end">
-                <mui-body size="x-small">Pending</mui-body>
-                <mui-body size="small">-$26.89</mui-body>
-              </mui-v-stack>
-            </mui-slat>
-
-          </mui-v-stack>
-
-          <mui-code slot="footer">
-          &lt;mui-v-stack<br>
-          &nbsp;&nbsp;alignX="stretch"<br>
-          &nbsp;&nbsp;style="<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;max-width: 365px;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;margin: 0 auto;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;padding-top: var(--space-700);<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom: var(--space-700)<br>
-          &nbsp;&nbsp;"<br>
-          &gt;<br><br>
-
-          &nbsp;&nbsp;&lt;mui-smart-card<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;variant="virtual"<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;provider="visa"<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;type="Debit"<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;number="1234"<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;logo="./images/mui-card-black.svg"<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;logo-height="100"<br>
-          &nbsp;&nbsp;&gt;&lt;/mui-smart-card&gt;<br><br>
-
-          &nbsp;&nbsp;&lt;mui-slat<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;style="padding-left: var(--space-400);<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-right: var(--space-400);"&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="start" space="0"&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small" weight="bold"&gt;Espresso Bar&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Food &amp; Drink&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="end" space="0" alignX="end"&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Pending&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small"&gt;-$8.12&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
-          &nbsp;&nbsp;&lt;/mui-slat&gt;<br><br>
-
-          &nbsp;&nbsp;&lt;mui-slat<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;style="padding-left: var(--space-400);<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-right: var(--space-400);"&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="start" space="0"&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small" weight="bold"&gt;Apple App Store&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Entertainment&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="end" space="0" alignX="end"&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Pending&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small"&gt;-$4.99&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
-          &nbsp;&nbsp;&lt;/mui-slat&gt;<br><br>
-
-          &nbsp;&nbsp;&lt;mui-slat<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;style="padding-left: var(--space-400);<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-right: var(--space-400);"&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="start" space="0"&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small" weight="bold"&gt;IGA South Yarra&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Groceries&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="end" space="0" alignX="end"&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Pending&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small"&gt;-$26.89&lt;/mui-body&gt;<br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
-          &nbsp;&nbsp;&lt;/mui-slat&gt;<br><br>
-
-          &lt;/mui-v-stack&gt;
-          </mui-code>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("comp-wallet",a);