@frontify/guideline-blocks-settings 0.36.2 → 0.36.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/BlockInjectButton/BlockInjectButton.es.js +35 -35
  2. package/dist/components/BlockInjectButton/BlockInjectButton.es.js.map +1 -1
  3. package/dist/index.cjs.js +3 -3
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.umd.js +3 -3
  6. package/dist/index.umd.js.map +1 -1
  7. package/package.json +3 -3
package/dist/components/BlockInjectButton/BlockInjectButton.es.js CHANGED
@@ -1,54 +1,54 @@
1
- import { jsxs as c, jsx as e, Fragment as z } from "react/jsx-runtime";
2
- import { FileExtensionSets as O } from "@frontify/app-bridge";
3
- import { LoadingCircle as X, IconExclamationMarkTriangle as A, Flyout as F, ActionMenu as R, MenuItemContentSize as I, IconArrowCircleUp20 as T, IconImageStack20 as V } from "@frontify/fondue";
4
- import { useState as g, useRef as P } from "react";
5
- import { joinClassNames as Y } from "../../utilities/react/joinClassNames.es.js";
6
- const H = ({
1
+ import { jsxs as w, jsx as e, Fragment as R } from "react/jsx-runtime";
2
+ import { FileExtensionSets as T } from "@frontify/app-bridge";
3
+ import { LoadingCircle as V, IconExclamationMarkTriangle as P, Flyout as Y, ActionMenu as K, MenuItemContentSize as N, IconArrowCircleUp20 as U, IconImageStack20 as W } from "@frontify/fondue";
4
+ import { useState as g, useRef as q } from "react";
5
+ import { joinClassNames as D } from "../../utilities/react/joinClassNames.es.js";
6
+ const _ = ({
7
7
  onDrop: s,
8
8
  label: u,
9
9
  icon: p,
10
10
  secondaryLabel: f,
11
11
  isLoading: l,
12
- fillParentContainer: N,
12
+ fillParentContainer: j,
13
13
  onAssetChooseClick: x,
14
14
  onUploadClick: k,
15
- withMenu: j = !0,
15
+ withMenu: M = !0,
16
16
  onClick: m,
17
17
  validFileType: v,
18
- verticalLayout: M
18
+ verticalLayout: E
19
19
  }) => {
20
- const [d, b] = g(!1), [i, w] = g(), h = P(null), [o, a] = g(void 0), S = (t) => {
21
- if (t.preventDefault(), b(!1), !B(t.dataTransfer.files)) {
20
+ const [d, b] = g(!1), [i, c] = g(), h = q(null), [o, a] = g(void 0), S = (t) => {
21
+ if (t.preventDefault(), b(!1), !y(t.dataTransfer.files)) {
22
22
  a("Invalid"), setTimeout(() => {
23
23
  a(void 0);
24
24
  }, 1e3);
25
25
  return;
26
26
  }
27
27
  s == null || s(t.dataTransfer.files);
28
- }, B = (t) => {
28
+ }, y = (t) => {
29
29
  if (!v)
30
30
  return !0;
31
31
  for (let r = 0; r < t.length; r++) {
32
32
  const n = t[r].name.split(".").pop() ?? "";
33
- if (!O[v].includes(n))
33
+ if (!T[v].includes(n))
34
34
  return !1;
35
35
  }
36
36
  return !0;
37
- }, C = (t) => {
37
+ }, B = (t) => {
38
38
  if (!h.current || l)
39
39
  return;
40
- const { left: r, top: n } = h.current.getBoundingClientRect(), E = t.clientX - r, y = t.clientY - n;
41
- w([E, y]);
40
+ const { clientX: r, clientY: n } = t, I = r === 0 && n === 0, { left: C, top: z, width: O, height: X } = h.current.getBoundingClientRect(), A = I ? O / 2 : r - C, F = I ? X / 2 : n - z;
41
+ c([A, F]);
42
42
  };
43
- return /* @__PURE__ */ c(
43
+ return /* @__PURE__ */ w(
44
44
  "button",
45
45
  {
46
46
  ref: h,
47
47
  "data-test-id": "block-inject-button",
48
- className: Y([
48
+ className: D([
49
49
  "tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
50
- M ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr",
51
- N ? "tw-h-full" : "tw-h-[72px]",
50
+ E ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr",
51
+ j ? "tw-h-full" : "tw-h-[72px]",
52
52
  d && !l ? "tw-border-dashed" : "tw-border-solid",
53
53
  i && "tw-bg-blank-state-pressed-inverse",
54
54
  d && "tw-bg-blank-state-weak-inverse",
@@ -67,15 +67,15 @@ const H = ({
67
67
  } : void 0,
68
68
  onDrop: s ? S : void 0,
69
69
  onClick: (t) => {
70
- j && C(t), m == null || m();
70
+ M && B(t), m == null || m();
71
71
  },
72
72
  children: [
73
- l ? /* @__PURE__ */ e(X, {}) : o ? /* @__PURE__ */ c("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
74
- /* @__PURE__ */ e(A, {}),
73
+ l ? /* @__PURE__ */ e(V, {}) : o ? /* @__PURE__ */ w("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
74
+ /* @__PURE__ */ e(P, {}),
75
75
  o
76
- ] }) : /* @__PURE__ */ c(z, { children: [
76
+ ] }) : /* @__PURE__ */ w(R, { children: [
77
77
  p && /* @__PURE__ */ e("div", { children: p }),
78
- (u || f) && /* @__PURE__ */ c("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
78
+ (u || f) && /* @__PURE__ */ w("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
79
79
  u && /* @__PURE__ */ e("div", { className: "tw-font-medium", children: u }),
80
80
  f && /* @__PURE__ */ e("div", { className: "tw-font-normal", children: f })
81
81
  ] })
@@ -89,16 +89,16 @@ const H = ({
89
89
  top: i[1]
90
90
  },
91
91
  children: /* @__PURE__ */ e(
92
- F,
92
+ Y,
93
93
  {
94
- onOpenChange: (t) => !t && w(void 0),
94
+ onOpenChange: (t) => !t && c(void 0),
95
95
  isOpen: !0,
96
96
  fitContent: !0,
97
97
  hug: !1,
98
98
  legacyFooter: !1,
99
99
  trigger: /* @__PURE__ */ e("div", {}),
100
100
  children: /* @__PURE__ */ e(
101
- R,
101
+ K,
102
102
  {
103
103
  menuBlocks: [
104
104
  {
@@ -107,25 +107,25 @@ const H = ({
107
107
  ...k ? [
108
108
  {
109
109
  id: "upload",
110
- size: I.XSmall,
110
+ size: N.XSmall,
111
111
  title: "Upload asset",
112
112
  onClick: () => {
113
- k(), w(void 0);
113
+ k(), c(void 0);
114
114
  },
115
115
  initialValue: !0,
116
- decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(T, {}) })
116
+ decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(U, {}) })
117
117
  }
118
118
  ] : [],
119
119
  ...x ? [
120
120
  {
121
121
  id: "asset",
122
- size: I.XSmall,
122
+ size: N.XSmall,
123
123
  title: "Browse asset",
124
124
  onClick: () => {
125
- x(), w(void 0);
125
+ x(), c(void 0);
126
126
  },
127
127
  initialValue: !0,
128
- decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(V, {}) })
128
+ decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(W, {}) })
129
129
  }
130
130
  ] : []
131
131
  ]
@@ -142,6 +142,6 @@ const H = ({
142
142
  );
143
143
  };
144
144
  export {
145
- H as BlockInjectButton
145
+ _ as BlockInjectButton
146
146
  };
147
147
  //# sourceMappingURL=BlockInjectButton.es.js.map
package/dist/components/BlockInjectButton/BlockInjectButton.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport {\n ActionMenu,\n Flyout,\n IconArrowCircleUp20,\n IconExclamationMarkTriangle,\n IconImageStack20,\n LoadingCircle,\n MenuItemContentSize,\n} from '@frontify/fondue';\nimport { type DragEventHandler, type MouseEventHandler, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n onDrop,\n label,\n icon,\n secondaryLabel,\n isLoading,\n fillParentContainer,\n onAssetChooseClick,\n onUploadClick,\n withMenu = true,\n onClick,\n validFileType,\n verticalLayout,\n}: BlockInjectButtonProps) => {\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n setIsDraggingOver(false);\n if (!isValidAsset(event.dataTransfer.files)) {\n setErrorMsg('Invalid');\n setTimeout(() => {\n setErrorMsg(undefined);\n }, 1000);\n return;\n }\n onDrop?.(event.dataTransfer.files);\n };\n\n const isValidAsset = (files: FileList) => {\n if (!validFileType) {\n return true;\n }\n for (let i = 0; i < files.length; i++) {\n const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n return false;\n }\n }\n return true;\n };\n\n const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!buttonRef.current || isLoading) {\n return;\n }\n const { left, top } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = event.clientX - left;\n const YInsideComponent = event.clientY - top;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading || menuPosition || isDraggingOver || errorMsg\n ? ''\n : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver || !!menuPosition) && !errorMsg\n ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n withMenu && openMenu(event);\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label || secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout\n onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}\n isOpen={true}\n fitContent\n hug={false}\n legacyFooter={false}\n trigger={<div />}\n >\n <ActionMenu\n menuBlocks={[\n {\n id: 'menu',\n menuItems: [\n ...(onUploadClick\n ? [\n {\n id: 'upload',\n size: MenuItemContentSize.XSmall,\n title: 'Upload asset',\n onClick: () => {\n onUploadClick();\n setMenuPosition(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconArrowCircleUp20 />\n </div>\n ),\n },\n ]\n : []),\n ...(onAssetChooseClick\n ? [\n {\n id: 'asset',\n size: MenuItemContentSize.XSmall,\n title: 'Browse asset',\n onClick: () => {\n onAssetChooseClick();\n setMenuPosition(undefined);\n },\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconImageStack20 />\n </div>\n ),\n },\n ]\n : []),\n ],\n },\n ]}\n />\n </Flyout>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","left","top","XInsideComponent","YInsideComponent","jsxs","joinClassNames","item","_a","LoadingCircle","jsx","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20"],"mappings":"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"}
1
+ {"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport {\n ActionMenu,\n Flyout,\n IconArrowCircleUp20,\n IconExclamationMarkTriangle,\n IconImageStack20,\n LoadingCircle,\n MenuItemContentSize,\n} from '@frontify/fondue';\nimport { type DragEventHandler, type MouseEventHandler, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n onDrop,\n label,\n icon,\n secondaryLabel,\n isLoading,\n fillParentContainer,\n onAssetChooseClick,\n onUploadClick,\n withMenu = true,\n onClick,\n validFileType,\n verticalLayout,\n}: BlockInjectButtonProps) => {\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n setIsDraggingOver(false);\n if (!isValidAsset(event.dataTransfer.files)) {\n setErrorMsg('Invalid');\n setTimeout(() => {\n setErrorMsg(undefined);\n }, 1000);\n return;\n }\n onDrop?.(event.dataTransfer.files);\n };\n\n const isValidAsset = (files: FileList) => {\n if (!validFileType) {\n return true;\n }\n for (let i = 0; i < files.length; i++) {\n const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n return false;\n }\n }\n return true;\n };\n\n const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!buttonRef.current || isLoading) {\n return;\n }\n const { clientX, clientY } = event;\n const isKeyboardEvent = clientX === 0 && clientY === 0;\n const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading || menuPosition || isDraggingOver || errorMsg\n ? ''\n : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver || !!menuPosition) && !errorMsg\n ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n withMenu && openMenu(event);\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label || secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout\n onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}\n isOpen={true}\n fitContent\n hug={false}\n legacyFooter={false}\n trigger={<div />}\n >\n <ActionMenu\n menuBlocks={[\n {\n id: 'menu',\n menuItems: [\n ...(onUploadClick\n ? [\n {\n id: 'upload',\n size: MenuItemContentSize.XSmall,\n title: 'Upload asset',\n onClick: () => {\n onUploadClick();\n setMenuPosition(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconArrowCircleUp20 />\n </div>\n ),\n },\n ]\n : []),\n ...(onAssetChooseClick\n ? [\n {\n id: 'asset',\n size: MenuItemContentSize.XSmall,\n title: 'Browse asset',\n onClick: () => {\n onAssetChooseClick();\n setMenuPosition(undefined);\n },\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconImageStack20 />\n </div>\n ),\n },\n ]\n : []),\n ],\n },\n ]}\n />\n </Flyout>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","jsxs","joinClassNames","item","_a","LoadingCircle","jsx","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20"],"mappings":"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"}