@verbb/formie-browser 1.0.0

package/src/css/theme/fields/_table.css

@@ -0,0 +1,121 @@
+@layer formie-theme {
+
+    .formie-table-wrapper {
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .formie-table {
+        width: var(--formie-table-width);
+        margin-bottom: var(--formie-table-margin-bottom);
+        border-collapse: var(--formie-table-border-collapse);
+    }
+
+    .formie-table th {
+        text-align: var(--formie-table-th-text-align);
+        font-size: var(--formie-table-th-font-size);
+        font-weight: var(--formie-table-th-font-weight);
+        color: var(--formie-table-th-color, var(--formie-gray-500));
+    }
+
+    .formie-table th,
+    .formie-table td {
+        padding: var(--formie-table-row-padding);
+        vertical-align: top;
+    }
+
+    .formie-table th:first-child,
+    .formie-table td:first-child {
+        padding-left: 0;
+    }
+
+    .formie-table th:last-child,
+    .formie-table td:last-child {
+        padding-right: 0;
+    }
+
+    .formie-table [data-col-remove] {
+        width: calc(var(--formie-button-icon-button-size) + (var(--formie-table-row-padding) * 2));
+        min-width: calc(var(--formie-button-icon-button-size) + (var(--formie-table-row-padding) * 2));
+        white-space: nowrap;
+        text-align: center;
+        vertical-align: middle;
+    }
+
+    .formie-table [data-formie-table-column-type="checkbox"] {
+        text-align: center;
+        vertical-align: middle;
+    }
+
+    .formie-table [data-formie-table-column-type="checkbox"] .formie-checkbox-option {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: var(--formie-check-size);
+        margin: 0;
+    }
+
+    .formie-table [data-formie-table-column-type="checkbox"] .formie-checkbox-option-label {
+        display: block;
+        width: var(--formie-check-size);
+        min-width: var(--formie-check-size);
+        height: var(--formie-check-size);
+        margin: 0 auto;
+        padding-left: 0;
+        font-size: 0;
+        line-height: 0;
+    }
+
+    .formie-table [data-formie-table-column-type="checkbox"] .formie-checkbox-option-label::before {
+        position: static;
+    }
+
+    .formie-table-color-input {
+        min-width: 4rem;
+        padding: var(--formie-space-1);
+    }
+
+    .formie-table-multiline-input {
+        min-height: calc(var(--formie-control-height) + var(--formie-space-2));
+    }
+
+    .formie-table-remove-button {
+        display: inline-flex;
+        vertical-align: middle;
+    }
+
+    .formie-button.formie-table-add-button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        max-width: 100%;
+        justify-self: start;
+        padding-left: var(--formie-table-add-button-padding-left);
+    }
+
+    .formie-button.formie-table-add-button::before {
+        position: absolute;
+        content: "";
+        display: block;
+        width: var(--formie-table-add-button-width);
+        height: var(--formie-table-add-button-height);
+        left: var(--formie-table-add-button-left);
+        top: 50%;
+        transform: translate(0, -50%);
+        background-color: currentColor;
+        -webkit-mask-image: var(--formie-table-add-button-icon-mask);
+        mask-image: var(--formie-table-add-button-icon-mask);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+    }
+
+}

package/src/css/theme/fields/_text-limit.css

@@ -0,0 +1,10 @@
+@layer formie-theme {
+    .formie-limit-number {
+        font-weight: var(--formie-font-weight-semibold);
+        color: var(--formie-color-text);
+    }
+
+    .formie-limit-number-error {
+        color: var(--formie-color-danger);
+    }
+}

package/src/css/theme/forms/_field.css

@@ -0,0 +1,62 @@
+@layer formie-theme {
+    .formie-field-options {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--formie-gap-options);
+    }
+
+    .formie-field {
+        display: grid;
+        gap: var(--formie-gap-field);
+    }
+
+    .formie-field-layout {
+        display: grid;
+        gap: var(--formie-gap-field-layout);
+    }
+
+    .formie-field-layout[data-formie-label-position="left"] {
+        grid-template-columns: fit-content(12rem) minmax(0, 1fr);
+        align-items: start;
+    }
+
+    .formie-field-layout[data-formie-label-position="right"] {
+        grid-template-columns: minmax(0, 1fr) fit-content(12rem);
+        align-items: start;
+    }
+
+    .formie-field-layout[data-formie-label-position="left"] > label.formie-field-label,
+    .formie-field-layout[data-formie-label-position="right"] > label.formie-field-label {
+        display: block;
+        min-inline-size: 0;
+        max-inline-size: 100%;
+        align-self: center;
+    }
+
+    .formie-field-content {
+        display: grid;
+        gap: var(--formie-gap-field-content);
+        min-inline-size: 0;
+    }
+
+    .formie-field-control {
+        display: grid;
+        gap: var(--formie-gap-field-control);
+    }
+
+    .formie-layout-horizontal {
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    .formie-layout-vertical {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .formie-field-option {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--formie-gap-options);
+    }
+}

