@flux-ui/components 3.0.0-next.20 → 3.0.0-next.21

package/dist/component/FluxStatistic.vue.d.ts

@@ -5,7 +5,9 @@ type __VLS_Props = {
     readonly changeValue?: string;
     readonly color?: FluxColor;
     readonly direction?: FluxDirection;
-    readonly icon: FluxIconName;
+    readonly icon?: FluxIconName;
+    readonly imageSrc?: string;
+    readonly imageAlt?: string;
     readonly label: string;
     readonly value: string;
 };

package/dist/component/FluxStatistic.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FluxStatistic.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxStatistic.vue"],"names":[],"mappings":"AAsEI,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM7E,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,CAAC;IACnC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CAC1B,CAAC;;AAiIN,wBAOG"}
+{"version":3,"file":"FluxStatistic.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxStatistic.vue"],"names":[],"mappings":"AAiFI,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM7E,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CAC1B,CAAC;;AA4IN,wBAOG"}

package/dist/index.css

@@ -5259,6 +5259,12 @@ tfoot .table-cell {
   border-radius: var(--radius);
 }
 
+.statistic-image {
+  height: 48px;
+  width: 48px;
+  border-radius: var(--radius);
+}
+
 .statistic-horizontal {
   display: flex;
 }

package/dist/index.js

