tuix-webcomponents 0.62.0 → 0.64.0

package/dist/assets/tuix-paper.stories-CLnRPHNK.js

@@ -0,0 +1,31 @@
+import{x as a}from"./iframe-ClsPaEIM.js";import{l as i}from"./index-DBzYXxxs.js";import{B as r,P as o}from"./tuix-paper.enum-DhmlUJB7.js";import{P as s}from"./tuix-icon.enums-DYTtwLZl.js";import{T as n}from"./tuix-text.enums-Ck8cVqZZ.js";import"./state-CLjydI9z.js";import"./screenSizes.enum-C1IhC_dy.js";import"./TuixIconButton-eQtxZNXh.js";import"./TuixToast-BhxwZIGo.js";import"./TuixModal-BZFIHTi_.js";i();const b={title:"TuixPaper",component:"tuix-paper",argTypes:{elevation:{control:"select",options:Object.values(o)},borderRadius:{control:"select",options:Object.values(r)},dark:{control:"boolean"}},render:e=>a`
+    <style>
+      tuix-text {
+        width: 181px;
+        height: 181px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+    <div
+      style="display: flex; justify-content: center; align-items: center; height: 100vh;
+    ${e.dark?`background-color: ${s.BLACK};`:""}"
+    >
+      <tuix-paper
+        elevation="${e.elevation}"
+        ?dark="${e.dark}"
+        border-radius="${e.borderRadius}"
+      >
+        <tuix-text size="${n.Body2}" ?dark="${e.dark}">
+          Elevation
+        </tuix-text>
+      </tuix-paper>
+    </div>
+  `},t={args:{elevation:o.VARIANT_1,borderRadius:r.STRONG,dark:!1}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    elevation: PaperElevation.VARIANT_1,
+    borderRadius: BorderRadiusPaper.STRONG,
+    dark: false
+  }
+}`,...t.parameters?.docs?.source}}};const k=["elevation"];export{k as __namedExportsOrder,b as default,t as elevation};

package/dist/assets/tuix-radio-button.stories-BwkKC3a9.js

@@ -0,0 +1,35 @@
+import{x as i}from"./iframe-ClsPaEIM.js";import{C as t,l as a}from"./index-DBzYXxxs.js";import{T as n,a as r}from"./tuix-text.enums-Ck8cVqZZ.js";import{P as l}from"./tuix-icon.enums-DYTtwLZl.js";import"./state-CLjydI9z.js";import"./screenSizes.enum-C1IhC_dy.js";import"./TuixIconButton-eQtxZNXh.js";import"./tuix-paper.enum-DhmlUJB7.js";import"./TuixToast-BhxwZIGo.js";import"./TuixModal-BZFIHTi_.js";a();const h={title:"TuixRadioButton",component:"tuix-radio-button",argTypes:{disabled:{control:"boolean"},dark:{control:"boolean"},error:{control:"boolean"},options:{control:"object"},labelSide:{control:"select",options:Object.values(t)},selectedOption:{control:"object"},onChange:{action:"change"}},render:e=>i` <div
+    style="display: flex; justify-content: center; align-items: center; height: 100vh; ${e.dark?"background-color:"+l.BLACK+";":""}}"
+  >
+    <div
+      style="max-width: 300px; display: flex; gap: 16px; flex-direction: column"
+    >
+      <tuix-radio-button
+        ?disabled="${e.disabled}"
+        ?dark="${e.dark}"
+        ?error="${e.error}"
+        .options="${e.options}"
+        labelSide="${e.labelSide}"
+        .selectedOption="${e.selectedOption}"
+        @change="${e.onChange}"
+      >
+        <tuix-text
+          size="${n.Field1}"
+          color="${r.PRIMARY}"
+          slot="label-1"
+          ?dark="${e.dark}"
+        >
+          Label from named slot 1 using a long text with max-width container
+        </tuix-text>
+      </tuix-radio-button>
+    </div>
+  </div>`},o={args:{disabled:!1,dark:!1,error:!1,options:["Option 0","Option 1","Option 2"],labelSide:t.RIGHT,selectedOption:"Option 0"}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: false,
+    dark: false,
+    error: false,
+    options: ['Option 0', 'Option 1', 'Option 2'],
+    labelSide: CheckboxLabelSide.RIGHT,
+    selectedOption: 'Option 0'
+  }
+}`,...o.parameters?.docs?.source}}};const k=["tuixRadioButtonExample"];export{k as __namedExportsOrder,h as default,o as tuixRadioButtonExample};

