@fiscozen/thumbnail 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,82 @@
+# @fiscozen/thumbnail
+
+## 0.2.0
+
+### Minor Changes
+
+- 976684e: `FzThumbnail` — a new package, and the first way the design system can show an
+  arbitrary image (LIB-2918).
+
+  `<img>` is in `forbiddenTags` at every atomic-design layer, and until now there
+  was nothing to compose in its place: the only three components that render one are
+  `FzAvatar` — round, with hardwired sizes, built for people — and
+  `FzRadioCard` / `FzCheckboxCard`, where the image is an illustration inside a
+  selectable card. So any surface that had to show a user-uploaded image had neither
+  a component nor a legal fallback. In the frontoffice customer chat that is a
+  divergence already in production: image attachments render as file cards,
+  indistinguishable from a document, and not even distinguishable iconographically
+  because the icon kit has no image, photo or camera glyph. `FzThumbnail` extracts
+  and generalises the card pattern (`imageUrl` + `imageAlt` + `object-cover`) rather
+  than inventing anything.
+  - **The caller imposes the dimensions**, so this does not repeat `FzAvatar`'s
+    mistake of owning a size — but they are **props** (`width`, `height`,
+    `aspectRatio`), not a class. The consuming apps forbid `class` outright at the
+    organism, template and page layers and `style` above an atom, so a class-only
+    sizing contract would make the component unusable exactly where a page needs it.
+    Deciding it inside the component is the only way that capability exists for
+    those layers — the same reasoning as `FzNavbar`'s `elevation`. A class from a
+    layer that permits one still works. Left unsized, the box takes its container's
+    width at the image's natural aspect ratio — visible, but a size nobody chose,
+    and the one case where a load failure moves the layout.
+  - **`alt` is required by the type**, with an explicit `alt=""` for decorative
+    images: a decision visible at the call site rather than an optional prop that
+    gets forgotten. A missing `alt` makes a screen reader announce the URL. The name
+    also survives a load failure: a native `<img>` whose URL 404s still exposes its
+    `alt` to assistive tech, so replacing the element with a placeholder re-applies
+    the name as `role="img"` + `aria-label` rather than dropping it — otherwise a
+    screen-reader user ends up worse off than a sighted one, who at least sees the
+    placeholder icon. A decorative `alt=""` and an empty `src` stay silent; neither
+    ever named anything.
+  - **An `overlay` slot** for an action — the chat's download button, the composer's
+    remove control. The layer is inert and hands pointer events back to its direct
+    children, so it does not swallow clicks meant for the thumbnail, and
+    `overlayPosition` pins the content to a corner without the call site writing a
+    class either.
+  - **A load error does not leave a hole in a sized box.** The placeholder —
+    `placeholderIcon` on a `grey-100` fill, `file` by default since the kit has no
+    image glyph — occupies the same box (an unsized box is only as tall as its
+    content, and a placeholder has no intrinsic ratio to supply that height with, so
+    there it collapses to the icon), and an `error` event carries the failing `src`
+    so a caller can fall back to something else. A new `src` clears the failure and
+    retries. `error`
+    reports a load failure and only that: an empty `src` shows the same placeholder
+    without firing anything, because the `<img>` never mounted, so a caller wanting
+    one "nothing is showing" signal checks `!src` alongside `@error`.
+  - **An optional scrim** (`grey-500` at 20%, overriding the design's
+    `rgba(74, 85, 101, 0.2)` onto the DS palette), drawn over the image only, so an
+    overlaid control stays legible on a light photo. Override the colour with
+    `--fz-thumbnail-scrim` and the 20% with `--fz-thumbnail-scrim-opacity`.
+  - **`imgProps` reaches the `<img>` itself** — `referrerpolicy`, `crossorigin`,
+    `decoding`, `fetchpriority`, `srcset`, `sizes`. The component has a single root
+    element, so a fallthrough attribute lands on the wrapping box, where
+    `referrerpolicy` does nothing; without this prop the image is simply out of
+    reach. Keeping `class` and listeners on the box is what a caller sizing or
+    clicking a thumbnail wants, so the two go to different places on purpose.
+    `src`, `alt`, `loading` and `onError` remain the component's own contract and are
+    `Omit`ted from the prop's type, so naming one is a compile error rather than a
+    silent no-op — `onError` in particular could not simply be documented as losing,
+    since Vue's `mergeProps` chains listeners instead of replacing them.
+    Use `:imgProps="{ referrerpolicy: 'no-referrer' }"` for a third-party host.
+  - `radius` defaults to `base` — 4px, the designs' value — and `loading` to `lazy`.
+
+  The scrim is declared in this package's stylesheet rather than as
+  `bg-grey-500/20`, and that is not a style preference: the design system's colours
+  resolve to `var(--grey-500, …)`, Tailwind cannot decompose a `var()` into
+  channels, and an opacity modifier on a token colour therefore generates **no rule
+  at all**. Verified against the DS preset with the Tailwind CLI. The 20% is an
+  `opacity` declaration rather than a baked `rgba()` for the same kind of reason: an
+  `rgba()` would freeze `--grey-500`'s fallback, leaving a retheming consumer with
+  the scrim as the one grey that did not move.
+
+  Unblocks LIB-2912 (`FzpChatAttachmentCard`), whose README documents the file-card
+  fallback as temporary; nothing else about that component has to change.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Fiscozen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,122 @@
+# @fiscozen/thumbnail
+
+`FzThumbnail` — an image from a URL, cropped into a box the caller sizes.
+
+The design system had no way to show an arbitrary image. `FzAvatar` is round and
+owns its sizes; `FzRadioCard` and `FzCheckboxCard` render an illustration inside a
+selectable card. This generalises that second pattern into a component of its own.
+
+```vue
+<FzThumbnail src="/receipt.jpg" alt="Scontrino di marzo" width="158px" height="108px" />
+```
+
+## The caller owns the box
+
+`FzThumbnail` hardwires no dimension — that is the point, and it is what keeps it
+from repeating `FzAvatar`'s mistake. Give it:
+
+- `width` **and** `height`, or
+- one of them plus `aspectRatio`.
+
+With no dimension at all the box takes its container's width and the image's
+*natural* aspect ratio. That is visible, not broken — but it is a size neither
+you nor the design chose, and it is the one case where a load failure moves the
+layout (see below). Give it a dimension.
+
+**They are props, not classes, on purpose.** The consuming apps forbid `class`
+outright at the organism, template and page layers, and `style` anywhere above an
+atom, so a class-only sizing contract would make the component unusable exactly
+where a page needs it. Deciding it inside the component is the only way that
+capability exists for those layers — the same reasoning as `FzNavbar`'s
+`elevation`. A Tailwind class still works where the layer permits one; pick one
+mechanism or the other rather than both.
+
+## Overlaying an action
+
+The `overlay` slot sits above the image in a layer that is itself inert, with
+pointer events handed back to its direct children — so the layer does not swallow
+clicks meant for the thumbnail. `overlayPosition` pins the content 8px in from a
+corner, again as a prop rather than a class, so a page can place an action too.
+
+```vue
+<FzThumbnail :src="attachment.url" alt="" width="100%" height="168px" scrim bordered>
+  <template #overlay>
+    <FzIconButton
+      iconName="arrow-down-to-line"
+      ariaLabel="Scarica"
+      @click="download(attachment)"
+    />
+  </template>
+</FzThumbnail>
+```
+
+Content that needs finer placement can still position itself, from a layer that
+permits a class.
+
+`scrim` lays `grey-500` at 20% over the image, so an overlaid control stays
+legible on a light photo. Override the colour with `--fz-thumbnail-scrim` and the
+20% with `--fz-thumbnail-scrim-opacity` — the colour goes through `var(--grey-500)`
+rather than a baked `rgba()`, so retheming the token moves the scrim with every
+other grey.
+
+## A broken URL does not leave a hole in a sized box
+
+On a load error the image is replaced by a placeholder — `placeholderIcon` on a
+`grey-100` fill — that occupies the same box, and an `error` event fires with the
+failing `src` so the caller can fall back to something else entirely. Changing
+`src` clears the failure and retries.
+
+**That holds as long as the box has a size of its own.** An unsized box is only
+as tall as its content, and the placeholder — unlike an image — has no natural
+ratio to supply one, so it collapses to the icon:
+
+| unsized box, 600px container, 400×300 image | |
+|---|---|
+| image loads | 600×450 |
+| image fails | 600×20 |
+
+Which is the second reason to pass a dimension. Give the box a `height` or an
+`aspectRatio` and the placeholder fills exactly the space the image did.
+
+`error` reports a *load failure* and nothing else. An empty `src` shows the same
+placeholder but fires no event — the image never mounted, so there was nothing to
+fail. If you want one signal for "no image is showing", check `!src` alongside
+`@error`.
+
+Note the icon kit has no image, photo or camera glyph, so the default is `file`.
+
+## `alt` is required
+
+Not an optional prop that gets forgotten. Pass an explicit `alt=""` for a
+decorative image, which makes that a visible decision at the call site.
+
+The name survives a load failure. A native `<img>` whose URL 404s still exposes
+its `alt` to a screen reader — the element is there, only the pixels are missing.
+This component replaces the `<img>` with a placeholder div, so it re-applies the
+name as `role="img"` + `aria-label` rather than letting it vanish. A decorative
+`alt=""` stays silent, and so does an empty `src`: neither named anything.
+
+## Props
+
+| Prop | Type | Default | |
+|---|---|---|---|
+| `src` | `string` | — | Image URL. |
+| `alt` | `string` | — | Accessible name. Required; `""` for decorative. |
+| `width` | `string` | — | Any CSS length. |
+| `height` | `string` | — | Any CSS length. |
+| `aspectRatio` | `string` | — | e.g. `'16 / 9'`. Ignored when both dimensions are set. |
+| `radius` | `'none' \| 'sm' \| 'base' \| 'lg' \| 'xl'` | `'base'` | `base` is 4px, the design's value. |
+| `bordered` | `boolean` | `false` | 1px `grey-100` border. |
+| `scrim` | `boolean` | `false` | Translucent overlay over the image only. |
+| `overlayPosition` | `'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'center'` | `'bottom-end'` | Where the `overlay` slot's content sits, 8px in. |
+| `placeholderIcon` | `string` | `'file'` | Icon shown on load error. |
+| `loading` | `'lazy' \| 'eager'` | `'lazy'` | Native loading hint. |
+| `imgProps` | `Omit<ImgHTMLAttributes, 'src' \| 'alt' \| 'loading' \| 'onError'>` | — | Extra attributes for the `<img>` (`referrerpolicy`, `crossorigin`, `decoding`, `srcset`…). A fallthrough attribute lands on the root box instead, so this is the way to reach the image. The four keys the component owns are excluded from the type, so naming one is a compile error rather than a silent no-op. |
+
+| Event | Payload | |
+|---|---|---|
+| `error` | `string` | The `src` that failed to load. |
+
+| Slot | |
+|---|---|
+| `overlay` | Rendered above the image and the scrim, in an inert layer. |

