@frollo/frollo-web-ui 8.2.1 → 8.3.0

package/icons/arrows-rotate.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+	<path d="M18.2617 11.2539C17.7625 11.1074 17.2438 11.3943 17.0996 11.891C16.2539 14.8398 13.5391 16.875 10.4648 16.875C7.86602 16.875 5.51172 15.3797 4.35156 13.125H8.27344C8.79102 13.125 9.21094 12.7051 9.21094 12.1875C9.21094 11.6699 8.82812 11.25 8.30859 11.25H2.05859C1.54102 11.25 1.12109 11.6699 1.12109 12.1875V18.4375C1.12109 18.9551 1.54102 19.375 2.05859 19.375C2.57617 19.375 2.99609 18.9551 2.99609 18.4375V14.4492C4.55078 17.0469 7.37891 18.75 10.4648 18.75C14.332 18.75 17.7852 16.1598 18.8672 12.4492C19.0469 11.918 18.7578 11.4336 18.2617 11.2539ZM18.9375 0.625C18.4219 0.625 18 1.04492 18 1.5625V5.55078C16.4492 2.95117 13.6172 1.25 10.5 1.25C6.63281 1.25 3.17695 3.84023 2.09805 7.55078C1.95273 8.04688 2.23828 8.56641 2.73516 8.71094C3.23672 8.85863 3.7543 8.56934 3.89727 8.07383C4.74609 5.16016 7.46094 3.125 10.5 3.125C13.0988 3.125 15.4531 4.62031 16.6133 6.875H12.6875C12.1719 6.875 11.75 7.29688 11.75 7.8125C11.75 8.32812 12.1719 8.75 12.6875 8.75H18.9375C19.4551 8.75 19.875 8.33008 19.875 7.8125V1.5625C19.875 1.04492 19.457 0.625 18.9375 0.625Z" />
+</svg>
+	

package/icons/cloud-arrow-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 48" fill="currentColor">
+  <path d="M28.9406 15.4406C29.5219 14.85 30.4781 14.85 31.0594 15.4406L38.5594 22.9406C39.15 23.5219 39.15 24.4781 38.5594 25.0594C37.9781 25.65 37.0219 25.65 36.4406 25.0594L31.5 20.1188V34.5C31.5 35.325 30.825 36 30 36C29.175 36 28.5 35.325 28.5 34.5V20.1188L23.5594 25.0594C22.9781 25.65 22.0219 25.65 21.4406 25.0594C20.85 24.4781 20.85 23.5219 21.4406 22.9406L28.9406 15.4406ZM25.5 3C31.0781 3 36.0094 5.77031 39 10.0125C40.3594 9.36281 41.8875 9 43.5 9C49.3031 9 54 13.6969 54 19.5C54 20.5031 53.8594 21.3844 53.5969 22.3875C57.4031 24.3938 60 28.3969 60 33C60 39.6281 54.6281 45 48 45H13.5C6.04406 45 0 38.9531 0 31.5C0 25.6125 3.76406 20.6156 9.01594 18.7594C9.40312 9.99375 16.6313 3 25.5 3ZM25.5 6C18.2437 6 12.3281 11.7188 12.0094 18.8906C11.9625 20.1187 11.1656 21.1031 10.0125 21.5906C5.92313 23.0344 3 26.925 3 31.5C3 37.3031 7.70062 42 13.5 42H48C52.9688 42 57 37.9688 57 33C57 29.55 55.0594 26.55 52.2 25.0406C50.9437 24.2906 50.325 22.9219 50.7094 21.4781C50.8969 20.9062 51 20.2219 51 19.5C51 15.3562 47.6437 12 43.5 12C42.3469 12 41.2594 12.2625 40.2844 12.7219C38.9719 13.35 37.3875 12.9281 36.5437 11.7375C34.0969 8.26125 30.0656 6 25.5 6Z"/>
+</svg>