@@ -3431,7 +3431,7 @@ const iconBoxedSuccess = `icon-boxed-success icon-boxed-colored icon-boxed ${_0$
 const iconBoxedWarning = `icon-boxed-warning icon-boxed-colored icon-boxed ${_0$g}`;
 const $style$I = { icon: icon$b, fontAwesomeIcon, materialSymbolIcon, iconBoxed: iconBoxed$1, iconBoxedDefault, iconBoxedColored, iconBoxedGray, iconBoxedPrimary, iconBoxedDanger, iconBoxedInfo, iconBoxedSuccess, iconBoxedWarning };
 const _hoisted_1$I = ["viewBox"];
-const _hoisted_2$i = ["d"];
+const _hoisted_2$j = ["d"];
 const _sfc_main$2C = /* @__PURE__ */ defineComponent({
   __name: "FluxIcon",
   props: {
@@ -3476,7 +3476,7 @@ const _sfc_main$2C = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("path", {
             d: path,
             fill: "currentColor"
-          }, null, 8, _hoisted_2$i);
+          }, null, 8, _hoisted_2$j);
         }), 256))
       ], 14, _hoisted_1$I)) : __props.name ? (openBlock(), createElementBlock("i", {
         key: 1,
@@ -3713,10 +3713,10 @@ const _sfc_main$2z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const { "button": _0$f, "buttonIcon": _1$8, "buttonLabel": _2$5 } = cssModule0$4;
-const action$1 = `action ${_0$f}`;
+const { "buttonIcon": _0$f, "button": _1$8, "buttonLabel": _2$5 } = cssModule0$4;
+const action$1 = `action ${_1$8}`;
 const spinner$5 = `spinner`;
-const actionIcon = `action-icon ${_1$8}`;
+const actionIcon = `action-icon ${_0$f}`;
 const isDestructive = `is-destructive`;
 const actionLabel = `action-label ${_2$5}`;
 const actionBar = `action-bar`;
@@ -4964,7 +4964,7 @@ const persona = `persona`;
 const personaDetails = `persona-details`;
 const $style$z = { avatar: avatar$2, avatarImage, avatarFallback, icon: icon$9, avatarFallbackColorized, avatarFallbackNeutral, avatarLoading, spinner: spinner$3, avatarStatus, avatarStatusGray, avatarStatusPrimary, avatarStatusDanger, avatarStatusInfo, avatarStatusSuccess, avatarStatusWarning, avatarClickable, statusAvatar, persona, personaDetails };
 const _hoisted_1$F = ["alt", "src"];
-const _hoisted_2$h = { key: 0 };
+const _hoisted_2$i = { key: 0 };
 const _sfc_main$27 = /* @__PURE__ */ defineComponent({
   __name: "FluxAvatar",
   props: {
@@ -5041,7 +5041,7 @@ const _sfc_main$27 = /* @__PURE__ */ defineComponent({
             key: 1,
             class: normalizeClass(__props.fallback === "colorized" ? unref($style$z).avatarFallbackColorized : unref($style$z).avatarFallbackNeutral)
           }, [
-            __props.fallbackInitials ? (openBlock(), createElementBlock("span", _hoisted_2$h, toDisplayString(__props.fallbackInitials), 1)) : __props.fallbackIcon ? (openBlock(), createBlock(_sfc_main$2C, {
+            __props.fallbackInitials ? (openBlock(), createElementBlock("span", _hoisted_2$i, toDisplayString(__props.fallbackInitials), 1)) : __props.fallbackIcon ? (openBlock(), createBlock(_sfc_main$2C, {
               key: 1,
               name: __props.fallbackIcon
             }, null, 8, ["name"])) : createCommentVNode("", true)
@@ -5400,21 +5400,21 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const { "buttonIcon": _0$b, "buttonLabel": _1$5, "button": _2$2 } = cssModule0$4;
+const { "button": _0$b, "buttonIcon": _1$5, "buttonLabel": _2$2 } = cssModule0$4;
 const menu$1 = `menu`;
 const menuNormal = `menu-normal menu`;
 const menuLarge = `menu-large menu`;
 const menuGroup$1 = `menu-group`;
 const menuGroupHorizontal = `menu-group-horizontal menu-group`;
 const menuGroupVertical = `menu-group-vertical menu-group`;
-const menuItem$2 = `menu-item ${_2$2}`;
-const menuItemIcon = `menu-item-icon ${_0$b}`;
-const menuItemLabel$2 = `menu-item-label ${_1$5}`;
+const menuItem$2 = `menu-item ${_0$b}`;
+const menuItemIcon = `menu-item-icon ${_1$5}`;
+const menuItemLabel$2 = `menu-item-label ${_2$2}`;
 const menuItemActive = `menu-item-active`;
 const menuItemDestructive = `menu-item-destructive`;
 const menuItemHighlighted = `menu-item-highlighted`;
 const menuItemIndented = `menu-item-indented`;
-const menuItemSelectableIcon = `menu-item-selectable-icon ${_0$b}`;
+const menuItemSelectableIcon = `menu-item-selectable-icon ${_1$5}`;
 const menuItemSelected = `menu-item-selected`;
 const menuItemCommand = `menu-item-command`;
 const menuItemCommandIcon = `menu-item-command-icon`;
@@ -5598,7 +5598,7 @@ const toggleIconOn = `toggle-icon-on toggle-icon`;
 const toggleIconOff = `toggle-icon-off toggle-icon`;
 const $style$w = { formInputGroup, buttonGroup, button: button$4, formInput: formInput$2, formSelect, formStructureElement, form, pane, formColumn, formSection, formRow, formSectionTitle, formField, formFieldHeader, formFieldLabel: formFieldLabel$1, formFieldOptional, formFieldValue, formFieldCounter, formFieldAddition, formFieldAdditionIcon, formFieldAdditionError, formFieldAdditionHint, isSecondary, formInputDisabled, formInputEnabled, formInputIcon, formInputIconTrailing, formInputIconLeading, formInputIconPasswordToggle, formInputNative, formInputNativeHasIconLeading, formInputNativeHasIconTrailing, formInputAddition, isCondensed, secondaryButton: secondaryButton$1, formDateInput, formDateRangeInput, formDateTimeInput, inputGroup, formTimeInput, isDisabled: isDisabled$4, isFocused, badge, formSelectIcon, formSelectInput, formSelectPlaceholder, formSelectPopup, menuItem: menuItem$1, isKeyboardAction, isSearchable, menuSubHeader: menuSubHeader$1, formSelectSelected, buttonLabel, formTextArea, formTextAreaDisabled, formTextAreaEnabled, checkbox, checkboxElement, checkboxNative, icon: icon$6, checkboxLabel, quantitySelector, quantitySelectorButton, quantitySelectorInput, pinInput, pinInputField, pinInputEnabled, pinInputDisabled, toggle, isChecked, toggleInput, isSwitch, toggleIcon, toggleIconOn, toggleIconOff };
 const _hoisted_1$D = ["aria-disabled"];
-const _hoisted_2$g = ["id", "autocomplete", "autofocus", "aria-disabled", "disabled", "max", "maxlength", "min", "placeholder", "readonly", "step", "type", "value"];
+const _hoisted_2$h = ["id", "autocomplete", "autofocus", "aria-disabled", "disabled", "max", "maxlength", "min", "placeholder", "readonly", "step", "type", "value"];
 const _sfc_main$1$ = /* @__PURE__ */ defineComponent({
   __name: "FluxFormInput",
   props: /* @__PURE__ */ mergeModels({
@@ -5755,7 +5755,7 @@ const _sfc_main$1$ = /* @__PURE__ */ defineComponent({
           onFocus: _cache[1] || (_cache[1] = ($event) => onFocus()),
           onInput,
           onKeydown: onKeyDown
-        }, null, 42, _hoisted_2$g),
+        }, null, 42, _hoisted_2$h),
         __props.iconLeading ? (openBlock(), createBlock(_sfc_main$2C, {
           key: 0,
           class: normalizeClass(unref($style$w).formInputIconLeading),
@@ -6806,10 +6806,10 @@ const VNodeRenderer = defineComponent({
     return () => props.vnode;
   }
 });
-const { "basePaneStructure": _0$9, "basePaneLoader": _1$4 } = cssModule0$5;
-const calendar = `calendar ${_0$9}`;
+const { "basePaneLoader": _0$9, "basePaneStructure": _1$4 } = cssModule0$5;
+const calendar = `calendar ${_1$4}`;
 const calendarActions = `calendar-actions`;
-const calendarLoader = `calendar-loader ${_1$4}`;
+const calendarLoader = `calendar-loader ${_0$9}`;
 const calendarCurrent = `calendar-current`;
 const calendarCurrentValue = `calendar-current-value`;
 const calendarCurrentMonth = `calendar-current-month calendar-current-value`;
@@ -6848,7 +6848,7 @@ const datePickerDay = `date-picker-day`;
 const button$3 = `button`;
 const $style$s = { datePicker, datePickerDates, datePickerMonths, datePickerYears, datePickerHeader, datePickerHeaderView, datePickerHeaderViewButton, datePickerDate, isDisabled: isDisabled$1, isRangeEntry, isRangeEnd, isRangeStart, isSelectionEntry, isSelectionEnd, isSelectionStart, isSelected: isSelected$1, datePickerDatesGrid, datePickerDay, button: button$3 };
 const _hoisted_1$z = ["onClick"];
-const _hoisted_2$f = ["onClick"];
+const _hoisted_2$g = ["onClick"];
 const _sfc_main$1O = /* @__PURE__ */ defineComponent({
   __name: "FluxCalendar",
   props: {
@@ -6964,7 +6964,7 @@ const _sfc_main$1O = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(unref($style$t).calendarCurrentYear),
                     type: "button",
                     onClick: open2
-                  }, toDisplayString(unref(viewYear)), 11, _hoisted_2$f)
+                  }, toDisplayString(unref(viewYear)), 11, _hoisted_2$g)
                 ]),
                 default: withCtx(({ close: close2 }) => [
                   createElementVNode("div", {
@@ -7106,8 +7106,8 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$y = ["for"];
-const _hoisted_2$e = ["id"];
-const _hoisted_3$5 = ["aria-checked"];
+const _hoisted_2$f = ["id"];
+const _hoisted_3$6 = ["aria-checked"];
 const _sfc_main$1M = /* @__PURE__ */ defineComponent({
   __name: "FluxCheckbox",
   props: /* @__PURE__ */ mergeModels({
@@ -7139,7 +7139,7 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
           type: "checkbox",
           class: normalizeClass(unref($style$w).checkboxNative),
           id: unref(id)
-        }, null, 10, _hoisted_2$e), [
+        }, null, 10, _hoisted_2$f), [
           [vModelCheckbox, modelValue.value]
         ]),
         createElementVNode("button", {
@@ -7156,7 +7156,7 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
             name: "check",
             size: 16
           }))
-        ], 10, _hoisted_3$5),
+        ], 10, _hoisted_3$6),
         __props.label ? (openBlock(), createElementBlock("span", {
           key: 0,
           class: normalizeClass(unref($style$w).checkboxLabel)
@@ -7275,7 +7275,7 @@ const isTyping = `is-typing`;
 const commentTyping = `comment-typing`;
 const $style$q = { comment, avatar: avatar$1, commentContent, commentFooter, isReceived, isTyping, commentTyping };
 const _hoisted_1$x = { key: 0 };
-const _hoisted_2$d = ["datetime"];
+const _hoisted_2$e = ["datetime"];
 const _sfc_main$1J = /* @__PURE__ */ defineComponent({
   __name: "FluxComment",
   props: {
@@ -7326,7 +7326,7 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
           iso.value && relative.value && !__props.isTyping ? (openBlock(), createElementBlock("time", {
             key: 1,
             datetime: iso.value
-          }, toDisplayString(isJustNowVisible.value ? unref(translate)("flux.justNow") : relative.value), 9, _hoisted_2$d)) : createCommentVNode("", true)
+          }, toDisplayString(isJustNowVisible.value ? unref(translate)("flux.justNow") : relative.value), 9, _hoisted_2$e)) : createCommentVNode("", true)
         ], 2)
       ], 2);
     };
@@ -8061,7 +8061,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$s = ["onClick"];
-const _hoisted_2$c = ["onClick"];
+const _hoisted_2$d = ["onClick"];
 const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "FluxColorSelect",
   props: /* @__PURE__ */ mergeModels({
@@ -8112,7 +8112,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
                 name: "ellipsis-h",
                 size: 16
               })
-            ], 10, _hoisted_2$c)
+            ], 10, _hoisted_2$d)
           ]),
           default: withCtx(({ close: close2 }) => [
             createVNode(_sfc_main$1D, {
@@ -8210,15 +8210,15 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const { "secondaryButtonLabel": _0$7, "secondaryButton": _1$3, "secondaryButtonIcon": _2$1 } = $style$F;
+const { "secondaryButton": _0$7, "secondaryButtonLabel": _1$3, "secondaryButtonIcon": _2$1 } = $style$F;
 const pagination = `pagination`;
-const paginationButton = `pagination-button ${_1$3}`;
+const paginationButton = `pagination-button ${_0$7}`;
 const secondaryButton = `secondary-button`;
 const paginationButtonArrow = `pagination-button-arrow`;
 const paginationButtonCurrent = `pagination-button-current`;
 const paginationButtonSpacer = `pagination-button-spacer`;
 const paginationButtonIcon = `pagination-button-icon ${_2$1}`;
-const paginationButtonLabel = `pagination-button-label ${_0$7}`;
+const paginationButtonLabel = `pagination-button-label ${_1$3}`;
 const paginationBar = `pagination-bar`;
 const paginationBarLimit = `pagination-bar-limit`;
 const paginationBarLimitDisplayingOf = `pagination-bar-limit-displaying-of`;
@@ -8455,12 +8455,12 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const { "basePaneElement": _0$6, "basePaneLoader": _1$2 } = cssModule0$5;
-const table = `table ${_0$6}`;
+const { "basePaneLoader": _0$6, "basePaneElement": _1$2 } = cssModule0$5;
+const table = `table ${_1$2}`;
 const tableBase = `table-base`;
 const tableFill = `table-fill`;
 const tablePagination = `table-pagination`;
-const tableLoader = `table-loader ${_1$2}`;
+const tableLoader = `table-loader ${_0$6}`;
 const tableRow = `table-row`;
 const tableCell = `table-cell`;
 const tableCellContent = `table-cell-content`;
@@ -8529,8 +8529,8 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$q = { key: 0 };
-const _hoisted_2$b = { key: 1 };
-const _hoisted_3$4 = { key: 2 };
+const _hoisted_2$c = { key: 1 };
+const _hoisted_3$5 = { key: 2 };
 const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   __name: "FluxTable",
   props: {
@@ -8561,7 +8561,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
           slots.header ? (openBlock(), createElementBlock("thead", _hoisted_1$q, [
             renderSlot(_ctx.$slots, "header")
           ])) : createCommentVNode("", true),
-          slots.default ? (openBlock(), createElementBlock("tbody", _hoisted_2$b, [
+          slots.default ? (openBlock(), createElementBlock("tbody", _hoisted_2$c, [
             renderSlot(_ctx.$slots, "default"),
             __props.fillColumns ? (openBlock(), createBlock(_sfc_main$1u, {
               key: 0,
@@ -8575,7 +8575,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["class"])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
-          slots.footer ? (openBlock(), createElementBlock("tfoot", _hoisted_3$4, [
+          slots.footer ? (openBlock(), createElementBlock("tfoot", _hoisted_3$5, [
             renderSlot(_ctx.$slots, "footer")
           ])) : createCommentVNode("", true),
           slots.caption ? (openBlock(), createElementBlock("caption", {
@@ -8709,8 +8709,8 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$p = ["id"];
-const _hoisted_2$a = ["aria-labelledby"];
-const _hoisted_3$3 = ["onClick", "onMouseover"];
+const _hoisted_2$b = ["aria-labelledby"];
+const _hoisted_3$4 = ["onClick", "onMouseover"];
 const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "FluxDatePicker",
   props: /* @__PURE__ */ mergeModels({
@@ -8974,13 +8974,13 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
                         onClick: ($event) => setDate(date),
                         onMouseover: ($event) => onDateMouseOver(date),
                         onMouseout: onDateMouseOut
-                      }, toDisplayString(date.toLocaleString({ day: "numeric" })), 43, _hoisted_3$3);
+                      }, toDisplayString(date.toLocaleString({ day: "numeric" })), 43, _hoisted_3$4);
                     }), 128))
                   ], 2))
                 ]),
                 _: 1
               }, 8, ["is-back"])
-            ], 10, _hoisted_2$a)) : viewMode.value === "month" ? (openBlock(), createElementBlock("div", {
+            ], 10, _hoisted_2$b)) : viewMode.value === "month" ? (openBlock(), createElementBlock("div", {
               key: "month",
               class: normalizeClass(unref($style$s).datePickerMonths)
             }, [
@@ -9069,8 +9069,8 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$o = ["id", "width", "height"];
-const _hoisted_2$9 = ["r", "cx", "cy"];
-const _hoisted_3$2 = ["fill"];
+const _hoisted_2$a = ["r", "cx", "cy"];
+const _hoisted_3$3 = ["fill"];
 const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "FluxDotPattern",
   props: {
@@ -9118,7 +9118,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
               r: __props.cr,
               cx: __props.width / 2 - __props.cx,
               cy: __props.height / 2 - __props.cy
-            }, null, 8, _hoisted_2$9)
+            }, null, 8, _hoisted_2$a)
           ], 8, _hoisted_1$o)
         ]),
         createElementVNode("rect", {
@@ -9126,7 +9126,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
           height: "100%",
           "stroke-width": "0",
           fill: `url(#${unref(id)})`
-        }, null, 8, _hoisted_3$2)
+        }, null, 8, _hoisted_3$3)
       ], 2);
     };
   }