package/coverage/base.css

@@ -0,0 +1,224 @@
+body, html {
+  margin:0; padding: 0;
+  height: 100%;
+}
+body {
+    font-family: Helvetica Neue, Helvetica, Arial;
+    font-size: 14px;
+    color:#333;
+}
+.small { font-size: 12px; }
+*, *:after, *:before {
+  -webkit-box-sizing:border-box;
+     -moz-box-sizing:border-box;
+          box-sizing:border-box;
+  }
+h1 { font-size: 20px; margin: 0;}
+h2 { font-size: 14px; }
+pre {
+    font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    margin: 0;
+    padding: 0;
+    -moz-tab-size: 2;
+    -o-tab-size:  2;
+    tab-size: 2;
+}
+a { color:#0074D9; text-decoration:none; }
+a:hover { text-decoration:underline; }
+.strong { font-weight: bold; }
+.space-top1 { padding: 10px 0 0 0; }
+.pad2y { padding: 20px 0; }
+.pad1y { padding: 10px 0; }
+.pad2x { padding: 0 20px; }
+.pad2 { padding: 20px; }
+.pad1 { padding: 10px; }
+.space-left2 { padding-left:55px; }
+.space-right2 { padding-right:20px; }
+.center { text-align:center; }
+.clearfix { display:block; }
+.clearfix:after {
+  content:'';
+  display:block;
+  height:0;
+  clear:both;
+  visibility:hidden;
+  }
+.fl { float: left; }
+@media only screen and (max-width:640px) {
+  .col3 { width:100%; max-width:100%; }
+  .hide-mobile { display:none!important; }
+}
+
+.quiet {
+  color: #7f7f7f;
+  color: rgba(0,0,0,0.5);
+}
+.quiet a { opacity: 0.7; }
+
+.fraction {
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 10px;
+  color: #555;
+  background: #E8E8E8;
+  padding: 4px 5px;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+
+div.path a:link, div.path a:visited { color: #333; }
+table.coverage {
+  border-collapse: collapse;
+  margin: 10px 0 0 0;
+  padding: 0;
+}
+
+table.coverage td {
+  margin: 0;
+  padding: 0;
+  vertical-align: top;
+}
+table.coverage td.line-count {
+    text-align: right;
+    padding: 0 5px 0 20px;
+}
+table.coverage td.line-coverage {
+    text-align: right;
+    padding-right: 10px;
+    min-width:20px;
+}
+
+table.coverage td span.cline-any {
+    display: inline-block;
+    padding: 0 5px;
+    width: 100%;
+}
+.missing-if-branch {
+    display: inline-block;
+    margin-right: 5px;
+    border-radius: 3px;
+    position: relative;
+    padding: 0 4px;
+    background: #333;
+    color: yellow;
+}
+
+.skip-if-branch {
+    display: none;
+    margin-right: 10px;
+    position: relative;
+    padding: 0 4px;
+    background: #ccc;
+    color: white;
+}
+.missing-if-branch .typ, .skip-if-branch .typ {
+    color: inherit !important;
+}
+.coverage-summary {
+  border-collapse: collapse;
+  width: 100%;
+}
+.coverage-summary tr { border-bottom: 1px solid #bbb; }
+.keyline-all { border: 1px solid #ddd; }
+.coverage-summary td, .coverage-summary th { padding: 10px; }
+.coverage-summary tbody { border: 1px solid #bbb; }
+.coverage-summary td { border-right: 1px solid #bbb; }
+.coverage-summary td:last-child { border-right: none; }
+.coverage-summary th {
+  text-align: left;
+  font-weight: normal;
+  white-space: nowrap;
+}
+.coverage-summary th.file { border-right: none !important; }
+.coverage-summary th.pct { }
+.coverage-summary th.pic,
+.coverage-summary th.abs,
+.coverage-summary td.pct,
+.coverage-summary td.abs { text-align: right; }
+.coverage-summary td.file { white-space: nowrap;  }
+.coverage-summary td.pic { min-width: 120px !important;  }
+.coverage-summary tfoot td { }
+
+.coverage-summary .sorter {
+    height: 10px;
+    width: 7px;
+    display: inline-block;
+    margin-left: 0.5em;
+    background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
+}
+.coverage-summary .sorted .sorter {
+    background-position: 0 -20px;
+}
+.coverage-summary .sorted-desc .sorter {
+    background-position: 0 -10px;
+}
+.status-line {  height: 10px; }
+/* yellow */
+.cbranch-no { background: yellow !important; color: #111; }
+/* dark red */
+.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
+.low .chart { border:1px solid #C21F39 }
+.highlighted,
+.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
+  background: #C21F39 !important;
+}
+/* medium red */
+.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
+/* light red */
+.low, .cline-no { background:#FCE1E5 }
+/* light green */
+.high, .cline-yes { background:rgb(230,245,208) }
+/* medium green */
+.cstat-yes { background:rgb(161,215,106) }
+/* dark green */
+.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
+.high .chart { border:1px solid rgb(77,146,33) }
+/* dark yellow (gold) */
+.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
+.medium .chart { border:1px solid #f9cd0b; }
+/* light yellow */
+.medium { background: #fff4c2; }
+
+.cstat-skip { background: #ddd; color: #111; }
+.fstat-skip { background: #ddd; color: #111 !important; }
+.cbranch-skip { background: #ddd !important; color: #111; }
+
+span.cline-neutral { background: #eaeaea; }
+
+.coverage-summary td.empty {
+    opacity: .5;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    line-height: 1;
+    color: #888;
+}
+
+.cover-fill, .cover-empty {
+  display:inline-block;
+  height: 12px;
+}
+.chart {
+  line-height: 0;
+}
+.cover-empty {
+    background: white;
+}
+.cover-full {
+    border-right: none !important;
+}
+pre.prettyprint {
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.com { color: #999 !important; }
+.ignore-none { color: #999; font-weight: normal; }
+
+.wrapper {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin: 0 auto -48px;
+}
+.footer, .push {
+  height: 48px;
+}

package/coverage/block-navigation.js

@@ -0,0 +1,87 @@
+/* eslint-disable */
+var jumpToCode = (function init() {
+    // Classes of code we would like to highlight in the file view
+    var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no'];
+
+    // Elements to highlight in the file listing view
+    var fileListingElements = ['td.pct.low'];
+
+    // We don't want to select elements that are direct descendants of another match
+    var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
+
+    // Selector that finds elements on the page to which we can jump
+    var selector =
+        fileListingElements.join(', ') +
+        ', ' +
+        notSelector +
+        missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
+
+    // The NodeList of matching elements
+    var missingCoverageElements = document.querySelectorAll(selector);
+
+    var currentIndex;
+
+    function toggleClass(index) {
+        missingCoverageElements
+            .item(currentIndex)
+            .classList.remove('highlighted');
+        missingCoverageElements.item(index).classList.add('highlighted');
+    }
+
+    function makeCurrent(index) {
+        toggleClass(index);
+        currentIndex = index;
+        missingCoverageElements.item(index).scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'center'
+        });
+    }
+
+    function goToPrevious() {
+        var nextIndex = 0;
+        if (typeof currentIndex !== 'number' || currentIndex === 0) {
+            nextIndex = missingCoverageElements.length - 1;
+        } else if (missingCoverageElements.length > 1) {
+            nextIndex = currentIndex - 1;
+        }
+
+        makeCurrent(nextIndex);
+    }
+
+    function goToNext() {
+        var nextIndex = 0;
+
+        if (
+            typeof currentIndex === 'number' &&
+            currentIndex < missingCoverageElements.length - 1
+        ) {
+            nextIndex = currentIndex + 1;
+        }
+
+        makeCurrent(nextIndex);
+    }
+
+    return function jump(event) {
+        if (
+            document.getElementById('fileSearch') === document.activeElement &&
+            document.activeElement != null
+        ) {
+            // if we're currently focused on the search input, we don't want to navigate
+            return;
+        }
+
+        switch (event.which) {
+            case 78: // n
+            case 74: // j
+                goToNext();
+                break;
+            case 66: // b
+            case 75: // k
+            case 80: // p
+                goToPrevious();
+                break;
+        }
+    };
+})();
+window.addEventListener('keydown', jumpToCode);

package/coverage/clover.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<coverage generated="1788859848137" clover="3.2.0">
+  <project timestamp="1788859848137" name="All files">
+    <metrics statements="15" coveredstatements="15" conditionals="21" coveredconditionals="21" methods="6" coveredmethods="6" elements="42" coveredelements="42" complexity="0" loc="15" ncloc="15" packages="2" files="4" classes="4"/>
+    <package name="dist.src">
+      <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+      <file name="FzThumbnail.vue.d.ts" path="/Users/fiscozen/Projects/design_system/packages/thumbnail/dist/src/FzThumbnail.vue.d.ts">
+        <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+      </file>
+      <file name="types.d.ts" path="/Users/fiscozen/Projects/design_system/packages/thumbnail/dist/src/types.d.ts">
+        <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+      </file>
+    </package>
+    <package name="src">
+      <metrics statements="15" coveredstatements="15" conditionals="21" coveredconditionals="21" methods="6" coveredmethods="6"/>
+      <file name="FzThumbnail.vue" path="/Users/fiscozen/Projects/design_system/packages/thumbnail/src/FzThumbnail.vue">
+        <metrics statements="15" coveredstatements="15" conditionals="21" coveredconditionals="21" methods="6" coveredmethods="6"/>
+        <line num="35" count="54" type="stmt"/>
+        <line num="44" count="54" type="stmt"/>
+        <line num="52" count="54" type="stmt"/>
+        <line num="56" count="54" type="stmt"/>
+        <line num="57" count="56" type="stmt"/>
+        <line num="59" count="2" type="stmt"/>
+        <line num="63" count="65" type="cond" truecount="2" falsecount="0"/>
+        <line num="72" count="54" type="cond" truecount="4" falsecount="0"/>
+        <line num="74" count="54" type="stmt"/>
+        <line num="82" count="54" type="stmt"/>
+        <line num="92" count="54" type="stmt"/>
+        <line num="98" count="54" type="stmt"/>
+        <line num="99" count="9" type="stmt"/>
+        <line num="100" count="9" type="stmt"/>
+        <line num="105" count="65" type="stmt"/>
+      </file>
+      <file name="types.ts" path="/Users/fiscozen/Projects/design_system/packages/thumbnail/src/types.ts">
+        <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+      </file>
+    </package>
+  </project>
+</coverage>

package/coverage/coverage-final.json

@@ -0,0 +1,5 @@
+{"/Users/fiscozen/Projects/design_system/packages/thumbnail/dist/src/FzThumbnail.vue.d.ts": {"path":"/Users/fiscozen/Projects/design_system/packages/thumbnail/dist/src/FzThumbnail.vue.d.ts","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"meta":{"lastBranch":0,"lastFunction":0,"lastStatement":0,"seen":{}}}
+,"/Users/fiscozen/Projects/design_system/packages/thumbnail/dist/src/types.d.ts": {"path":"/Users/fiscozen/Projects/design_system/packages/thumbnail/dist/src/types.d.ts","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"meta":{"lastBranch":0,"lastFunction":0,"lastStatement":0,"seen":{}}}
+,"/Users/fiscozen/Projects/design_system/packages/thumbnail/src/FzThumbnail.vue": {"path":"/Users/fiscozen/Projects/design_system/packages/thumbnail/src/FzThumbnail.vue","statementMap":{"0":{"start":{"line":35,"column":14},"end":{"line":35,"column":null}},"1":{"start":{"line":44,"column":13},"end":{"line":44,"column":null}},"2":{"start":{"line":52,"column":6},"end":{"line":52,"column":24}},"3":{"start":{"line":56,"column":0},"end":{"line":61,"column":null}},"4":{"start":{"line":57,"column":8},"end":{"line":57,"column":null}},"5":{"start":{"line":59,"column":4},"end":{"line":59,"column":null}},"6":{"start":{"line":63,"column":6},"end":{"line":63,"column":61}},"7":{"start":{"line":63,"column":33},"end":{"line":63,"column":61}},"8":{"start":{"line":72,"column":6},"end":{"line":72,"column":91}},"9":{"start":{"line":72,"column":41},"end":{"line":72,"column":91}},"10":{"start":{"line":74,"column":57},"end":{"line":80,"column":null}},"11":{"start":{"line":82,"column":75},"end":{"line":88,"column":null}},"12":{"start":{"line":92,"column":6},"end":{"line":96,"column":2}},"13":{"start":{"line":92,"column":33},"end":{"line":96,"column":2}},"14":{"start":{"line":98,"column":6},"end":{"line":100,"column":null}},"15":{"start":{"line":99,"column":2},"end":{"line":99,"column":null}},"16":{"start":{"line":100,"column":2},"end":{"line":100,"column":null}},"17":{"start":{"line":105,"column":2},"end":{"line":154,"column":null}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":56,"column":0},"end":{"line":56,"column":null}},"loc":{"start":{"line":57,"column":8},"end":{"line":57,"column":null}},"line":57},"1":{"name":"(anonymous_1)","decl":{"start":{"line":57,"column":14},"end":{"line":57,"column":null}},"loc":{"start":{"line":58,"column":8},"end":{"line":61,"column":null}},"line":58},"2":{"name":"(anonymous_2)","decl":{"start":{"line":63,"column":18},"end":{"line":63,"column":33}},"loc":{"start":{"line":63,"column":33},"end":{"line":63,"column":61}},"line":63},"3":{"name":"(anonymous_3)","decl":{"start":{"line":72,"column":25},"end":{"line":72,"column":41}},"loc":{"start":{"line":72,"column":41},"end":{"line":72,"column":91}},"line":72},"4":{"name":"(anonymous_4)","decl":{"start":{"line":92,"column":17},"end":{"line":92,"column":33}},"loc":{"start":{"line":92,"column":33},"end":{"line":96,"column":2}},"line":92},"5":{"name":"(anonymous_5)","decl":{"start":{"line":98,"column":6},"end":{"line":98,"column":22}},"loc":{"start":{"line":98,"column":22},"end":{"line":100,"column":null}},"line":98}},"branchMap":{"0":{"loc":{"start":{"line":63,"column":33},"end":{"line":63,"column":61}},"type":"binary-expr","locations":[{"start":{"line":63,"column":33},"end":{"line":63,"column":48}},{"start":{"line":63,"column":48},"end":{"line":63,"column":61}}],"line":63},"1":{"loc":{"start":{"line":72,"column":41},"end":{"line":72,"column":91}},"type":"cond-expr","locations":[{"start":{"line":72,"column":69},"end":{"line":72,"column":81}},{"start":{"line":72,"column":81},"end":{"line":72,"column":91}}],"line":72},"2":{"loc":{"start":{"line":72,"column":41},"end":{"line":72,"column":69}},"type":"binary-expr","locations":[{"start":{"line":72,"column":41},"end":{"line":72,"column":57}},{"start":{"line":72,"column":57},"end":{"line":72,"column":69}}],"line":72},"3":{"loc":{"start":{"line":93,"column":6},"end":{"line":93,"column":47}},"type":"cond-expr","locations":[{"start":{"line":93,"column":20},"end":{"line":93,"column":42}},{"start":{"line":93,"column":45},"end":{"line":93,"column":47}}],"line":93},"4":{"loc":{"start":{"line":94,"column":6},"end":{"line":94,"column":50}},"type":"cond-expr","locations":[{"start":{"line":94,"column":21},"end":{"line":94,"column":45}},{"start":{"line":94,"column":48},"end":{"line":94,"column":50}}],"line":94},"5":{"loc":{"start":{"line":95,"column":6},"end":{"line":95,"column":null}},"type":"cond-expr","locations":[{"start":{"line":95,"column":26},"end":{"line":95,"column":60}},{"start":{"line":95,"column":63},"end":{"line":95,"column":null}}],"line":95},"6":{"loc":{"start":{"line":111,"column":12},"end":{"line":134,"column":72}},"type":"cond-expr","locations":[{"start":{"line":111,"column":12},"end":{"line":127,"column":null}},{"start":{"line":127,"column":4},"end":{"line":134,"column":72}}],"line":111},"7":{"loc":{"start":{"line":130,"column":13},"end":{"line":130,"column":null}},"type":"cond-expr","locations":[{"start":{"line":130,"column":29},"end":{"line":130,"column":40}},{"start":{"line":130,"column":40},"end":{"line":130,"column":null}}],"line":130},"8":{"loc":{"start":{"line":138,"column":12},"end":{"line":141,"column":null}},"type":"cond-expr","locations":[{"start":{"line":138,"column":21},"end":{"line":137,"column":null}},{"start":{"line":141,"column":6},"end":{"line":141,"column":null}}],"line":138},"9":{"loc":{"start":{"line":138,"column":12},"end":{"line":138,"column":null}},"type":"binary-expr","locations":[{"start":{"line":138,"column":12},"end":{"line":138,"column":21}},{"start":{"line":138,"column":21},"end":{"line":138,"column":null}}],"line":138},"10":{"loc":{"start":{"line":149,"column":12},"end":{"line":154,"column":null}},"type":"cond-expr","locations":[{"start":{"line":149,"column":19},"end":{"line":154,"column":null}}],"line":149}},"s":{"0":54,"1":54,"2":54,"3":54,"4":56,"5":2,"6":54,"7":65,"8":54,"9":15,"10":54,"11":54,"12":54,"13":54,"14":54,"15":9,"16":9,"17":65},"f":{"0":56,"1":2,"2":65,"3":15,"4":54,"5":9},"b":{"0":[65,59],"1":[8,7],"2":[15,9],"3":[3,51],"4":[3,51],"5":[1,53],"6":[50,15],"7":[8,7],"8":[3,62],"9":[65,4],"10":[10]},"meta":{"lastBranch":0,"lastFunction":0,"lastStatement":0,"seen":{}}}
+,"/Users/fiscozen/Projects/design_system/packages/thumbnail/src/types.ts": {"path":"/Users/fiscozen/Projects/design_system/packages/thumbnail/src/types.ts","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"meta":{"lastBranch":0,"lastFunction":0,"lastStatement":0,"seen":{}}}
+}