lutra 0.0.12 → 0.0.15

package/dist/form/FieldSection.svelte

@@ -1,4 +1,4 @@
-<script>import H5 from "../typo/H5.svelte";
+<script lang="ts">import H5 from "../typo/H5.svelte";
 import P from "../typo/P.svelte";
 let {
   title,
@@ -7,7 +7,7 @@ let {
 } = $props();
 </script>
 
-<div class="FieldSection">
+<div class="FieldSection" class:noTitle={!!title && !!description}>
     {#if title || description}
         <div class="FieldSectionTitle">
             {#if title}
@@ -35,63 +35,38 @@ let {
     .FieldSection {
         padding: 0;
         display: grid;
-        gap: 0rem;
-        grid-template-columns: 1fr;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        padding: calc(var(--fcc) * 3em);
     }
-    .FieldSection .FieldSectionTitle {
+    .FieldSectionTitle {
         display: flex;
         flex-direction: column;
         background-color: var(--base);
-        gap: 0.25rem;
-        padding: 1em 1.5em;
-        border-bottom: var(--border);
+        gap: 1.25em;
+        text-wrap: balance;
     }
     .FieldSection:not(:first-child) {
         border-top: calc(var(--fcc) * var(--border-size)) var(--border-style) var(--border-color);
     }
-    .FieldSection .FieldSectionFields {
-        padding: calc(var(--padding, 1.5em) * var(--fcc));
+    .FieldSectionFields {
         display: grid;
-        gap: 1.5rem;
+        gap: var(--gap, 1.5em);
     }
-    @container (min-width: 600px) {
-        .FieldSection {
-            gap: 3rem;
-            padding: 2rem;
-            grid-template-columns: 1fr;
-            border-bottom: 1px dotted var(--border-light);
-            margin-bottom: 3rem;
-            border-radius: 0;
-        }
-        .FieldSection:has(.FieldSectionTitle) {
-            grid-template-columns: minmax(180px, 1fr) 3fr;
-        }
-        .FieldSection:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-        }
-        .FieldSection:not(:first-child) {
-            border-top: 0;
-            padding-top: 0;
-        }
-        .FieldSection .FieldSectionTitle {
-            gap: 1rem;
-            padding: 0;
-            background-color: transparent;
-            border-bottom: none;
-        }
-        .FieldSection .FieldSectionFields {
-            padding: 0;
-        }
+    .FieldSection.noTitle .FieldSectionFields {
+        grid-column: 1 / -1;
     }
-    @container (min-width: 1024px) {
+    @container (max-width: 640px) {
         .FieldSection {
-            grid-template-columns: minmax(300px, 1fr) 3fr;
-            padding: 3rem;
+            padding: 2em;
+        }
+        .FieldSectionTitle {
+            gap: 0.5em;
+            padding-block-end: 1.5em;
         }
-        .FieldSection:not(:first-child) {
-            border-top: 0;
-            padding-top: 0;
+        .FieldSectionTitle,
+        .FieldSectionFields {
+            grid-column: 1 / -1;
         }
     }
 </style>

package/dist/form/Fieldset.svelte

@@ -1,4 +1,5 @@
-<script>let {
+<script lang="ts">let {
+  fullWidth,
   description,
   contained,
   rounded,
@@ -13,7 +14,7 @@ let smColumns = columnsArray[2] || mdColumns;
 </script>
 
 <div class="FieldsetContainer">
-    <fieldset class:rounded class:contained class="cols-{columns}" style="--lg-cols: {lgColumns}; --md-cols: {mdColumns}; --sm-cols: {smColumns}">
+    <fieldset class:fullWidth class:rounded class:contained class="cols-{columns}" style="--lg-cols: {lgColumns}; --md-cols: {mdColumns}; --sm-cols: {smColumns}">
         {#if legend}
             <legend>
                 {#if typeof legend === 'string'}
@@ -40,15 +41,19 @@ let smColumns = columnsArray[2] || mdColumns;
     }
     fieldset {
         display: grid;
+        width: var(--width, fit-content);
         grid-template-columns: repeat(var(--lg-cols), 1fr);
-        gap: 1rem;
+        gap: var(--gap, 1.5em);
     }
     legend {
-        margin-bottom: 1.5rem;
+        font-weight: 500;
         font-size: var(--font-size, 1em);
     }
     fieldset.contained {
-        padding: 2rem;
+        padding: 1.5em;
+    }
+    fieldset.fullWidth {
+        width: 100%;
     }
     @container(max-width: 960px) {
         fieldset {

package/dist/form/Fieldset.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
 declare const __propDef: {
     props: {
+        /** Whether the fieldset should be full width. */
+        fullWidth?: boolean | undefined;
         /** The description of the fieldset. */
         description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";

package/dist/form/Form.svelte

@@ -1,4 +1,4 @@
-<script>import { enhance } from "$app/forms";
+<script lang="ts">import { enhance } from "$app/forms";
 import UiContent from "../layout/UIContent.svelte";
 import { Bodyguard } from "@auth70/bodyguard";
 import { onMount, setContext } from "svelte";
@@ -16,26 +16,30 @@ let {
 } = $props();
 setContext("form", form);
 setContext("form.validators", getIndividualValidators(form));
-const schema = dezerialize(form.schema);
+const schema = form?.schema ? dezerialize(form?.schema) : null;
 const bodyguard = new Bodyguard();
 let formEl;
 function setFormIssuesAndFields(issues, fields) {
-  form.issues = issues;
-  form.fields = fields;
+  if (form) {
+    form.issues = issues;
+    form.fields = fields;
+  }
 }
 async function validate() {
-  form.tainted = true;
-  const req = new Request("localhost", {
-    method: "POST",
-    body: new FormData(formEl)
-  });
-  const result = await bodyguard.softForm(req, schema.parse);
-  if (result.success === true) {
-    form.valid = true;
-    form.issues = [];
-  } else {
-    form.valid = false;
-    form.issues = parseFormIssues(result.error.issues);
+  if (form && schema) {
+    form.tainted = true;
+    const req = new Request("localhost", {
+      method: "POST",
+      body: new FormData(formEl)
+    });
+    const result = await bodyguard.softForm(req, schema.parse);
+    if (result.success === true) {
+      form.valid = true;
+      form.issues = [];
+    } else {
+      form.valid = false;
+      form.issues = parseFormIssues(result.error.issues);
+    }
   }
 }
 onMount(() => {
@@ -61,19 +65,20 @@ onMount(() => {
                 // `result` is an `ActionResult` object
                 // `update` is a function which triggers the default logic that would be triggered if this callback wasn't set
                 console.log('result', result);
-                const resultForm = result?.data?.form;
+                const resultForm = result.type !== "redirect" && result.type !== "error" ? result?.data?.form : null;
                 if(result.type === "success") {
-                    if(resultForm) {
-                        form.valid = resultForm.valid;
-                    }
-                } else if(result.type === "error") {
-                    if(resultForm) {
-                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    if(resultForm && form) {
+                        form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
                     }
                 } else if(result.type === "failure") {
-                    if(resultForm) {
-                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    if(resultForm && form) {
+                        setFormIssuesAndFields(
+                            Object.assign({ issues: [] }, resultForm).issues, // Have to assign to avoid type error as we cant use `as` here
+                            Object.assign({ fields: [] }, resultForm).fields,
+                        );
                     }
+                } else if(result.type === "error") {
+                    console.error('[lutra] Error from form enhance call', result.error);
                 } else if(result.type === "redirect") {
                     window.location.href = result.location;
                 }

package/dist/form/Form.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Snippet } from "svelte";
 import type { Form } from "./types.js";
 declare const __propDef: {
     props: {
-        form: Form<any>;
+        form?: Form<any> | undefined;
         action?: string | undefined;
         enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
         method?: "GET" | "POST" | undefined;

package/dist/form/Input.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from "svelte";
+<script lang="ts">import { getContext } from "svelte";
 import { createId } from "../utils/id.js";
 import Copy from "../icons/Copy.svelte";
 import Done from "../icons/Done.svelte";
@@ -13,6 +13,7 @@ import { ZodType } from "zod";
 import FieldContent from "./FieldContent.svelte";
 let {
   alt,
+  attrs,
   autocapitalize,
   autocomplete,
   autocorrect,
@@ -53,6 +54,7 @@ let {
   required,
   results,
   shape = "rounded",
+  size,
   src,
   step,
   tabindex,
@@ -69,7 +71,7 @@ let copyTooltipOpen = $state(false);
 let copyBtnIcon = $state(Copy);
 let viewBtnIcon = $state(Show);
 const form = getContext("form");
-const field = $derived(form.fields[name]);
+const field = $derived(form?.fields[name]);
 const issue = $derived(form?.issues?.find((issue2) => issue2.name === name));
 const validator = getContext("form.validators")?.[name];
 const data = form?.data;
@@ -115,6 +117,7 @@ function copy(e) {
 <input
     bind:this={el}
     {alt}
+    {...attrs}
     autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
     {autocomplete}
     autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
@@ -146,12 +149,13 @@ function copy(e) {
     {readonly}
     required={required || field?.required}
     {results}
+    {size}
     {src}
     {step}
     {tabindex}
     {title}
     {type}
-    value={value || getFromObjWithStringPath(Object.assign(originalData, data), name) || form?.fields?.[name]?.defaultValue || ''}
+    value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
     {webkitdirectory}
 />
 {/snippet}
@@ -160,55 +164,32 @@ function copy(e) {
     {id}
     {label}
     {labelTip}
+    contained={type === "checkbox" || type === "radio" ? false : true}
     direction={(type === "checkbox" || type === "radio") ? 'row' : 'column'}
     {field}
     {issue}
+    {prefix}
+    {suffix}
 >
 
     {#if type === "checkbox" || type === "radio"}
         {@render input()}
     {:else}
 
-        <div
-            class="Field {type}"
-            class:hasPrefix={!!prefix}
-            class:hasSuffix={!!suffix}
-            class:invalid={field?.tainted && issue?.code}
-        >
-            {#if prefix}
-                <div class="Fix Prefix">
-                    {#if typeof prefix === 'string'}
-                        {prefix}
-                    {:else}
-                        {@render prefix()}
-                    {/if}
-                </div>
-            {/if}
-
-            {@render input()}
+        {@render input()}
 
-            {#if copyable}
-                <Tooltip tip={copyTitle} open={copyTooltipOpen}>
-                    <IconButton icon={copyBtnIcon} onclick={copy} disabled={copyTooltipOpen} />
-                </Tooltip>
-            {/if}
-        
-            {#if type === "password" && viewable}
-                <Tooltip tip={viewTitle}>
-                    <IconButton icon={viewBtnIcon} onclick={view} />
-                </Tooltip>
-            {/if}
+        {#if copyable}
+            <Tooltip tip={copyTitle} open={copyTooltipOpen}>
+                <IconButton icon={copyBtnIcon} onclick={copy} disabled={copyTooltipOpen} />
+            </Tooltip>
+        {/if}
+    
+        {#if type === "password" && viewable}
+            <Tooltip tip={viewTitle}>
+                <IconButton icon={viewBtnIcon} onclick={view} />
+            </Tooltip>
+        {/if}
 
-            {#if suffix}
-                <div class="Fix Suffix">
-                    {#if typeof suffix === 'string'}
-                        {suffix}
-                    {:else}
-                        {@render suffix()}
-                    {/if}
-                </div>
-            {/if}
-        </div>
     {/if}
 </FieldContent>
 
@@ -237,7 +218,7 @@ function copy(e) {
     .Fix {
         display: flex;
         align-items: center;
-        padding-inline: 0.75em;
+        padding-inline: 0.65em;
         font-size: 1em;
         line-height: 1.5;
         color: var(--text-subtle);

package/dist/form/Input.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** alt attribute for the image type. Required for accessibility */
         alt?: string | undefined;
+        /** Additional attributes to add to the input element. */
+        attrs?: Record<string, string> | undefined;
         /** Whether the input should be autocapitalized. */
         autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
         /** Specifies whether autocomplete is enabled for the input. */
@@ -95,6 +97,8 @@ declare const __propDef: {
         results?: number | undefined;
         /** The shape of the input element. */
         shape?: "default" | "circle" | "rounded" | "pill" | undefined;
+        /** The size of the input element. */
+        size?: number | undefined;
         /** Source URL for the image type. */
         src?: string | undefined;
         /** Spellcheck the input. */
@@ -117,7 +121,7 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {}; /** Onclick event handler */
+    slots: {};
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;

package/dist/form/InputLength.svelte

@@ -1,4 +1,4 @@
-<script>let {
+<script lang="ts">let {
   value,
   maxlength
 } = $props();

package/dist/form/Label.svelte

@@ -1,4 +1,4 @@
-<script>import ContextTip from "../display/ContextTip.svelte";
+<script lang="ts">import ContextTip from "../display/ContextTip.svelte";
 let {
   id,
   label,
@@ -22,5 +22,6 @@ let {
 <style>
     label {
         cursor: var(--cursor, default);
+        text-wrap: balance;
     }
 </style>

package/dist/form/Select.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from "svelte";
+<script lang="ts">import { getContext } from "svelte";
 import Label from "./Label.svelte";
 import { createId } from "../utils/id.js";
 import Copy from "../icons/Copy.svelte";
@@ -13,27 +13,14 @@ import { getFromObjWithStringPath } from "./form.js";
 import { ZodType } from "zod";
 import FieldContent from "./FieldContent.svelte";
 let {
-  alt,
-  checked,
+  attrs,
   children,
-  contained,
-  defaultValue,
-  dirname,
   disabled,
   help,
   id = $bindable(createId()),
   label,
   labelTip,
-  list,
-  maxlength,
-  minlength,
-  max,
-  min,
-  multiple,
   name,
-  pattern,
-  placeholder,
-  suffix,
   onblur,
   onchange,
   onclick,
@@ -42,23 +29,16 @@ let {
   onkeyup,
   onkeypress,
   options,
-  prefix,
-  readonly,
+  placeholder,
   required,
   results,
-  shape = "rounded",
-  src,
+  shape = "default",
   tabindex,
   value = $bindable()
 } = $props();
 let el = $state();
-let copyTitle = $state("Copy");
-let viewTitle = $state("Show");
-let copyTooltipOpen = $state(false);
-let copyBtnIcon = $state(Copy);
-let viewBtnIcon = $state(Show);
 const form = getContext("form");
-const field = $derived(form.fields[name]);
+const field = $derived(form?.fields[name]);
 const issue = $derived(form?.issues?.find((issue2) => issue2.name === name));
 const validator = getContext("form.validators")?.[name];
 const data = form?.data;
@@ -74,6 +54,7 @@ const originalData = form?.originalData;
 >
     <select
         bind:this={el}
+        {...attrs}
         {disabled}
         {id}
         {name}
@@ -88,7 +69,7 @@ const originalData = form?.originalData;
         required={required || field?.required}
         {results}
         {tabindex}
-        value={value || getFromObjWithStringPath(Object.assign(originalData, data), name) || form?.fields?.[name]?.defaultValue || ''}
+        value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
     >
         {#if children}
             {@render children()}

package/dist/form/Select.svelte.d.ts

@@ -1,20 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        /** alt attribute for the image type. Required for accessibility */
-        alt?: string | undefined;
-        /** Whether the input should be checked. */
-        checked?: boolean | undefined;
+        /** Additional attributes to add to the input element. */
+        attrs?: Record<string, string> | undefined;
         /** Options for the select element. */
         children?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Whether the input should be contained. */
-        contained?: boolean | undefined;
-        /** The default value of the input element. */
-        defaultValue?: string | undefined;
-        /** Form field name for the directionality of the element's text content during form submission */
-        dirname?: string | undefined;
         /** Whether the input should be disabled. */
         disabled?: boolean | undefined;
         /** Help text to display below the input. */
@@ -31,18 +23,6 @@ declare const __propDef: {
         labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** The id of a datalist element that contains pre-defined options for the input element. */
-        list?: string | undefined;
-        /** The maximum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
-        maxlength?: number | undefined;
-        /** The minimum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
-        minlength?: number | undefined;
-        /** The maximum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
-        max?: number | undefined;
-        /** The minimum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
-        min?: number | undefined;
-        /** Whether the input should allow multiple values. Valid for email and file inputs. */
-        multiple?: boolean | undefined;
         /** The name of the input element. */
         name: string;
         /** The onblur event handler */
@@ -64,8 +44,6 @@ declare const __propDef: {
             value: string;
             label: string;
         }[] | undefined;
-        /** A regular expression that the input's value is checked against. Valid for text, search, url, tel, email, and password. */
-        pattern?: string | undefined;
         /** Placeholder text to display when the input is empty. */
         placeholder?: string | undefined;
         /** Suffix content, to display after the input. */
@@ -76,8 +54,6 @@ declare const __propDef: {
         prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        /** Whether the input should be read-only. */
-        readonly?: boolean | undefined;
         /** Whether the input should be required. */
         required?: boolean | undefined;
         /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */

package/dist/form/client.svelte.js

@@ -51,11 +51,13 @@ export function fieldValidate(form, name, el, validator) {
 export function fieldKeydown(form, name, el, validator, onkeydown) {
     return async function (e) {
         setTimeout(() => {
-            const possibleKey = e?.key;
-            if (ignoreKeys.includes(possibleKey))
-                return;
-            form.data[name] = el()?.value || '';
-            fieldValidate(form, name, el(), validator);
+            if (form) {
+                const possibleKey = e?.key;
+                if (ignoreKeys.includes(possibleKey))
+                    return;
+                form.data[name] = el()?.value || '';
+                fieldValidate(form, name, el(), validator);
+            }
         }, 0); // Wait for the key to be updated in the input.
         if (onkeydown)
             return onkeydown(e);
@@ -72,10 +74,12 @@ export function fieldKeydown(form, name, el, validator, onkeydown) {
  */
 export function fieldChange(form, name, el, validator, onchange) {
     return async function (e) {
-        console.log('fieldChange', name, el()?.value, validator);
-        form.data[name] = el()?.value || '';
-        form.fields[name].tainted = true;
-        fieldValidate(form, name, el(), validator);
+        if (form) {
+            console.log('fieldChange', name, el()?.value, validator);
+            form.data[name] = el()?.value || '';
+            form.fields[name].tainted = true;
+            fieldValidate(form, name, el(), validator);
+        }
         if (onchange)
             return onchange(e);
     };

package/dist/form/form.d.ts

@@ -49,4 +49,4 @@ export declare function getFromObjWithStringPath(obj: any, path: string): string
  * @param {Form} form - The form to get the validators from.
  * @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
  */
-export declare function getIndividualValidators<T extends ZodTypes>(form: Form<T>): Record<keyof Infer<T>, (value: any) => boolean>;
+export declare function getIndividualValidators<T extends ZodTypes>(form?: Form<T>): Record<keyof Infer<T>, (value: any) => boolean>;

package/dist/form/form.js

@@ -246,6 +246,8 @@ export function arrayPathToStringPath(path) {
  * @returns {string | number | Date | boolean | object | undefined} - The value from the object.
  */
 export function getFromObjWithStringPath(obj, path) {
+    if (!obj)
+        return undefined;
     const parts = path.split('.');
     let current = obj;
     for (let i = 0; i < parts.length; i++) {
@@ -301,6 +303,8 @@ export function getFromObjWithStringPath(obj, path) {
  * @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
  */
 export function getIndividualValidators(form) {
+    if (!form)
+        return {};
     const schema = form.schema;
     const fields = form.fields;
     if (!schema || !fields) {

package/dist/grid/Column.svelte

@@ -1,4 +1,4 @@
-<script>import { setContext } from "svelte";
+<script lang="ts">import { setContext } from "svelte";
 let { children } = $props();
 </script>
 

package/dist/grid/Grid.svelte

@@ -1,4 +1,4 @@
-<script>import { setContext } from "svelte";
+<script lang="ts">import { setContext } from "svelte";
 let {
   children,
   fullWidth = false

package/dist/grid/Row.svelte

@@ -1,4 +1,4 @@
-<script>import { setContext } from "svelte";
+<script lang="ts">import { setContext } from "svelte";
 let {
   children,
   span = 12

package/dist/icons/Alert.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0,0,256,256">
-    <g fill="currentColor" transform="translate(7.98665,7.9375) scale(16,16)"><path d="M7.5,1.00781c-0.54297,0 -1.08594,0.25781 -1.39453,0.77344l-5.87891,9.82422c-0.625,1.03906 0.17578,2.39453 1.39063,2.39453h11.76172c1.21875,0 2.01953,-1.35547 1.39844,-2.39453l-5.88281,-9.82422c-0.30859,-0.51562 -0.85156,-0.77344 -1.39453,-0.77344zM7.5,1.99219c0.20703,0 0.41406,0.10156 0.53906,0.30469l5.87891,9.82031c0.24609,0.41016 -0.02734,0.88281 -0.53906,0.88281h-11.76172c-0.50781,0 -0.78125,-0.47266 -0.53516,-0.88281l5.87891,-9.82031c0.125,-0.20312 0.33203,-0.30469 0.53906,-0.30469zM6.99219,5v5h1v-5zM6.99219,11v1h1v-1z"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M7.999,1.063C7.419,1.063 6.84,1.339 6.51,1.889L0.232,12.38C-0.435,13.489 0.42,14.937 1.717,14.937L14.277,14.937C15.578,14.937 16.433,13.489 15.77,12.38L9.488,1.889C9.159,1.339 8.579,1.063 7.999,1.063ZM7.999,2.114C8.22,2.114 8.441,2.223 8.575,2.44L14.852,12.926C15.115,13.364 14.823,13.869 14.277,13.869L1.717,13.869C1.175,13.869 0.883,13.364 1.146,12.926L7.423,2.44C7.557,2.223 7.778,2.114 7.999,2.114ZM7.457,11.733L7.457,12.801L8.525,12.801L8.525,11.733L7.457,11.733ZM7.457,5.326L7.457,10.665L8.525,10.665L8.525,5.326L7.457,5.326Z" />
 </svg>