@@ -9143,7 +9143,7 @@ const dropZoneBorderAnimation = `drop-zone-border-animation`;
 const dropZoneLoader = `drop-zone-loader`;
 const $style$l = { dropZone, dropZoneContent, avatar, placeholder: placeholder$1, dropZoneActions, dropZoneBorder, isDragging, isDraggingOver, dropZoneBorderAnimation, dropZoneLoader };
 const _hoisted_1$n = ["aria-disabled"];
-const _hoisted_2$8 = ["pathLength"];
+const _hoisted_2$9 = ["pathLength"];
 const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "FluxDropZone",
   props: {
@@ -9261,7 +9261,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               pathLength: pathLength.value
-            }, null, 8, _hoisted_2$8)
+            }, null, 8, _hoisted_2$9)
           ], 2)),
           renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ isDragging: isDragging2.value, isDraggingOver: isDraggingOver2.value, showPicker }))),
           createVNode(unref(_sfc_main$2e), null, {
@@ -9311,7 +9311,7 @@ const basePane$1 = `base-pane`;
 const expandableGroup = `expandable-group`;
 const $style$k = { expandable, expandableOpened, expandableHeader, icon: icon$4, expandableBody, expandableContent, basePane: basePane$1, expandableGroup };
 const _hoisted_1$m = ["id", "aria-controls", "aria-expanded"];
-const _hoisted_2$7 = ["id", "aria-labelledby"];
+const _hoisted_2$8 = ["id", "aria-labelledby"];
 const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "FluxExpandable",
   props: {
@@ -9410,7 +9410,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ label: __props.label, close: close2 })))
                 ], 2)
               ])