package/dist/assets/tuix-table.stories-Bn-aZa0J.js

@@ -0,0 +1,65 @@
+import{x as p}from"./iframe-ClsPaEIM.js";import{P as w,I as g,a as b}from"./tuix-icon.enums-DYTtwLZl.js";import{a as m}from"./tuix-text.enums-Ck8cVqZZ.js";const L=[{name:"ID",dataKey:"id",width:10},{name:"Name",dataKey:"name",width:20},{name:"Status",dataKey:"status",width:20},{name:"Input",isSlot:!0,slotName:"input",width:30},{name:"Actions",isSlot:!0,slotName:"actions",width:30}],C=[{id:1,name:"Alice",status:"Success"},{id:2,name:"Bob",status:"Error"},{id:3,name:"Carol",status:"Success"},{id:4,name:"Dan",status:"Error"},{id:5,name:"Eve",status:"Success"},{id:6,name:"Luis",status:"Success"},{id:7,name:"Juan",status:"Success"},{id:8,name:"Ariel",status:"Success"}],K={title:"TuixTable",component:"tuix-table",argTypes:{headers:{control:"object"},data:{control:"object"},paginated:{control:"boolean"},disableMobileTable:{control:"boolean"},showMobileTableInTablet:{control:"boolean"},pageSizeOptions:{control:"object"},totalItems:{control:"number"},currentPage:{control:"number"},currentSize:{control:"number"},isLoadingData:{control:"boolean"},loader:{control:"object"},onNextPage:{action:"next-page"},onPreviousPage:{action:"previous-page"},onPageSizeChange:{action:"page-size-change"}}},N=s=>{const{headers:S,data:n,paginated:r,disableMobileTable:x,showMobileTableInTablet:z,pageSizeOptions:T,totalItems:$,currentPage:l,currentSize:c,isLoadingData:h,loader:f}=s,i=(e,a,t,E)=>{const D=Math.max(1,a??1),d=Math.max(1,t??E?.[0]??5),u=(D-1)*d;return e.slice(u,u+d)},I=r?i(n,l,c):n,P=e=>{const a=e.detail,t=e.currentTarget;t&&(t.currentPage=a.page,t.currentSize=a.pageSize,t.data=i(n,a.page,a.pageSize))},M=e=>{const a=e.detail,t=e.currentTarget;t&&(t.currentPage=a.page,t.currentSize=a.pageSize,t.data=i(n,a.page,a.pageSize))},v=e=>{const a=e.detail,t=e.currentTarget;t&&(t.currentPage=a.page,t.currentSize=a.pageSize,t.data=i(n,a.page,a.pageSize))},y=S.map(e=>e.dataKey==="status"?{...e,cellColor:a=>a.status==="Success"?m.SUCCESS:m.ERROR}:{...e});return p`<div style="padding:40px">
+    <tuix-table
+      .headers=${y}
+      .data=${I}
+      .paginated=${r}
+      .disableMobileTable=${x}
+      .showMobileTableInTablet=${z}
+      .pageSizeOptions=${T}
+      .totalItems=${$}
+      .currentPage=${l}
+      .currentSize=${c}
+      .isLoadingData=${h}
+      .loader=${f}
+      @next-page=${P}
+      @previous-page=${M}
+      @page-size-change=${v}
+    >
+      ${n.map(e=>p`
+          <div slot=${`actions-${e.id}`}>
+            <tuix-icon
+              name="${g.ARCHIVE}"
+              size="${b.MEDIUM}"
+            ></tuix-icon>
+            <tuix-icon
+              name="${g.BELL}"
+              size="${b.MEDIUM}"
+            ></tuix-icon>
+          </div>
+
+          <div slot=${`input-${e.id}`}>
+            <tuix-input
+              type="text"
+              name=${`input-${e.id}`}
+              placeholder="type"
+            />
+          </div>
+        `)}
+    </tuix-table>
+  </div>`},o={render:s=>N(s),args:{headers:L,data:C,paginated:!0,disableMobileTable:!1,showMobileTableInTablet:!1,pageSizeOptions:[5,10,20],totalItems:8,currentPage:1,currentSize:5,isLoadingData:!1,loader:{size:"30px",color:w.MAIN,visible:!0,ariaLabel:"Loading",wrapperStyle:{width:"100%",display:"flex",justifyContent:"center",padding:"48px 0"}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: (args: ArgTypes) => Template(args),
+  args: {
+    headers: defaultHeaderDescriptors,
+    data: defaultData,
+    paginated: true,
+    disableMobileTable: false,
+    showMobileTableInTablet: false,
+    pageSizeOptions: [5, 10, 20],
+    totalItems: 8,
+    currentPage: 1,
+    currentSize: 5,
+    isLoadingData: false,
+    loader: {
+      size: '30px',
+      color: Palette.MAIN,
+      visible: true,
+      ariaLabel: 'Loading',
+      wrapperStyle: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '48px 0'
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};const R=["tuixTableExample"];export{R as __namedExportsOrder,K as default,o as tuixTableExample};

package/dist/assets/tuix-text.enums-Ck8cVqZZ.js

@@ -0,0 +1 @@
+import{P as A,D as l}from"./tuix-icon.enums-DYTtwLZl.js";var E=(R=>(R.PRIMARY="primary",R.SECONDARY="secondary",R))(E||{}),r=(R=>(R.XL="xl",R.L="l",R.M="m",R.S="s",R.XS="xs",R.Body1="body1",R.Body2="body2",R.Link="link",R.Button="button",R.Field1="field1",R.Field2="field2",R))(r||{}),I=(R=>(R[R.PRIMARY=E.PRIMARY]="PRIMARY",R[R.SECONDARY=E.SECONDARY]="SECONDARY",R.MAIN="main",R.DARK_MAIN="dark_main",R.GREY="grey",R.LIGHT_GREY="light_grey",R.DISABLED="disabled",R.VALIDATION="validation",R.ERROR="error",R.SUCCESS="success",R.LIGHT="light",R.DARK="dark",R.DARK_BLUE="dark_blue",R.TITLE_BLUE="title_blue",R))(I||{});const _={main:A.MAIN,dark_main:A.DARK_MAIN,[I.PRIMARY]:A.BLACK,[I.SECONDARY]:A.WHITE,grey:A.NEUTRAL_600,light_grey:A.NEUTRAL_200,disabled:A.PRIMARY_200,validation:A.VALIDATION,error:A.ERROR,success:A.SUCCESS,light:A.WHITE,dark:A.BLACK,dark_blue:A.DARK_MAIN,title_blue:A.DARK_MAIN},s={..._,main:l.MAIN,dark_main:l.NEUTRAL_600,[I.PRIMARY]:l.WHITE,[I.SECONDARY]:A.BLACK,grey:l.NEUTRAL_600,validation:l.VALIDATION,error:l.ERROR,success:l.SUCCESS,light:l.WHITE,dark_blue:l.PRIMARY_800,title_blue:l.PRIMARY_300};export{E as M,r as T,I as a,_ as b,s as c};

package/dist/assets/tuix-text.stories-BNIqPsGD.js

@@ -0,0 +1,29 @@
+import{x as a}from"./iframe-ClsPaEIM.js";import{l}from"./index-DBzYXxxs.js";import{T as o,a as r}from"./tuix-text.enums-Ck8cVqZZ.js";import{P as i}from"./tuix-icon.enums-DYTtwLZl.js";import"./state-CLjydI9z.js";import"./screenSizes.enum-C1IhC_dy.js";import"./TuixIconButton-eQtxZNXh.js";import"./tuix-paper.enum-DhmlUJB7.js";import"./TuixToast-BhxwZIGo.js";import"./TuixModal-BZFIHTi_.js";l();const $={title:"TuixText",component:"tuix-text",argTypes:{value:{control:"text"},size:{control:"select",options:Object.values(o)},color:{control:"select",options:Object.values(r)},dark:{control:"boolean"}},render:e=>a`
+    <style>
+      tuix-text > * {
+        display: block;
+      }
+    </style>
+    <div
+      style="display: flex; justify-content: center; align-items: center; height: 100%; 
+    ${e.dark?`background-color: ${i.BLACK};`:""}"
+    >
+      <tuix-text size="${e.size}" color="${e.color}" ?dark="${e.dark}">
+        ${e.value}
+        <h1>${e.value}</h1>
+        <h2>${e.value}</h2>
+        <h3>${e.value}</h3>
+        <h4>${e.value}</h4>
+        <h5>${e.value}</h5>
+        <h6>${e.value}</h6>
+        <p>${e.value}</p>
+        <span> ${e.value} </span>
+      </tuix-text>
+    </div>
+  `},t={args:{value:"Test text",size:o.XL,dark:!1}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    value: 'Test text',
+    size: TextSize.XL,
+    dark: false
+  }
+}`,...t.parameters?.docs?.source}}};const f=["Headline"];export{t as Headline,f as __namedExportsOrder,$ as default};

package/dist/assets/tuix-toast.stories-CRYiLiHK.js

@@ -0,0 +1,21 @@
+import{x as e}from"./iframe-ClsPaEIM.js";import{T as i}from"./TuixToast-BhxwZIGo.js";import{P as a}from"./tuix-icon.enums-DYTtwLZl.js";import"./screenSizes.enum-C1IhC_dy.js";import"./state-CLjydI9z.js";import"./tuix-paper.enum-DhmlUJB7.js";const p={title:"TuixToast",component:"tuix-toast",argTypes:{type:{control:"select",options:Object.values(i)},dark:{control:"boolean"},visibilityDuration:{control:"number"},onClose:{action:"on-close"}},render:t=>e`
+    <div
+      style="height: 100vh; ${t.dark?`background-color: ${a.BLACK};`:""}"
+    >
+      <tuix-toast
+        type="${t.type}"
+        ?dark="${t.dark}"
+        visibility-duration="${t.visibilityDuration}"
+        @on-close="${t.onClose}"
+      >
+        Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum
+        dignissim at orci. Augue vivamus arcu massa porta facilisi.
+      </tuix-toast>
+    </div>
+  `},o={args:{type:i.TEXT,dark:!1,visibilityDuration:4e3}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    type: ToastType.TEXT,
+    dark: false,
+    visibilityDuration: 4000
+  }
+}`,...o.parameters?.docs?.source}}};const u=["toastExample"];export{u as __namedExportsOrder,p as default,o as toastExample};