package/icons/guide.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 440 440" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g style="mix-blend-mode:multiply">
+		<circle cx="220" cy="220" r="146.5" stroke="#C6C7D5"/>
+		<rect x="72.25" y="0.249817" width="0.5" height="439.5" fill="#C6C7D5" stroke="#C6C7D5" stroke-width="0.5"/>
+		<rect x="0.25" y="72.2498" width="439.5" height="0.5" fill="#C6C7D5" stroke="#C6C7D5" stroke-width="0.5"/>
+		<rect x="0.25" y="367.25" width="439.5" height="0.5" fill="#C6C7D5" stroke="#C6C7D5" stroke-width="0.5"/>
+		<rect x="367.25" y="0.249817" width="0.5" height="439.5" fill="#C6C7D5" stroke="#C6C7D5" stroke-width="0.5"/>
+		<path d="M0 440C171.831 268.169 268.169 171.831 440 -0.000183105L0 440Z" stroke="#C6C7D5"/>
+		<path d="M2.6226e-05 -0.000202338C171.831 171.831 268.169 268.169 440 440L2.6226e-05 -0.000202338Z" stroke="#C6C7D5"/>
+	</g>
+</svg>
+	

package/icons/index.ts

@@ -40,6 +40,10 @@ import CalendarDaySvg from './calendar-day.svg';
 import EllipsisSvg from './ellipsis.svg';
 import ChartLineUpSvg from './chart-line-up.svg';
 import SackDollarSvg from './sack-dollar.svg';