-            ], 10, _hoisted_2$7)) : createCommentVNode("", true)
+            ], 10, _hoisted_2$8)) : createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -10712,7 +10712,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$h = ["id", "autofocus", "aria-disabled"];
-const _hoisted_2$6 = ["autocomplete", "autofocus", "disabled", "tabindex", "type", "value"];
+const _hoisted_2$7 = ["autocomplete", "autofocus", "disabled", "tabindex", "type", "value"];
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "FluxFormPinInput",
   props: /* @__PURE__ */ mergeModels({
@@ -10817,7 +10817,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             onInput,
             onKeydown: onKeyDown,
             onPaste
-          }, null, 42, _hoisted_2$6);
+          }, null, 42, _hoisted_2$7);
         }), 128))
       ], 14, _hoisted_1$h);
     };
@@ -12058,8 +12058,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$e = ["id", "width", "height"];
-const _hoisted_2$5 = ["d", "stroke-dasharray"];
-const _hoisted_3$1 = ["fill"];
+const _hoisted_2$6 = ["d", "stroke-dasharray"];
+const _hoisted_3$2 = ["fill"];
 const _hoisted_4 = {
   key: 0,
   style: { "overflow": "visible" }
@@ -12093,7 +12093,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
               d: `M.5 ${__props.height}V.5H${__props.width}`,
               fill: "none",
               "stroke-dasharray": __props.strokeDasharray
-            }, null, 8, _hoisted_2$5)
+            }, null, 8, _hoisted_2$6)
           ], 8, _hoisted_1$e)
         ]),
         createElementVNode("rect", {
@@ -12101,7 +12101,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           height: "100%",
           "stroke-width": "0",
           fill: `url(#${unref(id)})`
-        }, null, 8, _hoisted_3$1),
+        }, null, 8, _hoisted_3$2),
         __props.squares ? (openBlock(), createElementBlock("svg", _hoisted_4, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.squares, ([x2, y2]) => {
             return openBlock(), createElementBlock("rect", {
@@ -12405,7 +12405,7 @@ const _sfc_main$E = defineComponent({
   }
 });
 const _hoisted_1$d = { key: 0 };
-const _hoisted_2$4 = { key: 1 };
+const _hoisted_2$5 = { key: 1 };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "FluxPaneHeader",
   props: {
@@ -12430,7 +12430,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref($style$E).paneHeaderCaption)
         }, [
           __props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$d, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-          __props.subTitle ? (openBlock(), createElementBlock("span", _hoisted_2$4, toDisplayString(__props.subTitle), 1)) : createCommentVNode("", true)
+          __props.subTitle ? (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(__props.subTitle), 1)) : createCommentVNode("", true)
         ], 2)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "after")
       ], 2);