package/dist/assets/tuix-toggle-button.stories-CY6wlDnA.js

@@ -0,0 +1,40 @@
+import{x as l}from"./iframe-ClsPaEIM.js";import{C as o,l as a}from"./index-DBzYXxxs.js";import{T as i,a as d}from"./tuix-text.enums-Ck8cVqZZ.js";import{P as n}from"./tuix-icon.enums-DYTtwLZl.js";import"./state-CLjydI9z.js";import"./screenSizes.enum-C1IhC_dy.js";import"./TuixIconButton-eQtxZNXh.js";import"./tuix-paper.enum-DhmlUJB7.js";import"./TuixToast-BhxwZIGo.js";import"./TuixModal-BZFIHTi_.js";a();const k={title:"TuixToggleButton",component:"tuix-toggle-button",argTypes:{checked:{control:"boolean"},disabled:{control:"boolean"},dark:{control:"boolean"},label:{control:"text"},labelSide:{control:"select",options:Object.values(o)},onChange:{action:"change"}},render:e=>l`<div
+    style="display: flex; justify-content: center; align-items: center; height: 100vh; 
+  ${e.dark?`background-color: ${n.BLACK};`:""}"
+  >
+    <div
+      style="max-width: 300px; display: flex; gap: 16px; flex-direction: column"
+    >
+      <tuix-toggle-button
+        ?checked="${e.checked}"
+        ?disabled="${e.disabled}"
+        ?dark="${e.dark}"
+        label="${e.label}"
+        labelSide="${e.labelSide}"
+        @change="${e.onChange}"
+      ></tuix-toggle-button>
+      <tuix-toggle-button
+        ?checked="${e.checked}"
+        ?disabled="${e.disabled}"
+        ?dark="${e.dark}"
+        labelSide="${e.labelSide}"
+        @change="${e.onChange}"
+      >
+        <tuix-text
+          size="${i.Field1}"
+          color="${d.PRIMARY}"
+          ?dark="${e.dark}"
+        >
+          Label from slot using a long text with max-width container
+        </tuix-text>
+      </tuix-toggle-button>
+    </div>
+  </div>`},t={args:{checked:!1,disabled:!1,dark:!1,label:"Label from property",labelSide:o.RIGHT}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    checked: false,
+    disabled: false,
+    dark: false,
+    label: 'Label from property',
+    labelSide: CheckboxLabelSide.RIGHT
+  }
+}`,...t.parameters?.docs?.source}}};const f=["tuixToggleExample"];export{f as __namedExportsOrder,k as default,t as tuixToggleExample};

package/dist/favicon-wrapper.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <mask id="active-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M25,15.3 C26.8630998,15.3 28.7261995,16.2284418 29.795607,18.0853254 L29.795607,18.0853254 L34.7484772,26.6853254 C35.2679728,27.5873604 35.5068948,28.5446245 35.509009,29.4780654 C35.5112408,30.4762222 35.243212,31.4466974 34.7610935,32.2926531 C34.2789749,33.1386087 33.5826171,33.8603071 32.7267084,34.3600412 C31.9262928,34.8273748 30.9864445,35.1 29.9528702,35.1 L29.9528702,35.1 L20.0471298,35.1 C19.0135555,35.1 18.0737072,34.8273748 17.2732916,34.3600412 C16.4173829,33.8603071 15.7210251,33.1386087 15.2389065,32.2926531 C14.756788,31.4466974 14.4887592,30.4762222 14.490991,29.4780654 C14.4931052,28.5446245 14.7320272,27.5873604 15.2515228,26.6853254 L15.2515228,26.6853254 L20.204393,18.0853254 C21.2738005,16.2284418 23.1369002,15.3 25,15.3 Z"
+        transform="rotate(90 25 25.2)" />
+    </mask>
+    <mask id="critical-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M23.9,14.6 C26.7442665,14.6 29.3192665,15.7528668 31.1831998,17.6168002 C33.0471332,19.4807335 34.2,22.0557335 34.2,24.9 C34.2,27.7442665 33.0471332,30.3192665 31.1831998,32.1831998 C29.3192665,34.0471332 26.7442665,35.2 23.9,35.2 C21.0557335,35.2 18.4807335,34.0471332 16.6168002,32.1831998 C14.7528668,30.3192665 13.6,27.7442665 13.6,24.9 C13.6,22.0557335 14.7528668,19.4807335 16.6168002,17.6168002 C18.4807335,15.7528668 21.0557335,14.6 23.9,14.6 Z" />
+    </mask>
+    <mask id="negative-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M28.2,14.8 C29.633165,14.8 31.06633,15.346734 32.159798,16.440202 C33.2414078,17.5218119 33.7880833,18.9357904 33.8,20.353376 C33.811544,21.7725108 33.2872104,23.1952877 32.2266806,24.2917914 L32.2266806,24.2917914 L31.7206,24.8006729 L32.159798,25.240202 C33.253266,26.33367 33.8,27.766835 33.8,29.2 C33.8,30.633165 33.253266,32.06633 32.159798,33.159798 C31.0781881,34.2414078 29.6642096,34.7880833 28.246624,34.8 C26.8274892,34.811544 25.4047123,34.2872104 24.3082086,33.2266806 L24.3082086,33.2266806 L23.7993271,32.7206 L23.359798,33.159798 C22.26633,34.253266 20.833165,34.8 19.4,34.8 C17.966835,34.8 16.53367,34.253266 15.440202,33.159798 C14.3585922,32.0781881 13.8119167,30.6642096 13.8,29.246624 C13.788456,27.8274892 14.3127896,26.4047123 15.3733194,25.3082086 L15.3733194,25.3082086 L15.8794,24.7993271 L15.440202,24.359798 C14.346734,23.26633 13.8,21.833165 13.8,20.4 C13.8,18.966835 14.346734,17.53367 15.440202,16.440202 C16.5218119,15.3585922 17.9357904,14.8119167 19.353376,14.8 C20.7725108,14.788456 22.1952877,15.3127896 23.2917914,16.3733194 L23.2917914,16.3733194 L23.8006729,16.8794 L24.240202,16.440202 C25.33367,15.346734 26.766835,14.8 28.2,14.8 Z" />
+    </mask>
+    <mask id="positive-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M29.7294207,16.9922805 C31.1625744,16.9866282 32.5979013,17.5276612 33.6957071,18.6167741 C34.7816077,19.6940761 35.3338993,21.1058704 35.351258,22.5233982 C35.3686336,23.9423122 34.8500808,25.3669976 33.7941627,26.4676563 L33.7941627,26.4676563 L27.1794488,33.1363075 C26.0960963,34.2283069 24.675298,34.7802389 23.2508341,34.7920857 C21.8249459,34.8039445 20.3953569,34.27469 19.296927,33.2041927 L19.296927,33.2041927 L15.7761737,29.656491 C14.6870608,28.5586851 14.1460279,27.1233582 14.1516801,25.6902046 C14.1574213,24.2570509 14.7098478,22.8260705 15.8076536,21.7369576 C16.7544861,20.7976225 17.9523748,20.2659173 19.1834383,20.1411672 C20.4372495,20.0141119 21.7255226,20.3088158 22.8178242,21.0249737 L22.8178242,21.0249737 L23.1781395,21.2667759 L25.7761737,18.648254 C26.8652867,17.5504481 28.2962671,16.9980217 29.7294207,16.9922805 Z" />
+    </mask>
+    <mask id="warning-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M23.8,14.8 C25.6808284,14.8 27.5616567,15.7284418 28.6412402,17.5853254 L28.6412402,17.5853254 L33.6412402,26.1853254 C34.1656792,27.0873604 34.4068747,28.0446245 34.409009,28.9780654 C34.4112621,29.9762222 34.1406828,30.9466974 33.6539766,31.7926531 C33.1672704,32.6386087 32.4642862,33.3603071 31.600233,33.8600412 C30.7922009,34.3273748 29.8434094,34.6 28.8,34.6 L28.8,34.6 L18.8,34.6 C17.7565906,34.6 16.8077991,34.3273748 15.999767,33.8600412 C15.1357138,33.3603071 14.4327296,32.6386087 13.9460234,31.7926531 C13.4593172,30.9466974 13.1887379,29.9762222 13.190991,28.9780654 C13.1931253,28.0446245 13.4343208,27.0873604 13.9587598,26.1853254 L13.9587598,26.1853254 L18.9587598,17.5853254 C20.0383433,15.7284418 21.9191716,14.8 23.8,14.8 Z" />
+    </mask>
+
+    <polygon id="active" fill="none" stroke="#029CFD" stroke-linejoin="round" stroke-width="2.8"
+      points="25 21 30 29.6 20 29.6" transform="rotate(90 25 25.3)" />
+    <circle id="critical" fill="none" cx="23.9" cy="24.9" r="4.7" stroke="#000" stroke-linejoin="round"
+      stroke-width="2.8" />
+    <path id="negative" fill="none" stroke="#F40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.8"
+      d="M19.4,20.4 L28.2,29.2 M28.2,20.4 L19.4,29.2" />
+    <polyline id="positive" fill="none" stroke="#66BF3C" stroke-linecap="round" stroke-linejoin="round"
+      stroke-width="2.8" points="19.752 25.712 23.204 29.192 29.752 22.592" />
+    <polygon id="warning" fill="none" stroke="#FFAE00" stroke-linejoin="round" stroke-width="2.8"
+      points="23.8 20.4 28.8 29 18.8 29" />
+  </defs>
+
+  <g id="mask">
+    <use id="icon" />
+  </g>
+  <use id="status" />
+</svg>

package/dist/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#FF4785" fill-rule="nonzero" d="M3.19456517,29.5523576 L2.20116517,3.08035756 C2.16820317,2.206041 2.83853396,1.46497625 3.71176517,1.41035756 L26.2285652,0.00315756388 C26.6728415,-0.0246745074 27.1088544,0.132425741 27.4332785,0.437229126 C27.7577026,0.74203251 27.9415652,1.16741027 27.9415652,1.61255756 L27.9415652,30.4585576 C27.9415652,30.8987416 27.7615266,31.3197739 27.4433606,31.6239653 C27.1251947,31.9281568 26.6965078,32.0890657 26.2567652,32.0693576 L4.73376517,31.1027576 C3.89549138,31.0651477 3.22618762,30.3908861 3.19476517,29.5523576 L3.19456517,29.5523576 Z"/><path fill="#FFF" d="M24.4581652,0.113957564 L21.3591652,0.307557564 L21.2081652,3.94195756 C21.2043927,4.0349625 21.2546048,4.1217998 21.3370927,4.16492627 C21.4195807,4.20805273 21.5195442,4.19973049 21.5937652,4.14355756 L23.0057652,3.07275756 L24.1981652,4.01215756 C24.2717133,4.07021898 24.3722957,4.08025391 24.4558654,4.03786787 C24.539435,3.99548183 24.5907604,3.90840015 24.5873652,3.81475756 L24.4581652,0.113757564 L24.4581652,0.113957564 Z M22.0463652,12.2851576 C21.4791652,12.7257576 17.2533652,13.0265576 17.2533652,12.3991576 C17.3427652,10.0053576 16.2709652,9.90035756 15.6755652,9.90035756 C15.1099652,9.90035756 14.1575652,10.0713576 14.1575652,11.3537576 C14.1575652,12.6605576 15.5495652,13.3983576 17.1835652,14.2643576 C19.5049652,15.4943576 22.3143652,16.9831576 22.3143652,20.7295576 C22.3143652,24.3201576 19.3967652,26.3037576 15.6755652,26.3037576 C11.8353652,26.3037576 8.47936517,24.7499576 8.85836517,19.3633576 C9.00716517,18.7307576 13.8895652,18.8811576 13.8895652,19.3633576 C13.8299652,21.5861576 14.3359652,22.2399576 15.6161652,22.2399576 C16.5985652,22.2399576 17.0449652,21.6983576 17.0449652,20.7865576 C17.0449652,19.4065576 15.5945652,18.5919576 13.9259652,17.6551576 C11.6665652,16.3865576 9.00716517,14.8935576 9.00716517,11.4679576 C9.00716517,8.04835756 11.3591652,5.76855756 15.5565652,5.76855756 C19.7541652,5.76855756 22.0463652,8.01335756 22.0463652,12.2853576 L22.0463652,12.2851576 Z"/></g></svg>