@bynder/compact-view 5.2.0 → 5.2.2

package/ColorPicker.js

@@ -0,0 +1,66 @@
+import { jsxs as w, jsx as o, Fragment as _ } from "react/jsx-runtime";
+import { useState as v, useRef as b } from "react";
+import { useLayer as y, mergeRefs as k } from "react-laag";
+import u from "./styled-components.browser.esm.js";
+import { token as r } from "./token.js";
+import { useId as I } from "./useId.js";
+import { useKeyDown as P } from "./useKeyDown.js";
+import { getFirstShadowElement as E, isInShadow as O } from "./shadowdom.js";
+import { ColorPickerSolid as s } from "./ColorPickerSolid.js";
+import { useZIndex as S } from "./useZIndex.js";
+import { ColorPickerWithOpacity as d } from "./ColorPickerWithOpacity.js";
+function h(e) {
+  return typeof e.value == "string";
+}
+function Y(e) {
+  const {
+    trigger: n,
+    value: B,
+    onChange: R,
+    ...l
+  } = e, [t, a] = v(!1), i = b(), c = I("colorpicker"), g = S("colorpicker"), {
+    renderLayer: m,
+    triggerProps: {
+      ref: p
+    },
+    layerProps: x
+  } = y({
+    isOpen: t,
+    /**
+     * Until https://github.com/everweij/react-laag/issues/84 is fixed,
+     * we can't use the onOutsideClick option in the Shadow DOM.
+     */
+    onOutsideClick: O(i.current) ? void 0 : () => a(!1),
+    triggerOffset: 8,
+    containerOffset: 16,
+    auto: !0,
+    container: E(i.current),
+    placement: "bottom-start",
+    preferX: "left",
+    preferY: "bottom",
+    possiblePlacements: ["bottom-start", "top-start", "bottom-end", "top-end"]
+  });
+  return P("Escape", () => {
+    t && a(!1);
+  }), n ? /* @__PURE__ */ w(_, { children: [
+    n({
+      isOpen: t,
+      onClick: () => a((C) => !C),
+      "aria-haspopup": !0,
+      "aria-expanded": t,
+      "aria-controls": c,
+      ref: k(p, i)
+    }),
+    t && m(/* @__PURE__ */ o(z, { id: c, $zIndex: g, ...x, ...l, children: /* @__PURE__ */ o(f, { children: h(e) ? /* @__PURE__ */ o(s, { value: e.value, onChange: e.onChange }) : /* @__PURE__ */ o(d, { value: e.value, onChange: e.onChange }) }) }))
+  ] }) : /* @__PURE__ */ o(f, { ...l, children: h(e) ? /* @__PURE__ */ o(s, { value: e.value, onChange: e.onChange }) : /* @__PURE__ */ o(d, { value: e.value, onChange: e.onChange }) });
+}
+const z = u.div.withConfig({
+  displayName: "Container",
+  componentId: "sc-cayxfr-0"
+})(["z-index:", ";"], (e) => e.$zIndex), f = u.div.withConfig({
+  displayName: "ColorPickerCard",
+  componentId: "sc-cayxfr-1"
+})(["width:298px;border-radius:", ";background-color:", ";box-shadow:", ",", ";.react-colorful{width:100%;height:auto;}.react-colorful__saturation{height:156px;margin-bottom:", ";border-bottom:none;border-radius:", " ", " 0 0;box-shadow:none;}.react-colorful__hue,.react-colorful__alpha{height:8px;margin:0 ", " ", ";border-radius:", ";}.react-colorful__hue{box-shadow:inset 0 0 0 1px ", `;}.react-colorful__alpha{background-image:url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect height='8' width='8' y='0' x='0' fill='%23ffffff'/%3E%3Crect height='4' width='4' y='0' x='0' fill='%23e9ecee'/%3E%3Crect height='4' width='4' y='4' x='4' fill='%23e9ecee'/%3E%3C/svg%3E%0A");}.react-colorful__alpha-gradient{height:8px;border-radius:`, ";box-shadow:inset 0 0 0 1px ", ";}.react-colorful__pointer{width:16px;height:16px;border-width:4px;box-shadow:0 0 0 1px ", ";cursor:pointer;}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%);}.react-colorful__interactive:active .react-colorful__pointer{width:20px;height:20px;border-width:6px;}.react-colorful__pointer-fill{box-shadow:inset ", ";}"], r.radiusBase, r.gray10, r.elevationStatic, r.elevation2, r.spacing6, r.radiusBase, r.radiusBase, r.spacing5, r.spacing6, r.radiusPill, r.gray100a, r.radiusBase, r.gray100a, r.gray200a, r.elevation1);
+export {
+  Y as ColorPicker
+};