+import MountainFlagSvg from './mountain-flag.svg';
+import CloudArrowUpSvg from './cloud-arrow-up.svg';
+import GuideSvg from './guide.svg';
+import ArrowsRotateSvg from './arrows-rotate.svg';
 
 export {
   ViewSvg,
@@ -83,5 +87,9 @@ export {
   CalendarDaySvg,
   EllipsisSvg,
   ChartLineUpSvg,
-  SackDollarSvg
+  SackDollarSvg,
+  MountainFlagSvg,
+  CloudArrowUpSvg,
+  GuideSvg,
+  ArrowsRotateSvg
 };

package/icons/mountain-flag.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 95" fill="currentColor">
+  <path d="M9 93L31.5337 52.4713M80 93L64.5708 66.8M64.5708 66.8L74.43 50.3008C75.5929 48.3547 78.4113 48.3522 79.5777 50.2962L98 81M64.5708 66.8L58.8901 57.1763M2 93H25M109 93H41M31.5337 52.4713L41.379 35.5143C42.5412 33.5126 45.4365 33.5254 46.581 35.5373L58.8901 57.1763M31.5337 52.4713L37.831 57.1344C38.5279 57.6504 39.478 57.6586 40.1837 57.1545L45.1799 53.5858C45.6957 53.2173 46.3557 53.1152 46.9588 53.3106L58.8901 57.1763" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M44 33V19M44 2V4M44 4H65.0337L60.393 10.4534C60.1554 10.7839 60.1418 11.2253 60.3585 11.5698L65.0337 19H44M44 4V19" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/index.d.ts

@@ -25,7 +25,7 @@ declare interface FwInputProps {
     required?: boolean;
 }
 
-declare const _default$n: vue.DefineComponent<{
+declare const _default$o: vue.DefineComponent<{
     /**
      * The input v-model
      */
@@ -246,7 +246,7 @@ declare const _default$n: vue.DefineComponent<{
     centerAlignInput: boolean;
 }, {}>;
 
-declare const _default$m: vue.DefineComponent<{
+declare const _default$n: vue.DefineComponent<{
     /**
      * The name of the checkbox input field.
      * Multiple checkboxes can use the same name with a unique value.
@@ -370,7 +370,7 @@ declare interface FwDropdownProps {
     required?: boolean;
 }
 
-declare const _default$l: vue.DefineComponent<{
+declare const _default$m: vue.DefineComponent<{
     /**
      * The select v-model
      */
@@ -522,7 +522,7 @@ declare const _default$l: vue.DefineComponent<{
     required: boolean;
 }, {}>;
 
-declare const _default$k: vue.DefineComponent<{
+declare const _default$l: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -632,7 +632,7 @@ declare interface FwButtonProps {
     external?: boolean;
 }
 
-declare const _default$j: vue.DefineComponent<{
+declare const _default$k: vue.DefineComponent<{
     /**
      * The label text of the button.
      * Overrides the default slot content.
@@ -828,7 +828,7 @@ declare interface NavMenuItem {
     onClick?: () => void;
 }
 
-declare const _default$i: vue.DefineComponent<{
+declare const _default$j: vue.DefineComponent<{
     /**
      * An array of menu items
      * `{ to?: string | object; href?: string; label: string; }`
@@ -891,7 +891,7 @@ declare interface FwTabsProps {
     modelValue: number;
 }
 
-declare const _default$h: vue.DefineComponent<{
+declare const _default$i: vue.DefineComponent<{
     /**
      * The active tab v-model
      */
@@ -914,7 +914,7 @@ declare const _default$h: vue.DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 
-declare const _default$g: vue.DefineComponent<{
+declare const _default$h: vue.DefineComponent<{
     /**
      * The label of the tab component used as the button panel label
      */
@@ -938,7 +938,7 @@ declare const _default$g: vue.DefineComponent<{
     };
 }>>, {}, {}>;
 
-declare const _default$f: vue.DefineComponent<{
+declare const _default$g: vue.DefineComponent<{
     /**
      * The modal's v-model. Controls the visibility of the modal.
      */
@@ -1171,7 +1171,7 @@ declare interface ProgressBarStep {
     subSteps: number;
 }
 
-declare const _default$e: vue.DefineComponent<{
+declare const _default$f: vue.DefineComponent<{
     /**
      * An array of menu progress steps.
      * `{ label: string; position: number; subSteps: number; }`
@@ -1419,6 +1419,15 @@ interface FwPopoverProps {
     textAlign?: 'center' | 'left' | 'right';
 }
 
+declare interface FwMediaPickerProps {
+    acceptedFileTypes?: string;
+    maxFileSize?: number;
+    imageUrl?: string;
+    title?: string;
+    uploadHeaderText?: string;
+    editHeaderText?: string;
+}
+
 declare const __default__$6: vue.DefineComponent<{
     /**
      * The label text of the tag.
@@ -1591,9 +1600,9 @@ declare const __default__$5: vue.DefineComponent<{
     enablePagination: boolean;
 }, {}>;
 
-declare const _default$d: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const _default$e: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
-declare const _default$c: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const _default$d: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const __default__$4: vue.DefineComponent<{
     /**
@@ -1723,7 +1732,7 @@ declare const __default__$4: vue.DefineComponent<{
     borderStyle: string;
 }, {}>;
 
-declare const _default$b: vue.DefineComponent<{
+declare const _default$c: vue.DefineComponent<{
     /**
      * The src attribute of the image
      */
@@ -1825,11 +1834,11 @@ declare const _default$b: vue.DefineComponent<{
     enableErrors: boolean;
 }, {}>;
 
-declare const _default$a: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const _default$b: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
-declare const _default$9: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const _default$a: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
-declare const _default$8: vue.DefineComponent<{
+declare const _default$9: vue.DefineComponent<{
     columns: {
         type: NumberConstructor;
         default: number;
@@ -1854,7 +1863,7 @@ declare const _default$8: vue.DefineComponent<{
     rows: number;
 }, {}>;
 
-declare const _default$7: vue.DefineComponent<{
+declare const _default$8: vue.DefineComponent<{
     /**
      * The toast's v-model. Controls the visibility of the toast.
      */
@@ -1973,7 +1982,7 @@ declare const _default$7: vue.DefineComponent<{
     timeout: number;
 }, {}>;
 
-declare const _default$6: vue.DefineComponent<{
+declare const _default$7: vue.DefineComponent<{
     /**
      * The transaction title of the card
      */
@@ -2031,7 +2040,7 @@ declare const _default$6: vue.DefineComponent<{
     };
 }>>, {}, {}>;
 
-declare const _default$5: vue.DefineComponent<{
+declare const _default$6: vue.DefineComponent<{
     /**
      * The transaction title of the chart
      */
@@ -2112,7 +2121,7 @@ declare const _default$5: vue.DefineComponent<{
     };
 }>>, {}, {}>;
 
-declare const _default$4: vue.DefineComponent<{
+declare const _default$5: vue.DefineComponent<{
     /**
      * Controls the sidebar menu open/close state
      */
@@ -2198,7 +2207,7 @@ declare const _default$4: vue.DefineComponent<{
     closedWidth: string;
 }, {}>;
 
-declare const _default$3: vue.DefineComponent<{
+declare const _default$4: vue.DefineComponent<{
     /**
      * The drawer's v-model. Controls the visibility of the drawer.
      */
@@ -2361,7 +2370,7 @@ declare const _default$3: vue.DefineComponent<{
     confirmButtonType: ButtonVariantName;
 }, {}>;
 
-declare const _default$2: vue.DefineComponent<{
+declare const _default$3: vue.DefineComponent<{
     /**
      * The header heading of the list.
      */
@@ -2862,7 +2871,7 @@ declare const __default__$2: vue.DefineComponent<{
     showArrow: boolean;
 }, {}>;
 
-declare const _default$1: vue.DefineComponent<{
+declare const _default$2: vue.DefineComponent<{
     /**
      * The available periods to be chosen in months.
      */
@@ -2902,6 +2911,118 @@ declare const _default$1: vue.DefineComponent<{
     size: ButtonSize;
 }, {}>;
 
+declare const _default$1: vue.DefineComponent<{
+    /**
+     * The accepted file types for the media picker
+     */
+    acceptedFileTypes: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The maximum file size in bytes
+     */
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The title of the picker tile
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * The image URL to display in the media picker
+     */
+    imageUrl: {
+        type: StringConstructor;
+    };
+    /**
+     * The header text for the upload modal
+     */
+    uploadHeaderText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The header text for the edit modal
+     */
+    editHeaderText: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    previewImageUrl: vue.ComputedRef<string | undefined>;
+    fileInput: vue.Ref<HTMLInputElement | null>;
+    editorCanvas: vue.Ref<HTMLCanvasElement | null>;
+    isSelectMediaModalOpen: vue.Ref<boolean>;
+    isEditMediaModalOpen: vue.Ref<boolean>;
+    acceptedFileTypesText: vue.ComputedRef<string>;
+    maxFileSizeText: vue.ComputedRef<string>;
+    openFilePicker: () => void | undefined;
+    fileSelected: (event: Event) => void;
+    dragging: vue.Ref<boolean>;
+    loading: vue.Ref<boolean>;
+    dragDropFile: (event: DragEvent) => void;
+    isInvalidFile: vue.ComputedRef<boolean | null>;
+    showEditor: () => void;
+    change: () => void;
+    reset: () => void;
+    save: () => Promise<void>;
+    startEditImage: ({ button, offsetX, offsetY }: MouseEvent) => void;
+    stopEditImage: () => void;
+    editImage: ({ offsetX, offsetY }: MouseEvent) => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "selected"[], "selected", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The accepted file types for the media picker
+     */
+    acceptedFileTypes: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The maximum file size in bytes
+     */
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The title of the picker tile
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * The image URL to display in the media picker
+     */
+    imageUrl: {
+        type: StringConstructor;
+    };
+    /**
+     * The header text for the upload modal
+     */
+    uploadHeaderText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The header text for the edit modal
+     */
+    editHeaderText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onSelected?: ((...args: any[]) => any) | undefined;
+}, {
+    acceptedFileTypes: string;
+    maxFileSize: number;
+    uploadHeaderText: string;
+    editHeaderText: string;
+}, {}>;
+
 declare const __default__$1: vue.DefineComponent<{
     /**
      * The animation-iteration-count CSS property of the pulse animation.
@@ -2974,4 +3095,4 @@ declare const install: Exclude<Plugin['install'], undefined>;
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { type ButtonAnimation, type ButtonDefinition, type ButtonDefinitionList, type ButtonSize, type ButtonSizes, type ButtonTypeAttribute, type ButtonVariantName, __default__$4 as FwAccordion, type FwAccordionProps, _default$5 as FwBarChart, type FwBarChartProps, type FwBarGraphData, _default$j as FwButton, type FwButtonProps, _default$k as FwCard, type FwCardProps, _default$m as FwCheckbox, type FwCheckboxProps, __default__$3 as FwDatePicker, type FwDatePickerProps, _default$3 as FwDrawer, type FwDrawerProps, _default$l as FwDropdown, type FwDropdownOption, type FwDropdownProps, __default__$1 as FwEmailPulse, _default$b as FwImage, type FwImageProps, _default$n as FwInput, type FwInputProps, type FwInputType, _default$a as FwLoadingBar, _default$9 as FwLoadingCard, _default as FwLoadingSpinner, _default$8 as FwLoadingTable, _default$f as FwModal, type FwModalProps, _default$i as FwNavigationMenu, _default$1 as FwPeriodSelector, __default__$2 as FwPopover, type FwPopoverProps, _default$e as FwProgressBar, _default$2 as FwProviderList, type FwProviderListItem, type FwProviderListProps, _default$4 as FwSidebarMenu, type FwSidebarMenuItem, __default__ as FwSuccessPulse, _default$g as FwTab, __default__$5 as FwTable, type FwTableFormatFunction, _default$d as FwTableHead, type FwTableItem, type FwTableItemOptions, type FwTableProps, _default$c as FwTableRow, type FwTableSort, _default$h as FwTabs, type FwTabsProps, __default__$6 as FwTag, type FwTagProps, _default$7 as FwToast, type FwToastProps, _default$6 as FwTransactionsCard, type FwTransactionsCardProps, type ModalServiceProps, type NavMenuItem, type ProgressBarStep, type TabsState, type TagDefinition, type TagDefinitionList, type TagSize, type TagSizes, type TagVariantName, type ToastPosition, type ToastServiceProps, type ToastType, type ToastTypes, install as default, modalService, toastService };
+export { type ButtonAnimation, type ButtonDefinition, type ButtonDefinitionList, type ButtonSize, type ButtonSizes, type ButtonTypeAttribute, type ButtonVariantName, __default__$4 as FwAccordion, type FwAccordionProps, _default$6 as FwBarChart, type FwBarChartProps, type FwBarGraphData, _default$k as FwButton, type FwButtonProps, _default$l as FwCard, type FwCardProps, _default$n as FwCheckbox, type FwCheckboxProps, __default__$3 as FwDatePicker, type FwDatePickerProps, _default$4 as FwDrawer, type FwDrawerProps, _default$m as FwDropdown, type FwDropdownOption, type FwDropdownProps, __default__$1 as FwEmailPulse, _default$c as FwImage, type FwImageProps, _default$o as FwInput, type FwInputProps, type FwInputType, _default$b as FwLoadingBar, _default$a as FwLoadingCard, _default as FwLoadingSpinner, _default$9 as FwLoadingTable, _default$1 as FwMediaPicker, type FwMediaPickerProps, _default$g as FwModal, type FwModalProps, _default$j as FwNavigationMenu, _default$2 as FwPeriodSelector, __default__$2 as FwPopover, type FwPopoverProps, _default$f as FwProgressBar, _default$3 as FwProviderList, type FwProviderListItem, type FwProviderListProps, _default$5 as FwSidebarMenu, type FwSidebarMenuItem, __default__ as FwSuccessPulse, _default$h as FwTab, __default__$5 as FwTable, type FwTableFormatFunction, _default$e as FwTableHead, type FwTableItem, type FwTableItemOptions, type FwTableProps, _default$d as FwTableRow, type FwTableSort, _default$i as FwTabs, type FwTabsProps, __default__$6 as FwTag, type FwTagProps, _default$8 as FwToast, type FwToastProps, _default$7 as FwTransactionsCard, type FwTransactionsCardProps, type ModalServiceProps, type NavMenuItem, type ProgressBarStep, type TabsState, type TagDefinition, type TagDefinitionList, type TagSize, type TagSizes, type TagVariantName, type ToastPosition, type ToastServiceProps, type ToastType, type ToastTypes, install as default, modalService, toastService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",

package/types/components/fw-media-picker/fw-media-picker.vue.d.ts

@@ -0,0 +1,112 @@
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The accepted file types for the media picker
+     */
+    acceptedFileTypes: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The maximum file size in bytes
+     */
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The title of the picker tile
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * The image URL to display in the media picker
+     */
+    imageUrl: {
+        type: StringConstructor;
+    };
+    /**
+     * The header text for the upload modal
+     */
+    uploadHeaderText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The header text for the edit modal
+     */
+    editHeaderText: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    previewImageUrl: import("vue").ComputedRef<string | undefined>;
+    fileInput: import("vue").Ref<HTMLInputElement | null>;
+    editorCanvas: import("vue").Ref<HTMLCanvasElement | null>;
+    isSelectMediaModalOpen: import("vue").Ref<boolean>;
+    isEditMediaModalOpen: import("vue").Ref<boolean>;
+    acceptedFileTypesText: import("vue").ComputedRef<string>;
+    maxFileSizeText: import("vue").ComputedRef<string>;
+    openFilePicker: () => void | undefined;
+    fileSelected: (event: Event) => void;
+    dragging: import("vue").Ref<boolean>;
+    loading: import("vue").Ref<boolean>;
+    dragDropFile: (event: DragEvent) => void;
+    isInvalidFile: import("vue").ComputedRef<boolean | null>;
+    showEditor: () => void;
+    change: () => void;
+    reset: () => void;
+    save: () => Promise<void>;
+    startEditImage: ({ button, offsetX, offsetY }: MouseEvent) => void;
+    stopEditImage: () => void;
+    editImage: ({ offsetX, offsetY }: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "selected"[], "selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The accepted file types for the media picker
+     */
+    acceptedFileTypes: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The maximum file size in bytes
+     */
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The title of the picker tile
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * The image URL to display in the media picker
+     */
+    imageUrl: {
+        type: StringConstructor;
+    };
+    /**
+     * The header text for the upload modal
+     */
+    uploadHeaderText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The header text for the edit modal
+     */
+    editHeaderText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onSelected?: ((...args: any[]) => any) | undefined;
+}, {
+    acceptedFileTypes: string;
+    maxFileSize: number;
+    uploadHeaderText: string;
+    editHeaderText: string;
+}, {}>;
+export default _default;

package/types/components/fw-media-picker/index.d.ts

@@ -0,0 +1,2 @@
+import FwMediaPicker from './fw-media-picker.vue';
+export { FwMediaPicker };

package/types/components/fw-media-picker/index.types.d.ts

@@ -0,0 +1,8 @@
+export declare interface FwMediaPickerProps {
+    acceptedFileTypes?: string;
+    maxFileSize?: number;
+    imageUrl?: string;
+    title?: string;
+    uploadHeaderText?: string;
+    editHeaderText?: string;
+}

package/types/components/index.d.ts

@@ -22,4 +22,5 @@ export * from './fw-provider-list';
 export * from './fw-date-picker';
 export * from './fw-popover';
 export * from './fw-period-selector';
+export * from './fw-media-picker';
 export * from './fw-animations';

package/types/components/index.types.d.ts

@@ -19,3 +19,4 @@ export * from '../components/fw-provider-list/index.types';
 export * from '../components/fw-date-picker/index.types';
 export * from '../components/fw-popover/index.types';
 export * from '../components/fw-tabs/index.types';
+export * from '../components/fw-media-picker/index.types';

package/types/icons/index.d.ts

@@ -40,4 +40,8 @@ import CalendarDaySvg from './calendar-day.svg';
 import EllipsisSvg from './ellipsis.svg';
 import ChartLineUpSvg from './chart-line-up.svg';
 import SackDollarSvg from './sack-dollar.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg, CheckSvg, ChevronUpSvg, ChevronDownSvg, ChevronRightSvg, ChevronLeftSvg, ErrorFilledSvg, LightBulbSvg, LandmarkSvg, CoinsSvg, CaretDownSvg, SortLightSvg, PlusSvg, UserSvg, LoadingSvg, BullseyeSvg, SolidCheckSvg, SolidXMarkSvg, ArrowSortSvg, ArrowDownSvg, SearchSvg, XMarkSvg, PenSvg, CalendarSvg, CalendarDaySvg, EllipsisSvg, ChartLineUpSvg, SackDollarSvg };
+import MountainFlagSvg from './mountain-flag.svg';
+import CloudArrowUpSvg from './cloud-arrow-up.svg';
+import GuideSvg from './guide.svg';
+import ArrowsRotateSvg from './arrows-rotate.svg';
+export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg, CheckSvg, ChevronUpSvg, ChevronDownSvg, ChevronRightSvg, ChevronLeftSvg, ErrorFilledSvg, LightBulbSvg, LandmarkSvg, CoinsSvg, CaretDownSvg, SortLightSvg, PlusSvg, UserSvg, LoadingSvg, BullseyeSvg, SolidCheckSvg, SolidXMarkSvg, ArrowSortSvg, ArrowDownSvg, SearchSvg, XMarkSvg, PenSvg, CalendarSvg, CalendarDaySvg, EllipsisSvg, ChartLineUpSvg, SackDollarSvg, MountainFlagSvg, CloudArrowUpSvg, GuideSvg, ArrowsRotateSvg };