@@ -12845,7 +12845,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$a = { key: 0 };
-const _hoisted_2$3 = { key: 1 };
+const _hoisted_2$4 = { key: 1 };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "FluxPlaceholder",
   props: {
@@ -12882,7 +12882,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref($style$g).placeholderCaption)
         }, [
           __props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$a, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-          __props.message ? (openBlock(), createElementBlock("p", _hoisted_2$3, toDisplayString(__props.message), 1)) : createCommentVNode("", true)
+          __props.message ? (openBlock(), createElementBlock("p", _hoisted_2$4, toDisplayString(__props.message), 1)) : createCommentVNode("", true)
         ], 2),
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -13690,10 +13690,13 @@ const isSuccess = `is-success`;
 const isWarning = `is-warning`;
 const statisticChange = `statistic-change`;
 const statisticData = `statistic-data`;
+const statisticImage = `statistic-image`;
 const statisticHorizontal = `statistic-horizontal statistic`;
 const statisticVertical = `statistic-vertical statistic`;
-const $style$4 = { statistic, isGray, statisticIcon, isPrimary, isDanger, isInfo, isSuccess, isWarning, statisticChange, statisticData, statisticHorizontal, statisticVertical };
-const _hoisted_1$5 = { key: 0 };
+const $style$4 = { statistic, isGray, statisticIcon, isPrimary, isDanger, isInfo, isSuccess, isWarning, statisticChange, statisticData, statisticImage, statisticHorizontal, statisticVertical };
+const _hoisted_1$5 = { key: 1 };
+const _hoisted_2$3 = ["src", "alt"];
+const _hoisted_3$1 = { key: 0 };
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "FluxStatistic",
   props: {
@@ -13703,6 +13706,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     color: { default: "gray" },
     direction: { default: "horizontal" },
     icon: {},
+    imageSrc: {},
+    imageAlt: {},
     label: {},
     value: {}
   },