package/ColorPickerSolid.js

@@ -0,0 +1,20 @@
+import { jsxs as t, Fragment as e, jsx as r } from "react/jsx-runtime";
+import { HexColorPicker as m } from "react-colorful";
+import { ColorHexInput as p } from "./ColorHexInput.js";
+import { InputContainer as c } from "./InputContainer.js";
+function d({
+  value: n,
+  onChange: i
+}) {
+  return /* @__PURE__ */ t(e, { children: [
+    /* @__PURE__ */ r(m, { color: n, onChange: (o) => {
+      i(o);
+    } }),
+    /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(p, { value: n, onChange: (o) => {
+      i(o);
+    } }) })
+  ] });
+}
+export {
+  d as ColorPickerSolid
+};

package/ColorPickerWithOpacity.js

@@ -0,0 +1,37 @@
+import { jsxs as p, Fragment as c, jsx as i } from "react/jsx-runtime";
+import { HexAlphaColorPicker as m } from "react-colorful";
+import { makeHexWithOpacity as a } from "./makeHexWithOpacity.js";
+import { opacityPercentageFromHex as n } from "./opacityPercentageFromHex.js";
+import { ColorHexInput as e } from "./ColorHexInput.js";
+import { InputContainer as y } from "./InputContainer.js";
+import { OpacityInput as h } from "./OpacityInput.js";
+function H({
+  value: o,
+  onChange: t
+}) {
+  return /* @__PURE__ */ p(c, { children: [
+    /* @__PURE__ */ i(m, { color: a(o), onChange: (r) => {
+      t({
+        color: r.substring(0, 7),
+        opacity: n(r)
+      });
+    } }),
+    /* @__PURE__ */ p(y, { $hasAlphaChannel: !0, children: [
+      /* @__PURE__ */ i(e, { value: o.color, opacity: o.opacity, onChange: (r) => {
+        t({
+          color: r,
+          opacity: o.opacity
+        });
+      } }),
+      /* @__PURE__ */ i(h, { value: o.opacity, onChange: (r) => {
+        t({
+          color: o.color,
+          opacity: r
+        });
+      } })
+    ] })
+  ] });
+}
+export {
+  H as ColorPickerWithOpacity
+};

package/Combobox.js

@@ -0,0 +1,61 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useState as v, useRef as y } from "react";
+import { Item as B } from "./Item2.js";
+import { Text as D } from "./Text2.js";
+import { Dropdown as n } from "./Dropdown2.js";
+import { Input as F } from "./Input.js";
+import { ListItem as K } from "./ListItem.js";
+function m({
+  children: p,
+  openOn: o = "type",
+  isAnyValueAllowed: e = !1,
+  value: r,
+  onChange: s,
+  onOpen: u,
+  onClose: a,
+  onClean: g,
+  icon: x,
+  placeholder: d,
+  id: h,
+  iconRight: C,
+  isDisabled: I,
+  ...b
+}) {
+  const [T, k] = v(""), f = y(null);
+  return /* @__PURE__ */ i(n.OffsetContext.Provider, { value: "extra", children: /* @__PURE__ */ i(
+    n,
+    {
+      containerRef: f,
+      trigger: ({
+        isOpen: L,
+        onClick: S,
+        onKeyDown: j,
+        ...R
+      }, {
+        open: c,
+        close: l
+      }) => /* @__PURE__ */ i(F, { onFocus: () => {
+        o === "focus" && c(), e || k(r);
+      }, onBlur: (t) => {
+        if (e)
+          return;
+        f.current?.contains(t.relatedTarget) || r.trim().length > 0 && (l(), s(T));
+      }, onClean: g, value: r, onChange: (t) => {
+        s(t), t.trim().length > 0 && c(), o === "type" && t.trim().length === 0 && l();
+      }, iconRight: C || (o === "focus" ? /* @__PURE__ */ i(n.Arrow, {}) : void 0), icon: x, placeholder: d, id: h, hasClearButton: !0, role: "combobox", "aria-autocomplete": "list", isDisabled: I, ...R }),
+      position: "bottom",
+      isKeepingFocusOnTrigger: e,
+      role: "listbox",
+      onOpen: u,
+      onClose: a,
+      ...b,
+      children: o === "type" && r.trim().length === 0 ? null : p
+    }
+  ) });
+}
+m.Item = B;
+m.ListItem = K;
+m.Text = D;
+export {
+  m as Combobox
+};