package/src/css/theme/forms/_form.css

@@ -0,0 +1,166 @@
+@layer formie-theme {
+    .formie-form {
+        display: grid;
+        gap: var(--formie-gap-form);
+    }
+
+    .formie-form-header {
+        display: grid;
+        gap: var(--formie-gap-form-header);
+    }
+
+    .formie-form-messages {
+        display: grid;
+        gap: var(--formie-gap-form-messages);
+    }
+
+    .formie-form-messages[data-formie-form-messages-bottom]:not(:empty) {
+        padding-top: var(--formie-space-4);
+    }
+
+    .formie-form-navigation {
+        display: grid;
+        gap: var(--formie-gap-form-navigation);
+    }
+
+    .formie-form-body {
+        display: grid;
+        gap: var(--formie-gap-form-body);
+    }
+
+    .formie-form-footer {
+        display: grid;
+        gap: var(--formie-gap-form-footer);
+    }
+
+    .formie-pages {
+        display: grid;
+        gap: var(--formie-gap-pages);
+    }
+
+    .formie-page {
+        display: grid;
+        gap: var(--formie-gap-page);
+    }
+
+    .formie-page-container {
+        display: grid;
+        gap: var(--formie-gap-page-container);
+    }
+
+    .formie-page-header {
+        display: grid;
+        gap: var(--formie-gap-page-header);
+    }
+
+    .formie-page-body {
+        display: grid;
+        gap: var(--formie-gap-page-body);
+    }
+
+    .formie-page-footer {
+        display: grid;
+        gap: var(--formie-gap-page-footer);
+    }
+
+    .formie-page-buttons {
+        display: grid;
+        gap: var(--formie-gap-page-buttons);
+    }
+
+    .formie-rows {
+        display: grid;
+        gap: var(--formie-gap-rows);
+    }
+
+    .formie-row {
+        display: grid;
+        gap: var(--formie-gap-row);
+        grid-template-columns: minmax(0, 1fr);
+        align-items: start;
+    }
+
+    /* Collapse row wrappers once every field inside them is hidden. */
+    .formie-row:not(:has(> [data-formie-field]:not([data-formie-conditionally-hidden], [data-formie-page-hidden], [data-formie-row-hidden], [hidden]))),
+    .formie-subfield-row:not(:has(> [data-formie-field]:not([data-formie-conditionally-hidden], [data-formie-page-hidden], [data-formie-row-hidden], [hidden]))),
+    .formie-nested-field-row:not(:has(> [data-formie-field]:not([data-formie-conditionally-hidden], [data-formie-page-hidden], [data-formie-row-hidden], [hidden]))) {
+        display: none;
+    }
+
+    @media (min-width: 40rem) {
+        .formie-row[data-formie-field-count="2"] {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+    }
+
+    @media (min-width: 56rem) {
+        .formie-row[data-formie-field-count="3"] {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+
+        .formie-row[data-formie-field-count="4"] {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+    }
+
+    .formie-errors {
+        display: grid;
+        gap: var(--formie-gap-errors);
+    }
+
+    .formie-successes {
+        display: grid;
+        gap: var(--formie-gap-errors);
+    }
+
+    .formie-field-errors {
+        display: grid;
+        gap: var(--formie-gap-field-errors);
+    }
+
+    .formie-page-tabs {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0 0 var(--formie-gap-tabs);
+        gap: 0;
+        border-bottom: var(--formie-border-width) solid var(--formie-color-border);
+        font-size: var(--formie-tab-font-size);
+    }
+
+    .formie-tab {
+        margin-bottom: calc(-1 * var(--formie-border-width));
+        color: var(--formie-color-text-muted);
+        border: var(--formie-border-width) solid transparent;
+    }
+
+    .formie-tab-link {
+        display: block;
+        padding: var(--formie-tab-padding-y) var(--formie-tab-padding-x);
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .formie-tab-link:hover {
+        color: var(--formie-color-heading);
+        text-decoration: none;
+    }
+
+    .formie-tab-current {
+        color: var(--formie-color-heading);
+        background: var(--formie-color-surface);
+        border-color: var(--formie-color-border);
+        border-bottom-color: var(--formie-color-surface);
+        border-radius: var(--formie-radius-sm) var(--formie-radius-sm) 0 0;
+        font-weight: var(--formie-font-weight-medium);
+    }
+
+    .formie-tab-error {
+        color: var(--formie-color-danger);
+    }
+
+    .formie-tab-error .formie-tab-link:hover,
+    .formie-tab-error.formie-tab-current .formie-tab-link,
+    .formie-tab-error.formie-tab-current .formie-tab-link:hover {
+        color: var(--formie-color-danger);
+    }
+}

package/src/css/theme/integrations/_payment-modal.css

@@ -0,0 +1,32 @@
+@layer formie-theme {
+
+    /* 3DS / payment challenge overlay (e.g. Opayo) */
+    .formie-modal {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .formie-modal-backdrop {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        cursor: pointer;
+    }
+
+    .formie-modal-content {
+        position: relative;
+        width: 100%;
+        max-width: 480px;
+        height: 400px;
+        margin: 1rem;
+        background: #fff;
+        border-radius: 0.5rem;
+        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        overflow: hidden;
+        z-index: 1;
+    }
+}

package/src/css/theme/integrations/_paypal.css

@@ -0,0 +1,10 @@
+@layer formie-theme {
+    .formie-paypal-button {
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface);
+        box-sizing: border-box;
+        min-height: var(--formie-control-height);
+        padding: var(--formie-space-2);
+    }
+}

package/src/css/theme/integrations/_payway.css

@@ -0,0 +1,10 @@
+@layer formie-theme {
+    .formie-payway-button {
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface);
+        box-sizing: border-box;
+        min-height: var(--formie-control-height);
+        padding: var(--formie-space-2);
+    }
+}

package/src/css/theme/integrations/_stripe.css

@@ -0,0 +1,24 @@
+@layer formie-theme {
+
+    /* Stripe placeholder while Payment Element SDK initializes. */
+    .formie-stripe-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--formie-space-2);
+        min-height: 12rem;
+        width: 100%;
+        padding: var(--formie-space-4);
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface);
+        color: var(--formie-color-text-muted);
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    .formie-stripe-placeholder[hidden] {
+        display: none;
+    }
+}

package/src/css/theme/utilities/_accessibility.css

@@ -0,0 +1,13 @@
+@layer formie-theme {
+    .formie-sr-only {
+        position: absolute !important;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+}

package/src/css/theme-base/_controls.css

@@ -0,0 +1,41 @@
+@layer formie-theme-base {
+    .formie-button {
+        appearance: none;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .formie-input,
+    .formie-textarea,
+    .formie-select {
+        box-sizing: border-box;
+        width: 100%;
+        padding: var(--formie-control-padding-y) var(--formie-control-padding-x);
+        font-size: var(--formie-control-font-size);
+        line-height: var(--formie-line-height-tight);
+        min-height: var(--formie-control-height);
+    }
+
+    .formie-textarea {
+        min-height: var(--formie-textarea-min-height);
+        resize: vertical;
+    }
+
+    /* Prevent Mobile Safari auto-zoom on focus for input/select controls. */
+    @supports (-webkit-touch-callout: none) {
+
+        .formie-input,
+        .formie-select {
+            font-size: 16px;
+        }
+    }
+
+    .formie-checkbox-input,
+    .formie-radio-input {
+        width: var(--formie-font-size-base);
+        height: var(--formie-font-size-base);
+        margin: calc(var(--formie-space-1) * 0.8) 0 0;
+        padding: 0;
+        flex: 0 0 auto;
+    }
+}

package/src/css/theme-base/_primitives.css

@@ -0,0 +1,34 @@
+@layer formie-theme-base {
+    .formie-form button,
+    .formie-form input,
+    .formie-form select,
+    .formie-form optgroup,
+    .formie-form textarea,
+    .formie-form ::file-selector-button {
+        margin: 0;
+        font: inherit;
+        font-feature-settings: inherit;
+        font-variation-settings: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        color: inherit;
+        border-radius: 0;
+        background-color: transparent;
+        opacity: 1;
+    }
+
+    .formie-form a,
+    .formie-link,
+    .formie-address-location {
+        color: var(--formie-color-primary);
+        text-decoration: underline;
+        text-underline-offset: var(--formie-link-underline-offset);
+        transition: color 150ms ease;
+    }
+
+    .formie-form a:hover,
+    .formie-link:hover,
+    .formie-address-location:hover {
+        color: var(--formie-color-primary-hover);
+    }
+}

package/src/icons/rich-text/aligncenter.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M4 6h16" />
+  <path d="M7 10h10" />
+  <path d="M4 14h16" />
+  <path d="M7 18h10" />
+</svg>

package/src/icons/rich-text/alignleft.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M4 6h16" />
+  <path d="M4 10h10" />
+  <path d="M4 14h16" />
+  <path d="M4 18h10" />
+</svg>

package/src/icons/rich-text/alignright.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M4 6h16" />
+  <path d="M10 10h10" />
+  <path d="M4 14h16" />
+  <path d="M10 18h10" />
+</svg>

package/src/icons/rich-text/bold.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M7 6h6a3 3 0 0 1 0 6H7z" />
+  <path d="M7 12h7a3 3 0 0 1 0 6H7z" />
+</svg>

package/src/icons/rich-text/clear.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="m4 20 8-8" />
+  <path d="m12 12 7-7" />
+  <path d="m5 15-2-2a2 2 0 0 1 0-2.83L9.17 4a2 2 0 0 1 2.83 0l4 4" />
+  <path d="M16 20H8" />
+</svg>

package/src/icons/rich-text/code.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="m9 18-6-6 6-6" />
+  <path d="m15 6 6 6-6 6" />
+</svg>

package/src/icons/rich-text/heading1.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
+  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="system-ui, sans-serif" font-size="12" font-weight="700" fill="currentColor">H1</text>
+</svg>

package/src/icons/rich-text/heading2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
+  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="system-ui, sans-serif" font-size="12" font-weight="700" fill="currentColor">H2</text>
+</svg>

package/src/icons/rich-text/image.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <rect x="3" y="5" width="18" height="14" rx="2" />
+  <path d="m8 13 3-3 5 5" />
+  <path d="m13 12 2-2 4 4" />
+  <circle cx="8.5" cy="9.5" r="1" />
+</svg>

package/src/icons/rich-text/italic.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M13 6h6" />
+  <path d="M5 18h6" />
+  <path d="M14 6 10 18" />
+</svg>

package/src/icons/rich-text/line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M4 12h16" />
+</svg>

package/src/icons/rich-text/link.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M10 13a5 5 0 0 0 7.07 0l1.41-1.41a5 5 0 0 0-7.07-7.07L10 5" />
+  <path d="M14 11a5 5 0 0 0-7.07 0L5.5 12.43a5 5 0 0 0 7.07 7.07L14 19" />
+</svg>

package/src/icons/rich-text/olist.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M10 6h10" />
+  <path d="M10 12h10" />
+  <path d="M10 18h10" />
+  <path d="M4 6h.01" />
+  <path d="M4 12h.01" />
+  <path d="M4 18h.01" />
+</svg>

package/src/icons/rich-text/paragraph.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
+  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="system-ui, sans-serif" font-size="12" font-weight="700" fill="currentColor">P</text>
+</svg>

package/src/icons/rich-text/quote.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M8 10H6a2 2 0 0 0-2 2v2h4v-4z" />
+  <path d="M18 10h-2a2 2 0 0 0-2 2v2h4v-4z" />
+</svg>

package/src/icons/rich-text/strikethrough.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M6 12h12" />
+  <path d="M9 7a3 3 0 0 1 6 0c0 4-6 2-6 6a3 3 0 0 0 6 0" />
+</svg>

package/src/icons/rich-text/ulist.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M10 6h10" />
+  <path d="M10 12h10" />
+  <path d="M10 18h10" />
+  <circle cx="4" cy="6" r="1" fill="currentColor" stroke="none" />
+  <circle cx="4" cy="12" r="1" fill="currentColor" stroke="none" />
+  <circle cx="4" cy="18" r="1" fill="currentColor" stroke="none" />
+</svg>

package/src/icons/rich-text/underline.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M8 6v5a4 4 0 0 0 8 0V6" />
+  <path d="M6 20h12" />
+</svg>