@@ -13721,14 +13726,21 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         ))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", {
+          __props.icon ? (openBlock(), createElementBlock("div", {
+            key: 0,
             class: normalizeClass(unref($style$4).statisticIcon)
           }, [
             createVNode(_sfc_main$2C, {
               name: __props.icon,
               size: 24
             }, null, 8, ["name"])
-          ], 2),
+          ], 2)) : __props.imageSrc ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+            createElementVNode("img", {
+              class: normalizeClass(unref($style$4).statisticImage),
+              src: __props.imageSrc,
+              alt: __props.imageAlt
+            }, null, 10, _hoisted_2$3)
+          ])) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(unref($style$4).statisticData)
           }, [
@@ -13736,7 +13748,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             createElementVNode("strong", null, toDisplayString(__props.value), 1)
           ], 2),
           __props.changeIcon || __props.changeValue ? (openBlock(), createElementBlock("div", {
-            key: 0,
+            key: 2,
             class: normalizeClass(unref(clsx)(
               unref($style$4).statisticChange,
               __props.changeColor === "gray" && unref($style$4).isGray,
@@ -13747,7 +13759,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               __props.changeColor === "warning" && unref($style$4).isWarning
             ))
           }, [
-            __props.changeValue ? (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(__props.changeValue), 1)) : createCommentVNode("", true),
+            __props.changeValue ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(__props.changeValue), 1)) : createCommentVNode("", true),
             __props.changeIcon ? (openBlock(), createBlock(_sfc_main$2C, {
               key: 1,
               name: __props.changeIcon,
@@ -13767,14 +13779,14 @@ const heart = `heart`;
 const bubble = `bubble`;
 const sparkles = `sparkles`;
 const cssModule0 = { sparklesContainer, sparklesParticles, sparklesContainerActive, heart, bubble, sparkles };
-const { "sparklesContainer": _0$1, "sparklesContainerActive": _1, "sparklesParticles": _2 } = cssModule0;
+const { "sparklesContainerActive": _0$1, "sparklesContainer": _1, "sparklesParticles": _2 } = cssModule0;
 const stepperStep = `stepper-step`;
 const stepperSteps = `stepper-steps`;
-const stepperStepsItem = `stepper-steps-item ${_0$1}`;
+const stepperStepsItem = `stepper-steps-item ${_1}`;
 const icon = `icon`;
-const stepperStepsItemComplete = `stepper-steps-item-complete ${_1} stepper-steps-item ${_0$1}`;
-const stepperStepsItemCurrent = `stepper-steps-item-current stepper-steps-item ${_0$1}`;
-const stepperStepsItemIdle = `stepper-steps-item-idle stepper-steps-item ${_0$1}`;
+const stepperStepsItemComplete = `stepper-steps-item-complete ${_0$1} stepper-steps-item ${_1}`;
+const stepperStepsItemCurrent = `stepper-steps-item-current stepper-steps-item ${_1}`;
+const stepperStepsItemIdle = `stepper-steps-item-idle stepper-steps-item ${_1}`;
 const stepperStepsItemParticles = `stepper-steps-item-particles ${_2}`;
 const $style$3 = { stepperStep, stepperSteps, stepperStepsItem, icon, stepperStepsItemComplete, stepperStepsItemCurrent, stepperStepsItemIdle, stepperStepsItemParticles };
 const _hoisted_1$4 = ["onClick"];