package/ConcealedAction.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import e from "./styled-components.browser.esm.js";
+function d({
+  isVisible: i,
+  ...t
+}) {
+  return /* @__PURE__ */ o(c, { $isVisible: i, ...t });
+}
+const c = e.div.withConfig({
+  displayName: "ConcealedActionStyled",
+  componentId: "sc-4sj39p-0"
+})(["width:", ";opacity:", ";&:focus-within{width:auto;opacity:1;}"], (i) => i.$isVisible ? "auto" : "var(--list-item-concealead-action-width, 0)", (i) => i.$isVisible ? "1" : "var(--list-item-concealead-action-opacity, 0)");
+export {
+  d as ConcealedAction,
+  c as ConcealedActionStyled
+};

package/ConfigContext.js

@@ -15,4 +15,3 @@ export {
   a as useHideSwitch,
   u as useSelectionMode
 };
-//# sourceMappingURL=ConfigContext.js.map

package/ConnectButton.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { Button as n } from "@bynder/design-system";
+import { Button as n } from "./Button.js";
 import { __ as o } from "./index2.js";
 function e(i) {
   return /* @__PURE__ */ t(
@@ -17,4 +17,3 @@ function e(i) {
 export {
   e as ConnectButton
 };
-//# sourceMappingURL=ConnectButton.js.map

package/Container.js

@@ -1,34 +1,35 @@
 import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import n from "styled-components";
-import { IconCancel as l } from "@bynder/icons";
-import { token as t, Button as c } from "@bynder/design-system";
+import i from "./styled-components.browser.esm.js";
+import { IconCancel as l } from "./index4.js";
+import { Button as c } from "./Button.js";
+import { token as t } from "./token.js";
 import { useModalContext as s } from "./Modal.js";
 import { __ as a } from "./index2.js";
-function C(i) {
-  const e = s();
+function v(e) {
+  const n = s();
   return /* @__PURE__ */ r(
-    d,
+    m,
     {
       className: "cv-root",
       style: {
         minHeight: 320
       },
       children: [
-        e !== null && /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(
+        n !== null && /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(
           c,
           {
             variant: "clean",
-            onClick: e.onClose,
+            onClick: n.onClose,
             title: a("Close"),
             icon: /* @__PURE__ */ o(l, {})
           }
         ) }),
-        /* @__PURE__ */ o(p, { children: i.children })
+        /* @__PURE__ */ o(p, { children: e.children })
       ]
     }
   );
 }
-const d = n.div`
+const m = i.div`
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -37,16 +38,15 @@ const d = n.div`
 	justify-content: center;
 	position: relative;
 	background-color: ${t.gray10};
-`, m = n.div`
+`, d = i.div`
 	position: absolute;
 	top: ${t.spacing4};
 	right: ${t.spacing5};
-`, p = n.div`
+`, p = i.div`
 	display: flex;
 	flex-direction: column;
 	font-size: ${t.fontSize300};
 `;
 export {
-  C as Container
+  v as Container
 };
-//# sourceMappingURL=Container.js.map

package/Container2.js

@@ -0,0 +1,31 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as p, useRef as f, useContext as u, useEffect as g } from "react";
+import l from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
+import { useZIndex as h } from "./useZIndex.js";
+import { useDropdownContext as y } from "./context3.js";
+import { mergeRefs as $ } from "./mergeRefs.js";
+import { ItemContext as w } from "./itemContext.js";
+const W = p(({
+  children: e,
+  minWidth: r,
+  role: a = "menu",
+  dynamicMaxHeight: d,
+  ...t
+}, m) => {
+  const s = h("dropdown"), x = f(null), {
+    dispatch: n
+  } = y(), i = u(w);
+  return g(() => () => {
+    n({
+      type: "purge-menu-items",
+      payload: i
+    });
+  }, [e, n, i]), /* @__PURE__ */ c(C, { $minWidth: r, $dynamicMaxHeight: d, role: a, ref: $(m, x), $zIndex: s, ...t, onMouseLeave: t.onMouseLeave, children: e });
+}), C = l.div.withConfig({
+  displayName: "ContainerStyled",
+  componentId: "sc-17oolf2-0"
+})(["z-index:", ";overflow-y:auto;box-sizing:border-box;min-width:", ";max-width:336px;max-height:", ";padding:", " 0;border-radius:", ";background:", ";color:", ";box-shadow:", ",", ";&:empty{display:none;}"], (e) => e.$zIndex, (e) => e.$minWidth ? e.$minWidth : "224px", (e) => e.$dynamicMaxHeight ? `${e.$dynamicMaxHeight}px` : `calc(36px * 9.5 + ${o.spacing3})`, o.spacing3, o.radiusBase, o.gray10, o.colorText, o.elevationStatic, o.elevation2);
+export {
+  W as Container
+};

package/Content.js

@@ -0,0 +1,16 @@
+import { jsx as n } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { baseStyles as e } from "./BaseStyles.js";
+import { token as o } from "./token.js";
+function c({
+  children: t
+}) {
+  return /* @__PURE__ */ n(i, { children: t });
+}
+const i = r.div.withConfig({
+  displayName: "ContentStyled",
+  componentId: "sc-rmi3y-0"
+})(["", " flex-grow:1;overflow-y:auto;padding:", " ", ";overscroll-behavior:contain;"], e, o.spacing3, o.spacing6);
+export {
+  c as Content
+};

package/ContextAction.js

@@ -1,31 +1,40 @@
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import { IconOpenInNew as l, IconCrop as a, IconMore as C } from "@bynder/icons";
-import { Card as i, Dropdown as o } from "@bynder/design-system";
-import { useConfig as p } from "./ConfigContext.js";
-import { __ as w } from "./index2.js";
-function g({ transformBaseUrl: s, portalUrl: r, onOpenDAT: c }) {
-  const { hideExternalAccess: e, selectionMode: d } = p(), t = d === "SingleSelectFile" && s;
-  return !t && e ? null : !t && !e ? /* @__PURE__ */ n(
-    i.ContextActionButton,
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import { IconOpenInNew as s, IconCrop as a, IconMore as C } from "./index4.js";
+import { Card as t } from "./Card.js";
+import { Dropdown as o } from "./Dropdown2.js";
+import { useConfig as w } from "./ConfigContext.js";
+import { __ as h } from "./index2.js";
+function _({ dragState: r, transformBaseUrl: m, portalUrl: l, onOpenDAT: c }) {
+  const { hideExternalAccess: e, selectionMode: d } = w(), i = d === "SingleSelectFile" && m;
+  return !i && e ? null : !i && !e && r !== "select" ? /* @__PURE__ */ n(
+    t.ContextActionButton,
     {
-      "aria-label": w("Open in new tab"),
+      "aria-label": h("Open in new tab"),
       onClick: () => {
-        window.open(r, "_blank");
+        window.open(l, "_blank");
       },
-      children: /* @__PURE__ */ n(l, {})
+      children: /* @__PURE__ */ n(s, {})
     }
-  ) : t && e ? /* @__PURE__ */ n(i.ContextActionButton, { "aria-label": "New transformation", onClick: c, children: /* @__PURE__ */ n(a, {}) }) : /* @__PURE__ */ u(
+  ) : i && e ? /* @__PURE__ */ n(t.ContextActionButton, { "aria-label": "New transformation", onClick: c, children: /* @__PURE__ */ n(a, {}) }) : /* @__PURE__ */ p(
     o,
     {
-      trigger: ({ isOpen: m, ...f }) => /* @__PURE__ */ n(i.ContextActionButton, { "aria-label": "Menu", isPressed: m, ...f, children: /* @__PURE__ */ n(C, {}) }),
+      trigger: ({ isOpen: f, ...u }) => r !== "select" ? /* @__PURE__ */ n(
+        t.ContextActionButton,
+        {
+          "aria-label": "Menu",
+          isPressed: f,
+          ...u,
+          children: /* @__PURE__ */ n(C, {})
+        }
+      ) : null,
       isClosedOnScroll: !0,
       children: [
         /* @__PURE__ */ n(
           o.Item,
           {
-            icon: /* @__PURE__ */ n(l, {}),
+            icon: /* @__PURE__ */ n(s, {}),
             onClick: () => {
-              window.open(r, "_blank");
+              window.open(l, "_blank");
             },
             children: "Open asset"
           }
@@ -37,6 +46,5 @@ function g({ transformBaseUrl: s, portalUrl: r, onOpenDAT: c }) {
   );
 }
 export {
-  g as ContextAction
+  _ as ContextAction
 };
-//# sourceMappingURL=ContextAction.js.map

package/ContextActionButton.js

@@ -0,0 +1,29 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useFocusRing as f } from "./useFocusRing.js";
+import u, { css as i } from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
+import { Tooltip as x } from "./Tooltip2.js";
+const $ = p(({
+  children: t,
+  isDisabled: r = !1,
+  isPressed: s = !1,
+  tooltip: e,
+  "aria-label": c,
+  ...l
+}, d) => {
+  const {
+    isFocusVisible: g,
+    focusProps: b
+  } = f(), n = /* @__PURE__ */ a(m, { disabled: r, type: "button", $isFocusVisible: g, ref: d, $isPressed: s, "aria-label": c, ...b, ...l, children: t });
+  return e ? /* @__PURE__ */ a(x, { timing: "delay", content: e, children: n }) : n;
+}), m = u.button.withConfig({
+  displayName: "ContextActionButtonStyled",
+  componentId: "sc-1w5xfy3-0"
+})(["display:inline-flex;vertical-align:middle;flex-wrap:nowrap;justify-content:center;align-items:center;box-sizing:border-box;min-width:40px;height:32px;padding:0 ", ";border:none;border-radius:", ";background-color:transparent;box-shadow:0 0 0 1px ", ";font-weight:400;font-style:normal;font-size:", ";font-family:", ";line-height:", ";letter-spacing:normal;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;fill:currentcolor;transition-duration:0.1s;transition-property:background-color,border-color,box-shadow,color;", ""], o.spacing3, o.brandRadiusBase, o.gray100a, o.fontSize75, o.brandFontStackBase, o.lineHeightBase, (t) => {
+  const r = i(["background-color:", ";color:", ";box-shadow:0 0 0 1px ", ";"], o.gray10, o.gray800, o.gray100a);
+  return i(["background-color:rgb(", " / 90%);color:", ";", " &:hover{background-color:", ";color:", ";box-shadow:", ",", ";}&:active{", "}&:disabled{background-color:rgb(", " / 70%);color:", ";box-shadow:0 0 0 1px ", ";cursor:default;}"], o["white-rgb"], o.gray600a, t.$isPressed && r, o.gray10, o.gray800, o.elevation1, o.elevationStatic, r, o["white-rgb"], o.gray200a, o.gray100a);
+});
+export {
+  $ as ContextActionButton
+};

package/ControlGroup.js

@@ -0,0 +1,32 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import h from "react";
+import m from "./styled-components.browser.esm.js";
+import { token as g } from "./token.js";
+import { Form as i } from "./Form.js";
+import { useId as l } from "./useId.js";
+function q({
+  children: c,
+  label: r,
+  labelSecondaryText: a,
+  isInvalid: n,
+  helperText: t,
+  helperTextIcon: p,
+  ...s
+}) {
+  const e = l("control-group-label"), d = l("control-group-helper-text");
+  return /* @__PURE__ */ u(i.Group, { "aria-labelledby": r ? e : void 0, "aria-describedby": t ? d : void 0, "aria-invalid": n, ...s, children: [
+    r && /* @__PURE__ */ o(i.Label, { id: e, secondaryText: a, children: r }),
+    /* @__PURE__ */ o(b, { children: h.Children.map(c, (f) => /* @__PURE__ */ o(y, { children: f })) }),
+    t && /* @__PURE__ */ o(i.HelperText, { isInvalid: n, icon: p, id: d, children: t })
+  ] });
+}
+const b = m.ul.withConfig({
+  displayName: "List",
+  componentId: "sc-166qdv5-0"
+})(["margin:0;padding:0;list-style:none;"]), y = m.li.withConfig({
+  displayName: "Item",
+  componentId: "sc-166qdv5-1"
+})(["&:not(:last-child){margin-bottom:", ";}"], g.spacing2);
+export {
+  q as ControlGroup
+};

package/DOMFunctions.js

@@ -0,0 +1,27 @@
+import { isShadowRoot as f } from "./domHelpers.js";
+import { shadowDOM as o } from "./import.js";
+function n(t, a) {
+  if (!o()) return a && t ? t.contains(a) : !1;
+  if (!t || !a) return !1;
+  let e = a;
+  for (; e !== null; ) {
+    if (e === t) return !0;
+    e.tagName === "SLOT" && e.assignedSlot ? e = e.assignedSlot.parentNode : f(e) ? e = e.host : e = e.parentNode;
+  }
+  return !1;
+}
+const s = (t = document) => {
+  var a;
+  if (!o()) return t.activeElement;
+  let e = t.activeElement;
+  for (; e && "shadowRoot" in e && (!((a = e.shadowRoot) === null || a === void 0) && a.activeElement); ) e = e.shadowRoot.activeElement;
+  return e;
+};
+function d(t) {
+  return o() && t.target.shadowRoot && t.composedPath ? t.composedPath()[0] : t.target;
+}
+export {
+  s as getActiveElement,
+  d as getEventTarget,
+  n as nodeContains
+};

package/Dat.js

@@ -1,76 +1,88 @@
-import { jsxs as b, jsx as a } from "react/jsx-runtime";
-import { useState as h, useEffect as C } from "react";
-import { createPortal as T } from "react-dom";
-import y from "styled-components";
-import { token as u, Modal as M, Button as c } from "@bynder/design-system";
-import { DATBuilder as A } from "@bynder/dat-frontend";
-import { useRootElement as P } from "./RootElementContext.js";
-import { useDat as S } from "./useDatStore.js";
-function L() {
-  const l = P(), [r, v] = h(), [i, d] = h(), {
-    datUrl: x,
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import { useState as u, useEffect as U } from "react";
+import { createPortal as M } from "react-dom";
+import v from "./styled-components.browser.esm.js";
+import { Button as c } from "./Button.js";
+import { Modal as P } from "./Modal2.js";
+import { token as y } from "./token.js";
+import { DATBuilder as S } from "./index8.js";
+import { useRootElement as j } from "./RootElementContext.js";
+import { useDat as E } from "./useDatStore.js";
+import { useAuth as I } from "./LoginContext.js";
+import { fixFontSpacesInUrl as F } from "./fixFontSpaceInUrl.js";
+function X() {
+  const l = j(), d = I(), [i, x] = u(), [a, m] = u(), {
+    datUrl: k,
     assetName: g,
-    datExtension: k,
+    datExtension: w,
     transformation: t,
-    closeDat: m,
-    setTransformation: f
-  } = S();
-  C(() => {
+    closeDat: f,
+    setTransformation: p,
+    assetId: B
+  } = E();
+  U(() => {
     const o = l.querySelector(".cv-root");
-    o && v(o);
+    o && x(o);
   }, [l]);
-  const s = (o, n) => {
-    o && t && f({ url: o, preset: n, asset: t.asset }), m();
-  }, p = (o, n) => {
-    w(n) && t ? d({ url: o, preset: n, asset: t.asset }) : s(o, n);
-  }, e = () => d(void 0), B = () => {
-    s(i?.url, i?.preset), e();
-  }, D = () => {
-    f(void 0), e(), m();
-  }, w = (o) => o.content.io.length > 0;
-  return r ? T(
-    /* @__PURE__ */ b(U, { children: [
-      /* @__PURE__ */ a(
-        E,
+  const s = (o, e) => {
+    if (o && t) {
+      const A = F(o);
+      p({ url: A, preset: e, asset: t.asset });
+    }
+    f();
+  }, h = (o, e) => {
+    b(e) && t ? m({ url: o, preset: e, asset: t.asset }) : s(o, e);
+  }, r = () => m(void 0), D = () => {
+    s(a?.url, a?.preset), r();
+  }, T = () => {
+    p(void 0), r(), f();
+  }, b = (o) => o.content.io.length > 0;
+  return i ? M(
+    /* @__PURE__ */ C(O, { children: [
+      /* @__PURE__ */ n(
+        R,
         {
           mediaInfo: {
-            extension: k,
-            baseURL: x,
+            extension: [w],
+            baseURL: k,
             name: g,
             width: 1,
-            height: 1
+            height: 1,
+            id: B,
+            isPublic: 0
           },
           canViewPresets: !1,
           canViewTransformations: !0,
           hideBottomBar: !0,
           onApply: s,
-          onDone: p,
-          onBack: p,
-          initialTransformations: t?.preset?.content.io
+          onDone: h,
+          onBack: h,
+          initialTransformations: t?.preset?.content.io,
+          jwtTokenOverride: d?.getAccessToken ? d.getAccessToken() : void 0
         }
       ),
-      /* @__PURE__ */ a(
-        M,
+      /* @__PURE__ */ n(
+        P,
         {
-          isOpen: !!i,
+          isOpen: !!a,
           title: "Transformations not yet applied",
-          container: r,
-          onClose: e,
-          actionPrimary: /* @__PURE__ */ a(c, { variant: "primary", onClick: B, children: "Apply transformations" }),
-          actionSecondary: /* @__PURE__ */ a(c, { variant: "secondary", onClick: e, children: "Cancel" }),
-          actionTertiary: /* @__PURE__ */ a(c, { variant: "secondary", onClick: D, children: "Discard changes" }),
+          container: i,
+          onClose: r,
+          actionPrimary: /* @__PURE__ */ n(c, { variant: "primary", onClick: D, children: "Apply transformations" }),
+          actionSecondary: /* @__PURE__ */ n(c, { variant: "secondary", onClick: r, children: "Cancel" }),
+          actionTertiary: /* @__PURE__ */ n(c, { variant: "secondary", onClick: T, children: "Discard changes" }),
           children: "Transformations not yet applied. Do you want to apply transformations now, or discard changes?"
         }
       )
     ] }),
-    r
+    i
   ) : null;
 }
-const U = y.div`
-	background-color: ${u.white};
+const O = v.div`
+	background-color: ${y.white};
 	z-index: 999999;
 	overflow: hidden;
-	border-radius: ${u.radiusBase};
+	border-radius: ${y.radiusBase};
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
@@ -80,11 +92,10 @@ const U = y.div`
 	bottom: 0;
 	left: 0;
 	right: 0;
-`, E = y(A)`
+`, R = v(S)`
 	height: 100%;
 	width: 100%;
 `;
 export {
-  L as Dat
+  X as Dat
 };
-//# sourceMappingURL=Dat.js.map