@wix/patterns-fields 1.129.0 → 1.131.0

package/dist/cjs/components/media-control/use-cell-media-edit.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_hooks","_useMediaControl","_usePasteUrlForm","sameUri","uri","useCellMediaEdit","mediaType","value","onChange","onCommit","onCancel","onStartEdit","inputRef","fromPick","fromUrl","commitOnPick","containerRef","useRef","latestValue","current","applied","apply","useCallback","next","onPick","onUrlSave","url","callMedia","downloadMedia","loading","useMediaControl","handleCallMedia","handleDelete","isOpen","title","pasteUrlValue","onOpen","onClose","onSave","usePasteURLForm","handleFormClose","startEditAndOpenPasteUrl","params","handleContainerFocus","handleContainerBlur","useCellEditKeyboard","pasteUrlForm","handleClose"],"sources":["../../../../src/components/media-control/use-cell-media-edit.ts"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\n\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport { useCellEditKeyboard } from '../../hooks';\n\nimport { useMediaControl } from './use-media-control';\nimport { usePasteURLForm } from './use-paste-url-form';\n\nexport interface UseCellMediaEditParams<V = string> {\n  mediaType: MEDIA_TYPES;\n  value: V | null;\n  onChange: (value: V | null) => void;\n  onCommit: () => void;\n  onCancel?: () => void;\n  /**\n   * Called before opening external UI (media manager / paste-URL form) so the\n   * table can set isEditing=true and protect cell focus while the modal is open.\n   */\n  onStartEdit?: () => void;\n  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;\n}\n\n/** For a cell whose value is not the picked URI itself. */\nexport interface CellMediaValueOptions<V> {\n  /** The value for a media manager pick. `null` ignores the pick. */\n  fromPick: (uri: string, current: V | null) => V | null;\n  /** The value for a URL saved in the paste-URL form. */\n  fromUrl: (url: string, current: V | null) => V;\n  /**\n   * When `false`, a pick only changes the value and the cell commits later.\n   * Closing the media manager or the URL form without a value then cancels\n   * the edit only if the cell is still empty.\n   */\n  commitOnPick?: boolean;\n}\n\nexport interface UseCellMediaEditResult {\n  containerRef: React.MutableRefObject<HTMLDivElement | null>;\n  loading: boolean;\n  callMedia: () => Promise<boolean>;\n  downloadMedia: (uri: string) => void;\n  /** Opens the media manager. If the user cancels, propagates onCancel. */\n  handleCallMedia: () => Promise<void>;\n  /** Clears the cell and commits. */\n  handleDelete: () => void;\n  /**\n   * Curried opener: pass the modal's `title` / preset `value`, get back the\n   * click handler. Also signals onStartEdit so the cell keeps focus while the\n   * modal is up.\n   */\n  startEditAndOpenPasteUrl: (params: {\n    title: string;\n    value?: string;\n  }) => () => void;\n  pasteUrlForm: {\n    isOpen: boolean;\n    title: string;\n    /** The URL the form opens with. */\n    value?: string;\n    onSave: (value: string) => void;\n    /** onClose composed with onCancel — call from PasteURLForm.closeModal. */\n    handleClose: () => void;\n  };\n  handleContainerFocus: () => void;\n  handleContainerBlur: (e: React.FocusEvent) => void;\n}\n\nconst sameUri = (uri: string) => uri;\n\n/**\n * Shared state + handlers for single-value media cell edit components\n * (image / document / audio / video / …). Each consumer renders its own\n * primary/secondary content; this hook owns the wiring to useMediaControl,\n * usePasteURLForm, useCellEditKeyboard, and the standard onCommit/onCancel\n * dance.\n */\n// Generic only so TS accepts it against the `unknown` implementation below.\nexport function useCellMediaEdit<V extends string>(\n  params: UseCellMediaEditParams<V>,\n): UseCellMediaEditResult;\n\nexport function useCellMediaEdit<V>(\n  params: UseCellMediaEditParams<V> & CellMediaValueOptions<V>,\n): UseCellMediaEditResult;\n\nexport function useCellMediaEdit({\n  mediaType,\n  value,\n  onChange,\n  onCommit,\n  onCancel,\n  onStartEdit,\n  inputRef,\n  fromPick = sameUri,\n  fromUrl = sameUri,\n  commitOnPick = true,\n}: UseCellMediaEditParams<unknown> &\n  Partial<CellMediaValueOptions<unknown>>): UseCellMediaEditResult {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  // The media manager and the URL form call back after they close, so they\n  // read the value from here rather than from the render that opened them.\n  const latestValue = useRef(value);\n  latestValue.current = value;\n  const applied = useRef(false);\n\n  const apply = useCallback(\n    (next: unknown) => {\n      applied.current = true;\n      // The URL form closes right after it saves, before the next render.\n      latestValue.current = next;\n      onChange(next);\n      if (commitOnPick) {\n        onCommit();\n      }\n    },\n    [onChange, onCommit, commitOnPick],\n  );\n\n  const onPick = useCallback(\n    (uri: string) => {\n      const next = fromPick(uri, latestValue.current);\n      if (next !== null) {\n        apply(next);\n      }\n    },\n    [fromPick, apply],\n  );\n\n  const onUrlSave = useCallback(\n    (url: string) => apply(fromUrl(url, latestValue.current)),\n    [fromUrl, apply],\n  );\n\n  const { callMedia, downloadMedia, loading } = useMediaControl({\n    mediaType,\n    onChange: onPick,\n  });\n\n  const handleCallMedia = useCallback(async () => {\n    onStartEdit?.();\n    applied.current = false;\n    await callMedia();\n    if (!applied.current && (commitOnPick || latestValue.current === null)) {\n      onCancel?.();\n    }\n  }, [onStartEdit, callMedia, commitOnPick, onCancel]);\n\n  const handleDelete = useCallback(() => {\n    onChange(null);\n    onCommit();\n  }, [onChange, onCommit]);\n\n  const {\n    isOpen,\n    title,\n    value: pasteUrlValue,\n    onOpen,\n    onClose,\n    onSave,\n  } = usePasteURLForm({ onChange: onUrlSave });\n\n  const handleFormClose = useCallback(() => {\n    onClose();\n    if (commitOnPick || latestValue.current === null) {\n      onCancel?.();\n    }\n  }, [onClose, commitOnPick, onCancel]);\n\n  const startEditAndOpenPasteUrl = useCallback(\n    (params: { title: string; value?: string }) => () => {\n      onStartEdit?.();\n      onOpen(params)();\n    },\n    [onStartEdit, onOpen],\n  );\n\n  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({\n    containerRef,\n    onCancel,\n    inputRef,\n  });\n\n  return {\n    containerRef,\n    loading,\n    callMedia,\n    downloadMedia,\n    handleCallMedia,\n    handleDelete,\n    startEditAndOpenPasteUrl,\n    pasteUrlForm: {\n      isOpen,\n      title,\n      value: pasteUrlValue,\n      onSave,\n      handleClose: handleFormClose,\n    },\n    handleContainerFocus,\n    handleContainerBlur,\n  };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAgBA;;AA6CA,MAAMI,OAAO,GAAIC,GAAW,IAAKA,GAAG;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASO,SAASC,gBAAgBA,CAAC;EAC/BC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,QAAQ;EACRC,QAAQ,GAAGV,OAAO;EAClBW,OAAO,GAAGX,OAAO;EACjBY,YAAY,GAAG;AAEuB,CAAC,EAA0B;EACjE,MAAMC,YAAY,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EACxD;EACA;EACA,MAAMC,WAAW,GAAG,IAAAD,aAAM,EAACV,KAAK,CAAC;EACjCW,WAAW,CAACC,OAAO,GAAGZ,KAAK;EAC3B,MAAMa,OAAO,GAAG,IAAAH,aAAM,EAAC,KAAK,CAAC;EAE7B,MAAMI,KAAK,GAAG,IAAAC,kBAAW,EACtBC,IAAa,IAAK;IACjBH,OAAO,CAACD,OAAO,GAAG,IAAI;IACtB;IACAD,WAAW,CAACC,OAAO,GAAGI,IAAI;IAC1Bf,QAAQ,CAACe,IAAI,CAAC;IACd,IAAIR,YAAY,EAAE;MAChBN,QAAQ,CAAC,CAAC;IACZ;EACF,CAAC,EACD,CAACD,QAAQ,EAAEC,QAAQ,EAAEM,YAAY,CACnC,CAAC;EAED,MAAMS,MAAM,GAAG,IAAAF,kBAAW,EACvBlB,GAAW,IAAK;IACf,MAAMmB,IAAI,GAAGV,QAAQ,CAACT,GAAG,EAAEc,WAAW,CAACC,OAAO,CAAC;IAC/C,IAAII,IAAI,KAAK,IAAI,EAAE;MACjBF,KAAK,CAACE,IAAI,CAAC;IACb;EACF,CAAC,EACD,CAACV,QAAQ,EAAEQ,KAAK,CAClB,CAAC;EAED,MAAMI,SAAS,GAAG,IAAAH,kBAAW,EAC1BI,GAAW,IAAKL,KAAK,CAACP,OAAO,CAACY,GAAG,EAAER,WAAW,CAACC,OAAO,CAAC,CAAC,EACzD,CAACL,OAAO,EAAEO,KAAK,CACjB,CAAC;EAED,MAAM;IAAEM,SAAS;IAAEC,aAAa;IAAEC;EAAQ,CAAC,GAAG,IAAAC,gCAAe,EAAC;IAC5DxB,SAAS;IACTE,QAAQ,EAAEgB;EACZ,CAAC,CAAC;EAEF,MAAMO,eAAe,GAAG,IAAAT,kBAAW,EAAC,YAAY;IAC9CX,WAAW,YAAXA,WAAW,CAAG,CAAC;IACfS,OAAO,CAACD,OAAO,GAAG,KAAK;IACvB,MAAMQ,SAAS,CAAC,CAAC;IACjB,IAAI,CAACP,OAAO,CAACD,OAAO,KAAKJ,YAAY,IAAIG,WAAW,CAACC,OAAO,KAAK,IAAI,CAAC,EAAE;MACtET,QAAQ,YAARA,QAAQ,CAAG,CAAC;IACd;EACF,CAAC,EAAE,CAACC,WAAW,EAAEgB,SAAS,EAAEZ,YAAY,EAAEL,QAAQ,CAAC,CAAC;EAEpD,MAAMsB,YAAY,GAAG,IAAAV,kBAAW,EAAC,MAAM;IACrCd,QAAQ,CAAC,IAAI,CAAC;IACdC,QAAQ,CAAC,CAAC;EACZ,CAAC,EAAE,CAACD,QAAQ,EAAEC,QAAQ,CAAC,CAAC;EAExB,MAAM;IACJwB,MAAM;IACNC,KAAK;IACL3B,KAAK,EAAE4B,aAAa;IACpBC,MAAM;IACNC,OAAO;IACPC;EACF,CAAC,GAAG,IAAAC,gCAAe,EAAC;IAAE/B,QAAQ,EAAEiB;EAAU,CAAC,CAAC;EAE5C,MAAMe,eAAe,GAAG,IAAAlB,kBAAW,EAAC,MAAM;IACxCe,OAAO,CAAC,CAAC;IACT,IAAItB,YAAY,IAAIG,WAAW,CAACC,OAAO,KAAK,IAAI,EAAE;MAChDT,QAAQ,YAARA,QAAQ,CAAG,CAAC;IACd;EACF,CAAC,EAAE,CAAC2B,OAAO,EAAEtB,YAAY,EAAEL,QAAQ,CAAC,CAAC;EAErC,MAAM+B,wBAAwB,GAAG,IAAAnB,kBAAW,EACzCoB,MAAyC,IAAK,MAAM;IACnD/B,WAAW,YAAXA,WAAW,CAAG,CAAC;IACfyB,MAAM,CAACM,MAAM,CAAC,CAAC,CAAC;EAClB,CAAC,EACD,CAAC/B,WAAW,EAAEyB,MAAM,CACtB,CAAC;EAED,MAAM;IAAEO,oBAAoB;IAAEC;EAAoB,CAAC,GAAG,IAAAC,0BAAmB,EAAC;IACxE7B,YAAY;IACZN,QAAQ;IACRE;EACF,CAAC,CAAC;EAEF,OAAO;IACLI,YAAY;IACZa,OAAO;IACPF,SAAS;IACTC,aAAa;IACbG,eAAe;IACfC,YAAY;IACZS,wBAAwB;IACxBK,YAAY,EAAE;MACZb,MAAM;MACNC,KAAK;MACL3B,KAAK,EAAE4B,aAAa;MACpBG,MAAM;MACNS,WAAW,EAAEP;IACf,CAAC;IACDG,oBAAoB;IACpBC;EACF,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["_react","require","_hooks","_useMediaControl","_usePasteUrlForm","sameUri","uri","useCellMediaEdit","mediaType","value","onChange","onCommit","onCancel","onStartEdit","inputRef","fromPick","fromUrl","commitOnPick","containerRef","useRef","latestValue","current","applied","apply","useCallback","next","onPick","onUrlSave","url","callMedia","downloadMedia","loading","useMediaControl","handleCallMedia","handleDelete","isOpen","title","pasteUrlValue","onOpen","onClose","onSave","usePasteURLForm","handleFormClose","startEditAndOpenPasteUrl","params","handleContainerFocus","handleContainerBlur","useCellEditKeyboard","pasteUrlForm","handleClose"],"sources":["../../../../src/components/media-control/use-cell-media-edit.ts"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\n\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport { useCellEditKeyboard } from '../../hooks';\n\nimport { useMediaControl } from './use-media-control';\nimport { usePasteURLForm } from './use-paste-url-form';\n\nexport interface UseCellMediaEditParams<V = string> {\n  mediaType: MEDIA_TYPES;\n  value: V | null;\n  onChange: (value: V | null) => void;\n  onCommit: () => void;\n  onCancel?: () => void;\n  /**\n   * Called before opening external UI (media manager / paste-URL form) so the\n   * table can set isEditing=true and protect cell focus while the modal is open.\n   */\n  onStartEdit?: () => void;\n  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;\n}\n\n/** For a cell whose value is not the picked URI itself. */\nexport interface CellMediaValueOptions<V> {\n  /** The value for a media manager pick. `null` ignores the pick. */\n  fromPick: (uri: string, current: V | null) => V | null;\n  /** The value for a URL saved in the paste-URL form. Required with that form; without it the URL is saved raw. */\n  fromUrl?: (url: string, current: V | null) => V;\n  /**\n   * When `false`, a pick only changes the value and the cell commits later.\n   * Closing the media manager or the URL form without a value then cancels\n   * the edit only if the cell is still empty.\n   */\n  commitOnPick?: boolean;\n}\n\nexport interface UseCellMediaEditResult {\n  containerRef: React.MutableRefObject<HTMLDivElement | null>;\n  loading: boolean;\n  callMedia: () => Promise<boolean>;\n  downloadMedia: (uri: string) => void;\n  /** Opens the media manager. If the user cancels, propagates onCancel. */\n  handleCallMedia: () => Promise<void>;\n  /** Clears the cell and commits. */\n  handleDelete: () => void;\n  /**\n   * Curried opener: pass the modal's `title` / preset `value`, get back the\n   * click handler. Also signals onStartEdit so the cell keeps focus while the\n   * modal is up.\n   */\n  startEditAndOpenPasteUrl: (params: {\n    title: string;\n    value?: string;\n  }) => () => void;\n  pasteUrlForm: {\n    isOpen: boolean;\n    title: string;\n    /** The URL the form opens with. */\n    value?: string;\n    onSave: (value: string) => void;\n    /** onClose composed with onCancel — call from PasteURLForm.closeModal. */\n    handleClose: () => void;\n  };\n  handleContainerFocus: () => void;\n  handleContainerBlur: (e: React.FocusEvent) => void;\n}\n\nconst sameUri = (uri: string) => uri;\n\n/**\n * Shared state + handlers for single-value media cell edit components\n * (image / document / audio / video / …). Each consumer renders its own\n * primary/secondary content; this hook owns the wiring to useMediaControl,\n * usePasteURLForm, useCellEditKeyboard, and the standard onCommit/onCancel\n * dance.\n */\n// Generic only so TS accepts it against the `unknown` implementation below.\nexport function useCellMediaEdit<V extends string>(\n  params: UseCellMediaEditParams<V>,\n): UseCellMediaEditResult;\n\nexport function useCellMediaEdit<V>(\n  params: UseCellMediaEditParams<V> & CellMediaValueOptions<V>,\n): UseCellMediaEditResult;\n\nexport function useCellMediaEdit({\n  mediaType,\n  value,\n  onChange,\n  onCommit,\n  onCancel,\n  onStartEdit,\n  inputRef,\n  fromPick = sameUri,\n  fromUrl = sameUri,\n  commitOnPick = true,\n}: UseCellMediaEditParams<unknown> &\n  Partial<CellMediaValueOptions<unknown>>): UseCellMediaEditResult {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  // The media manager and the URL form call back after they close, so they\n  // read the value from here rather than from the render that opened them.\n  const latestValue = useRef(value);\n  latestValue.current = value;\n  const applied = useRef(false);\n\n  const apply = useCallback(\n    (next: unknown) => {\n      applied.current = true;\n      // The URL form closes right after it saves, before the next render.\n      latestValue.current = next;\n      onChange(next);\n      if (commitOnPick) {\n        onCommit();\n      }\n    },\n    [onChange, onCommit, commitOnPick],\n  );\n\n  const onPick = useCallback(\n    (uri: string) => {\n      const next = fromPick(uri, latestValue.current);\n      if (next !== null) {\n        apply(next);\n      }\n    },\n    [fromPick, apply],\n  );\n\n  const onUrlSave = useCallback(\n    (url: string) => apply(fromUrl(url, latestValue.current)),\n    [fromUrl, apply],\n  );\n\n  const { callMedia, downloadMedia, loading } = useMediaControl({\n    mediaType,\n    onChange: onPick,\n  });\n\n  const handleCallMedia = useCallback(async () => {\n    onStartEdit?.();\n    applied.current = false;\n    await callMedia();\n    if (!applied.current && (commitOnPick || latestValue.current === null)) {\n      onCancel?.();\n    }\n  }, [onStartEdit, callMedia, commitOnPick, onCancel]);\n\n  const handleDelete = useCallback(() => {\n    onChange(null);\n    onCommit();\n  }, [onChange, onCommit]);\n\n  const {\n    isOpen,\n    title,\n    value: pasteUrlValue,\n    onOpen,\n    onClose,\n    onSave,\n  } = usePasteURLForm({ onChange: onUrlSave });\n\n  const handleFormClose = useCallback(() => {\n    onClose();\n    if (commitOnPick || latestValue.current === null) {\n      onCancel?.();\n    }\n  }, [onClose, commitOnPick, onCancel]);\n\n  const startEditAndOpenPasteUrl = useCallback(\n    (params: { title: string; value?: string }) => () => {\n      onStartEdit?.();\n      onOpen(params)();\n    },\n    [onStartEdit, onOpen],\n  );\n\n  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({\n    containerRef,\n    onCancel,\n    inputRef,\n  });\n\n  return {\n    containerRef,\n    loading,\n    callMedia,\n    downloadMedia,\n    handleCallMedia,\n    handleDelete,\n    startEditAndOpenPasteUrl,\n    pasteUrlForm: {\n      isOpen,\n      title,\n      value: pasteUrlValue,\n      onSave,\n      handleClose: handleFormClose,\n    },\n    handleContainerFocus,\n    handleContainerBlur,\n  };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAgBA;;AA6CA,MAAMI,OAAO,GAAIC,GAAW,IAAKA,GAAG;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASO,SAASC,gBAAgBA,CAAC;EAC/BC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,QAAQ;EACRC,QAAQ,GAAGV,OAAO;EAClBW,OAAO,GAAGX,OAAO;EACjBY,YAAY,GAAG;AAEuB,CAAC,EAA0B;EACjE,MAAMC,YAAY,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EACxD;EACA;EACA,MAAMC,WAAW,GAAG,IAAAD,aAAM,EAACV,KAAK,CAAC;EACjCW,WAAW,CAACC,OAAO,GAAGZ,KAAK;EAC3B,MAAMa,OAAO,GAAG,IAAAH,aAAM,EAAC,KAAK,CAAC;EAE7B,MAAMI,KAAK,GAAG,IAAAC,kBAAW,EACtBC,IAAa,IAAK;IACjBH,OAAO,CAACD,OAAO,GAAG,IAAI;IACtB;IACAD,WAAW,CAACC,OAAO,GAAGI,IAAI;IAC1Bf,QAAQ,CAACe,IAAI,CAAC;IACd,IAAIR,YAAY,EAAE;MAChBN,QAAQ,CAAC,CAAC;IACZ;EACF,CAAC,EACD,CAACD,QAAQ,EAAEC,QAAQ,EAAEM,YAAY,CACnC,CAAC;EAED,MAAMS,MAAM,GAAG,IAAAF,kBAAW,EACvBlB,GAAW,IAAK;IACf,MAAMmB,IAAI,GAAGV,QAAQ,CAACT,GAAG,EAAEc,WAAW,CAACC,OAAO,CAAC;IAC/C,IAAII,IAAI,KAAK,IAAI,EAAE;MACjBF,KAAK,CAACE,IAAI,CAAC;IACb;EACF,CAAC,EACD,CAACV,QAAQ,EAAEQ,KAAK,CAClB,CAAC;EAED,MAAMI,SAAS,GAAG,IAAAH,kBAAW,EAC1BI,GAAW,IAAKL,KAAK,CAACP,OAAO,CAACY,GAAG,EAAER,WAAW,CAACC,OAAO,CAAC,CAAC,EACzD,CAACL,OAAO,EAAEO,KAAK,CACjB,CAAC;EAED,MAAM;IAAEM,SAAS;IAAEC,aAAa;IAAEC;EAAQ,CAAC,GAAG,IAAAC,gCAAe,EAAC;IAC5DxB,SAAS;IACTE,QAAQ,EAAEgB;EACZ,CAAC,CAAC;EAEF,MAAMO,eAAe,GAAG,IAAAT,kBAAW,EAAC,YAAY;IAC9CX,WAAW,YAAXA,WAAW,CAAG,CAAC;IACfS,OAAO,CAACD,OAAO,GAAG,KAAK;IACvB,MAAMQ,SAAS,CAAC,CAAC;IACjB,IAAI,CAACP,OAAO,CAACD,OAAO,KAAKJ,YAAY,IAAIG,WAAW,CAACC,OAAO,KAAK,IAAI,CAAC,EAAE;MACtET,QAAQ,YAARA,QAAQ,CAAG,CAAC;IACd;EACF,CAAC,EAAE,CAACC,WAAW,EAAEgB,SAAS,EAAEZ,YAAY,EAAEL,QAAQ,CAAC,CAAC;EAEpD,MAAMsB,YAAY,GAAG,IAAAV,kBAAW,EAAC,MAAM;IACrCd,QAAQ,CAAC,IAAI,CAAC;IACdC,QAAQ,CAAC,CAAC;EACZ,CAAC,EAAE,CAACD,QAAQ,EAAEC,QAAQ,CAAC,CAAC;EAExB,MAAM;IACJwB,MAAM;IACNC,KAAK;IACL3B,KAAK,EAAE4B,aAAa;IACpBC,MAAM;IACNC,OAAO;IACPC;EACF,CAAC,GAAG,IAAAC,gCAAe,EAAC;IAAE/B,QAAQ,EAAEiB;EAAU,CAAC,CAAC;EAE5C,MAAMe,eAAe,GAAG,IAAAlB,kBAAW,EAAC,MAAM;IACxCe,OAAO,CAAC,CAAC;IACT,IAAItB,YAAY,IAAIG,WAAW,CAACC,OAAO,KAAK,IAAI,EAAE;MAChDT,QAAQ,YAARA,QAAQ,CAAG,CAAC;IACd;EACF,CAAC,EAAE,CAAC2B,OAAO,EAAEtB,YAAY,EAAEL,QAAQ,CAAC,CAAC;EAErC,MAAM+B,wBAAwB,GAAG,IAAAnB,kBAAW,EACzCoB,MAAyC,IAAK,MAAM;IACnD/B,WAAW,YAAXA,WAAW,CAAG,CAAC;IACfyB,MAAM,CAACM,MAAM,CAAC,CAAC,CAAC;EAClB,CAAC,EACD,CAAC/B,WAAW,EAAEyB,MAAM,CACtB,CAAC;EAED,MAAM;IAAEO,oBAAoB;IAAEC;EAAoB,CAAC,GAAG,IAAAC,0BAAmB,EAAC;IACxE7B,YAAY;IACZN,QAAQ;IACRE;EACF,CAAC,CAAC;EAEF,OAAO;IACLI,YAAY;IACZa,OAAO;IACPF,SAAS;IACTC,aAAa;IACbG,eAAe;IACfC,YAAY;IACZS,wBAAwB;IACxBK,YAAY,EAAE;MACZb,MAAM;MACNC,KAAK;MACL3B,KAAK,EAAE4B,aAAa;MACpBG,MAAM;MACNS,WAAW,EAAEP;IACf,CAAC;IACDG,oBAAoB;IACpBC;EACF,CAAC;AACH","ignoreList":[]}

package/dist/cjs/components/media-control/use-media-control.js

@@ -10,7 +10,8 @@ var _autoFieldTypes = require("../../auto-field-types");
 const MEDIA_TYPE_TO_CATEGORY = {
   [_mediaUtils.MEDIA_TYPES.IMAGE]: 'IMAGE',
   [_mediaUtils.MEDIA_TYPES.VIDEO]: 'VIDEO',
-  [_mediaUtils.MEDIA_TYPES.AUDIO]: 'MUSIC'
+  [_mediaUtils.MEDIA_TYPES.AUDIO]: 'MUSIC',
+  [_mediaUtils.MEDIA_TYPES.VECTOR_ART]: 'VECTOR_ART'
 };
 
 /**
@@ -49,10 +50,10 @@ const extractMediaUri = mediaItem => {
     media
   } = mediaItem || {};
   if (media) {
-    var _media$image, _media$video, _media$document;
+    var _media$image, _media$video, _media$document, _media$vector;
     return (
       // Try each media type: the URI is nested under media.[type].[type], fallback for direct string values
-      ((_media$image = media.image) == null ? void 0 : _media$image.image) || typeof media.image === 'string' && media.image || ((_media$video = media.video) == null ? void 0 : _media$video.video) || typeof media.video === 'string' && media.video || ((_media$document = media.document) == null ? void 0 : _media$document.document) || typeof media.document === 'string' && media.document || extractAudioUrl(media.audio) || ''
+      ((_media$image = media.image) == null ? void 0 : _media$image.image) || typeof media.image === 'string' && media.image || ((_media$video = media.video) == null ? void 0 : _media$video.video) || typeof media.video === 'string' && media.video || ((_media$document = media.document) == null ? void 0 : _media$document.document) || typeof media.document === 'string' && media.document || ((_media$vector = media.vector) == null ? void 0 : _media$vector.vector) || typeof media.vector === 'string' && media.vector || extractAudioUrl(media.audio) || ''
     );
   }
   return '';

package/dist/cjs/components/media-control/use-media-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_react2","_media","_mediaUtils","_autoFieldTypes","MEDIA_TYPE_TO_CATEGORY","MEDIA_TYPES","IMAGE","VIDEO","AUDIO","extractAudioUrl","audio","_audio$assets","firstAsset","assets","url","undefined","extractMediaUri","mediaItem","media","_media$image","_media$video","_media$document","image","video","document","useMediaControl","mediaType","readOnly","autoFocus","initialLoading","inputRef","viewRef","onFocus","onBlur","params","value","multiSelect","container","useContext","WixPatternsContainerContext","openMediaManager","loading","setLoading","useState","Boolean","mediaRequested","useRef","setActive","useCallback","_viewRef$current","_inputRef$current","current","focus","_inputRef$current2","useEffect","onMediaLoad","callMedia","index","onChange","category","Error","mediaManagerData","items","files","length","newURIs","map","newValue","splice","e","console","error","downloadMedia","mediaUri","_result$downloadUrls","result","generateFileDownloadUrl","downloadUrl","downloadUrls","executeDownloading","getMediaURL"],"sources":["../../../../src/components/media-control/use-media-control.ts"],"sourcesContent":["import { useRef, useState, useEffect, useCallback, useContext } from 'react';\nimport { WixPatternsContainerContext } from '@wix/bex-core/react';\nimport { files } from '@wix/media';\n\nimport { executeDownloading, MEDIA_TYPES } from '../../utils/media-utils';\nimport { getMediaURL } from '../../auto-field-types';\n\ntype Focusable = { focus: () => void };\ntype FocusableRef =\n  | React.RefObject<Focusable | undefined>\n  | React.MutableRefObject<Focusable | undefined>;\n\ninterface UseMediaControlBaseParams {\n  mediaType: MEDIA_TYPES;\n  autoFocus?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  readOnly?: boolean;\n  initialLoading?: boolean;\n  inputRef?: FocusableRef;\n  viewRef?: FocusableRef;\n}\n\ninterface UseSingleMediaControlParams extends UseMediaControlBaseParams {\n  value?: string;\n  onChange?: (value: string) => void;\n  multiSelect?: false;\n}\n\ninterface UseMultiMediaControlParams extends UseMediaControlBaseParams {\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  multiSelect: true;\n}\n\nexport type UseMediaControlParams =\n  | UseSingleMediaControlParams\n  | UseMultiMediaControlParams;\n\ninterface UseMediaControlBaseReturnType {\n  loading: boolean;\n  onMediaLoad: () => void;\n}\n\ninterface UseSingleMediaControlReturnType\n  extends UseMediaControlBaseReturnType {\n  callMedia(): Promise<boolean>;\n  downloadMedia(mediaUri?: string): Promise<void>;\n}\n\ninterface UseMultiMediaControlReturnType extends UseMediaControlBaseReturnType {\n  callMedia(index?: number): Promise<boolean>;\n  downloadMedia(mediaUri?: string): Promise<void>;\n}\n\nexport type UseMediaControlReturnType =\n  | UseSingleMediaControlReturnType\n  | UseMultiMediaControlReturnType;\n\nconst MEDIA_TYPE_TO_CATEGORY: Partial<Record<MEDIA_TYPES, string>> = {\n  [MEDIA_TYPES.IMAGE]: 'IMAGE',\n  [MEDIA_TYPES.VIDEO]: 'VIDEO',\n  [MEDIA_TYPES.AUDIO]: 'MUSIC',\n};\n\n/**\n * Extracts a playable URL from media.audio, which may be:\n *   - a string (wix:audio:// URI or direct URL)\n *   - an object with { audio: string } (nested URI)\n *   - an object with { assets: [{ url }] } or { assets: [string] }\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst extractAudioUrl = (audio: any): string | undefined => {\n  if (audio) {\n    if (typeof audio === 'string') {\n      return audio;\n    }\n    if (typeof audio.audio === 'string') {\n      return audio.audio;\n    }\n    const firstAsset = audio.assets?.[0];\n    if (typeof firstAsset === 'string') {\n      return firstAsset;\n    }\n    if (typeof firstAsset?.url === 'string') {\n      return firstAsset.url;\n    }\n  }\n  return undefined;\n};\n\n/**\n * Extracts the Wix media URI from media manager result.\n * Media manager returns different structures for different media types.\n */\nconst extractMediaUri = (mediaItem: any): string => {\n  const { media } = mediaItem || {};\n  if (media) {\n    return (\n      // Try each media type: the URI is nested under media.[type].[type], fallback for direct string values\n      media.image?.image ||\n      (typeof media.image === 'string' && media.image) ||\n      media.video?.video ||\n      (typeof media.video === 'string' && media.video) ||\n      media.document?.document ||\n      (typeof media.document === 'string' && media.document) ||\n      extractAudioUrl(media.audio) ||\n      ''\n    );\n  }\n\n  return '';\n};\n\nexport function useMediaControl(\n  params: UseSingleMediaControlParams,\n): UseSingleMediaControlReturnType;\n\nexport function useMediaControl(\n  params: UseMultiMediaControlParams,\n): UseMultiMediaControlReturnType;\n\nexport function useMediaControl({\n  mediaType,\n  readOnly,\n  autoFocus,\n  initialLoading,\n  inputRef,\n  viewRef,\n  onFocus,\n  onBlur,\n  ...params\n}: UseMediaControlParams): UseMediaControlReturnType {\n  const { value, multiSelect } = params;\n  const container = useContext(WixPatternsContainerContext);\n  const openMediaManager = container?.openMediaManager;\n\n  const [loading, setLoading] = useState(Boolean(initialLoading && value));\n  const mediaRequested = useRef(false);\n\n  const setActive = useCallback(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    if (value) {\n      viewRef && viewRef?.current?.focus();\n      !viewRef && inputRef?.current?.focus();\n    } else {\n      inputRef?.current?.focus();\n    }\n  }, [autoFocus, value, inputRef, viewRef]);\n\n  // `loading` is a dependency because the focus target does not exist while the\n  // loader placeholder is up — the effect has to run again once it is gone.\n  useEffect(() => setActive(), [setActive, loading]);\n\n  const onMediaLoad = useCallback(() => setLoading(false), []);\n\n  const callMedia = useCallback(\n    async (index?: number): Promise<boolean> => {\n      if (mediaRequested.current || readOnly) {\n        return false;\n      }\n\n      if (!params.onChange) {\n        return false;\n      }\n\n      mediaRequested.current = true;\n\n      onFocus?.();\n      setLoading(true);\n\n      try {\n        const category = MEDIA_TYPE_TO_CATEGORY[mediaType];\n        if (!openMediaManager) {\n          throw new Error(\n            'Media Control Error: openMediaManager is not available in the current context.',\n          );\n        }\n        const mediaManagerData = await openMediaManager({\n          multiSelect: Boolean(multiSelect),\n          ...(category && { category }),\n        });\n\n        onBlur?.();\n        setLoading(false);\n\n        setActive();\n\n        mediaRequested.current = false;\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const items =\n          mediaManagerData?.items || (mediaManagerData as any)?.files;\n\n        if (!items?.length) {\n          return false;\n        }\n\n        if (params.multiSelect) {\n          const newURIs = items.map(extractMediaUri);\n\n          if (!newURIs.length) {\n            throw new Error(\n              `Media Control Error: Media Manager returns not-covered Multi-Document data.`,\n            );\n          }\n\n          if (typeof index === 'number') {\n            const newValue = value ? [...value] : [];\n            newValue.splice(index, 1, ...newURIs);\n            params.onChange(newValue);\n          } else {\n            params.onChange([...((value as string[]) ?? []), ...newURIs]);\n          }\n        } else {\n          params.onChange(extractMediaUri(items[0]));\n        }\n        return true;\n      } catch (e) {\n        setLoading(false);\n        mediaRequested.current = false;\n        console.error(`Media Control Error:`, e);\n        return false;\n      }\n    },\n    [\n      mediaType,\n      multiSelect,\n      onBlur,\n      onFocus,\n      openMediaManager,\n      params,\n      readOnly,\n      setActive,\n      value,\n    ],\n  );\n\n  const downloadMedia = useCallback(async (mediaUri?: string) => {\n    if (!mediaUri) {\n      return;\n    }\n\n    try {\n      const result = await files.generateFileDownloadUrl(mediaUri);\n      const downloadUrl = result.downloadUrls?.[0]?.url;\n      if (!downloadUrl) {\n        throw new Error('No download URL returned');\n      }\n      return executeDownloading(downloadUrl);\n    } catch (error) {\n      // Fallback: open the static URL in a new tab\n      console.error('Media download error, falling back to static URL:', error);\n      return executeDownloading(getMediaURL(mediaUri));\n    }\n  }, []);\n\n  return {\n    loading,\n    callMedia,\n    downloadMedia,\n    onMediaLoad,\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_react2","_media","_mediaUtils","_autoFieldTypes","MEDIA_TYPE_TO_CATEGORY","MEDIA_TYPES","IMAGE","VIDEO","AUDIO","VECTOR_ART","extractAudioUrl","audio","_audio$assets","firstAsset","assets","url","undefined","extractMediaUri","mediaItem","media","_media$image","_media$video","_media$document","_media$vector","image","video","document","vector","useMediaControl","mediaType","readOnly","autoFocus","initialLoading","inputRef","viewRef","onFocus","onBlur","params","value","multiSelect","container","useContext","WixPatternsContainerContext","openMediaManager","loading","setLoading","useState","Boolean","mediaRequested","useRef","setActive","useCallback","_viewRef$current","_inputRef$current","current","focus","_inputRef$current2","useEffect","onMediaLoad","callMedia","index","onChange","category","Error","mediaManagerData","items","files","length","newURIs","map","newValue","splice","e","console","error","downloadMedia","mediaUri","_result$downloadUrls","result","generateFileDownloadUrl","downloadUrl","downloadUrls","executeDownloading","getMediaURL"],"sources":["../../../../src/components/media-control/use-media-control.ts"],"sourcesContent":["import { useRef, useState, useEffect, useCallback, useContext } from 'react';\nimport { WixPatternsContainerContext } from '@wix/bex-core/react';\nimport { files } from '@wix/media';\n\nimport { executeDownloading, MEDIA_TYPES } from '../../utils/media-utils';\nimport { getMediaURL } from '../../auto-field-types';\n\ntype Focusable = { focus: () => void };\ntype FocusableRef =\n  | React.RefObject<Focusable | undefined>\n  | React.MutableRefObject<Focusable | undefined>;\n\ninterface UseMediaControlBaseParams {\n  mediaType: MEDIA_TYPES;\n  autoFocus?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  readOnly?: boolean;\n  initialLoading?: boolean;\n  inputRef?: FocusableRef;\n  viewRef?: FocusableRef;\n}\n\ninterface UseSingleMediaControlParams extends UseMediaControlBaseParams {\n  value?: string;\n  onChange?: (value: string) => void;\n  multiSelect?: false;\n}\n\ninterface UseMultiMediaControlParams extends UseMediaControlBaseParams {\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  multiSelect: true;\n}\n\nexport type UseMediaControlParams =\n  | UseSingleMediaControlParams\n  | UseMultiMediaControlParams;\n\ninterface UseMediaControlBaseReturnType {\n  loading: boolean;\n  onMediaLoad: () => void;\n}\n\ninterface UseSingleMediaControlReturnType\n  extends UseMediaControlBaseReturnType {\n  callMedia(): Promise<boolean>;\n  downloadMedia(mediaUri?: string): Promise<void>;\n}\n\ninterface UseMultiMediaControlReturnType extends UseMediaControlBaseReturnType {\n  callMedia(index?: number): Promise<boolean>;\n  downloadMedia(mediaUri?: string): Promise<void>;\n}\n\nexport type UseMediaControlReturnType =\n  | UseSingleMediaControlReturnType\n  | UseMultiMediaControlReturnType;\n\nconst MEDIA_TYPE_TO_CATEGORY: Partial<Record<MEDIA_TYPES, string>> = {\n  [MEDIA_TYPES.IMAGE]: 'IMAGE',\n  [MEDIA_TYPES.VIDEO]: 'VIDEO',\n  [MEDIA_TYPES.AUDIO]: 'MUSIC',\n  [MEDIA_TYPES.VECTOR_ART]: 'VECTOR_ART',\n};\n\n/**\n * Extracts a playable URL from media.audio, which may be:\n *   - a string (wix:audio:// URI or direct URL)\n *   - an object with { audio: string } (nested URI)\n *   - an object with { assets: [{ url }] } or { assets: [string] }\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst extractAudioUrl = (audio: any): string | undefined => {\n  if (audio) {\n    if (typeof audio === 'string') {\n      return audio;\n    }\n    if (typeof audio.audio === 'string') {\n      return audio.audio;\n    }\n    const firstAsset = audio.assets?.[0];\n    if (typeof firstAsset === 'string') {\n      return firstAsset;\n    }\n    if (typeof firstAsset?.url === 'string') {\n      return firstAsset.url;\n    }\n  }\n  return undefined;\n};\n\n/**\n * Extracts the Wix media URI from media manager result.\n * Media manager returns different structures for different media types.\n */\nconst extractMediaUri = (mediaItem: any): string => {\n  const { media } = mediaItem || {};\n  if (media) {\n    return (\n      // Try each media type: the URI is nested under media.[type].[type], fallback for direct string values\n      media.image?.image ||\n      (typeof media.image === 'string' && media.image) ||\n      media.video?.video ||\n      (typeof media.video === 'string' && media.video) ||\n      media.document?.document ||\n      (typeof media.document === 'string' && media.document) ||\n      media.vector?.vector ||\n      (typeof media.vector === 'string' && media.vector) ||\n      extractAudioUrl(media.audio) ||\n      ''\n    );\n  }\n\n  return '';\n};\n\nexport function useMediaControl(\n  params: UseSingleMediaControlParams,\n): UseSingleMediaControlReturnType;\n\nexport function useMediaControl(\n  params: UseMultiMediaControlParams,\n): UseMultiMediaControlReturnType;\n\nexport function useMediaControl({\n  mediaType,\n  readOnly,\n  autoFocus,\n  initialLoading,\n  inputRef,\n  viewRef,\n  onFocus,\n  onBlur,\n  ...params\n}: UseMediaControlParams): UseMediaControlReturnType {\n  const { value, multiSelect } = params;\n  const container = useContext(WixPatternsContainerContext);\n  const openMediaManager = container?.openMediaManager;\n\n  const [loading, setLoading] = useState(Boolean(initialLoading && value));\n  const mediaRequested = useRef(false);\n\n  const setActive = useCallback(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    if (value) {\n      viewRef && viewRef?.current?.focus();\n      !viewRef && inputRef?.current?.focus();\n    } else {\n      inputRef?.current?.focus();\n    }\n  }, [autoFocus, value, inputRef, viewRef]);\n\n  // `loading` is a dependency because the focus target does not exist while the\n  // loader placeholder is up — the effect has to run again once it is gone.\n  useEffect(() => setActive(), [setActive, loading]);\n\n  const onMediaLoad = useCallback(() => setLoading(false), []);\n\n  const callMedia = useCallback(\n    async (index?: number): Promise<boolean> => {\n      if (mediaRequested.current || readOnly) {\n        return false;\n      }\n\n      if (!params.onChange) {\n        return false;\n      }\n\n      mediaRequested.current = true;\n\n      onFocus?.();\n      setLoading(true);\n\n      try {\n        const category = MEDIA_TYPE_TO_CATEGORY[mediaType];\n        if (!openMediaManager) {\n          throw new Error(\n            'Media Control Error: openMediaManager is not available in the current context.',\n          );\n        }\n        const mediaManagerData = await openMediaManager({\n          multiSelect: Boolean(multiSelect),\n          ...(category && { category }),\n        });\n\n        onBlur?.();\n        setLoading(false);\n\n        setActive();\n\n        mediaRequested.current = false;\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const items =\n          mediaManagerData?.items || (mediaManagerData as any)?.files;\n\n        if (!items?.length) {\n          return false;\n        }\n\n        if (params.multiSelect) {\n          const newURIs = items.map(extractMediaUri);\n\n          if (!newURIs.length) {\n            throw new Error(\n              `Media Control Error: Media Manager returns not-covered Multi-Document data.`,\n            );\n          }\n\n          if (typeof index === 'number') {\n            const newValue = value ? [...value] : [];\n            newValue.splice(index, 1, ...newURIs);\n            params.onChange(newValue);\n          } else {\n            params.onChange([...((value as string[]) ?? []), ...newURIs]);\n          }\n        } else {\n          params.onChange(extractMediaUri(items[0]));\n        }\n        return true;\n      } catch (e) {\n        setLoading(false);\n        mediaRequested.current = false;\n        console.error(`Media Control Error:`, e);\n        return false;\n      }\n    },\n    [\n      mediaType,\n      multiSelect,\n      onBlur,\n      onFocus,\n      openMediaManager,\n      params,\n      readOnly,\n      setActive,\n      value,\n    ],\n  );\n\n  const downloadMedia = useCallback(async (mediaUri?: string) => {\n    if (!mediaUri) {\n      return;\n    }\n\n    try {\n      const result = await files.generateFileDownloadUrl(mediaUri);\n      const downloadUrl = result.downloadUrls?.[0]?.url;\n      if (!downloadUrl) {\n        throw new Error('No download URL returned');\n      }\n      return executeDownloading(downloadUrl);\n    } catch (error) {\n      // Fallback: open the static URL in a new tab\n      console.error('Media download error, falling back to static URL:', error);\n      return executeDownloading(getMediaURL(mediaUri));\n    }\n  }, []);\n\n  return {\n    loading,\n    callMedia,\n    downloadMedia,\n    onMediaLoad,\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/media-gallery/form-media-gallery-field.st.css.js

@@ -5,22 +5,22 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "formmediagalleryfield1626967962";
+var _namespace_ = "formmediagalleryfield3518412376";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "formmediagalleryfield1626967962__root",
-  "container": "formmediagalleryfield1626967962__container",
-  "viewBox": "formmediagalleryfield1626967962__viewBox",
-  "addItemWrapper": "formmediagalleryfield1626967962__addItemWrapper",
-  "addItem": "formmediagalleryfield1626967962__addItem",
-  "overlay": "formmediagalleryfield1626967962__overlay",
-  "image": "formmediagalleryfield1626967962__image",
-  "previewImage": "formmediagalleryfield1626967962__previewImage",
-  "previewVideo": "formmediagalleryfield1626967962__previewVideo"
+  "root": "formmediagalleryfield3518412376__root",
+  "container": "formmediagalleryfield3518412376__container",
+  "viewBox": "formmediagalleryfield3518412376__viewBox",
+  "addItemWrapper": "formmediagalleryfield3518412376__addItemWrapper",
+  "addItem": "formmediagalleryfield3518412376__addItem",
+  "overlay": "formmediagalleryfield3518412376__overlay",
+  "image": "formmediagalleryfield3518412376__image",
+  "previewImage": "formmediagalleryfield3518412376__previewImage",
+  "previewVideo": "formmediagalleryfield3518412376__previewVideo"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/media-gallery/form-media-gallery-field.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-gallery/form-media-gallery-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formmediagalleryfield1626967962\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"formmediagalleryfield1626967962__root\",\"container\":\"formmediagalleryfield1626967962__container\",\"viewBox\":\"formmediagalleryfield1626967962__viewBox\",\"addItemWrapper\":\"formmediagalleryfield1626967962__addItemWrapper\",\"addItem\":\"formmediagalleryfield1626967962__addItem\",\"overlay\":\"formmediagalleryfield1626967962__overlay\",\"image\":\"formmediagalleryfield1626967962__image\",\"previewImage\":\"formmediagalleryfield1626967962__previewImage\",\"previewVideo\":\"formmediagalleryfield1626967962__previewVideo\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,iCAAiC;AACnD,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,uCAAuC;EAAC,WAAW,EAAC,4CAA4C;EAAC,SAAS,EAAC,0CAA0C;EAAC,gBAAgB,EAAC,iDAAiD;EAAC,SAAS,EAAC,0CAA0C;EAAC,SAAS,EAAC,0CAA0C;EAAC,OAAO,EAAC,wCAAwC;EAAC,cAAc,EAAC,+CAA+C;EAAC,cAAc,EAAC;AAA+C,CAAC;AACxgB,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-gallery/form-media-gallery-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formmediagalleryfield3518412376\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"formmediagalleryfield3518412376__root\",\"container\":\"formmediagalleryfield3518412376__container\",\"viewBox\":\"formmediagalleryfield3518412376__viewBox\",\"addItemWrapper\":\"formmediagalleryfield3518412376__addItemWrapper\",\"addItem\":\"formmediagalleryfield3518412376__addItem\",\"overlay\":\"formmediagalleryfield3518412376__overlay\",\"image\":\"formmediagalleryfield3518412376__image\",\"previewImage\":\"formmediagalleryfield3518412376__previewImage\",\"previewVideo\":\"formmediagalleryfield3518412376__previewVideo\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,iCAAiC;AACnD,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,uCAAuC;EAAC,WAAW,EAAC,4CAA4C;EAAC,SAAS,EAAC,0CAA0C;EAAC,gBAAgB,EAAC,iDAAiD;EAAC,SAAS,EAAC,0CAA0C;EAAC,SAAS,EAAC,0CAA0C;EAAC,OAAO,EAAC,wCAAwC;EAAC,cAAc,EAAC,+CAA+C;EAAC,cAAc,EAAC;AAA+C,CAAC;AACxgB,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image/media-image.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "mediaimage4072982184";
+var _namespace_ = "mediaimage3884357760";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "mediaimage4072982184__root"
+  "root": "mediaimage3884357760__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};
@@ -23,7 +23,7 @@ var vars = exports.vars = {
   "wsr-color-R20": "--wsr-color-R20",
   "wds-color-black-550": "--wds-color-black-550",
   "wsr-color-D55": "--wsr-color-D55",
-  "from": "--mediaimage4072982184-from",
-  "to": "--mediaimage4072982184-to"
+  "from": "--mediaimage3884357760-from",
+  "to": "--mediaimage3884357760-to"
 };
 //# sourceMappingURL=media-image.st.css.js.map

package/dist/cjs/components/media-image/media-image.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image/media-image.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediaimage4072982184\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"mediaimage4072982184__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-red-200\":\"--wds-color-red-200\",\"wsr-color-R20\":\"--wsr-color-R20\",\"wds-color-black-550\":\"--wds-color-black-550\",\"wsr-color-D55\":\"--wsr-color-D55\",\"from\":\"--mediaimage4072982184-from\",\"to\":\"--mediaimage4072982184-to\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA4B,CAAC;AACnD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,eAAe,EAAC,iBAAiB;EAAC,qBAAqB,EAAC,uBAAuB;EAAC,eAAe,EAAC,iBAAiB;EAAC,MAAM,EAAC,6BAA6B;EAAC,IAAI,EAAC;AAA2B,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image/media-image.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediaimage3884357760\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"mediaimage3884357760__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-red-200\":\"--wds-color-red-200\",\"wsr-color-R20\":\"--wsr-color-R20\",\"wds-color-black-550\":\"--wds-color-black-550\",\"wsr-color-D55\":\"--wsr-color-D55\",\"from\":\"--mediaimage3884357760-from\",\"to\":\"--mediaimage3884357760-to\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA4B,CAAC;AACnD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,eAAe,EAAC,iBAAiB;EAAC,qBAAqB,EAAC,uBAAuB;EAAC,eAAe,EAAC,iBAAiB;EAAC,MAAM,EAAC,6BAA6B;EAAC,IAAI,EAAC;AAA2B,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image/overlays/overlay.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "overlay3172753237";
+var _namespace_ = "overlay1342506184";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "overlay3172753237__root",
-  "iconOverlay": "overlay3172753237__iconOverlay"
+  "root": "overlay1342506184__root",
+  "iconOverlay": "overlay1342506184__iconOverlay"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/media-image/overlays/overlay.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/media-image/overlays/overlay.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"overlay3172753237\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"overlay3172753237__root\",\"iconOverlay\":\"overlay3172753237__iconOverlay\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {\"iconShadow\":\"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))\"}; \nexport var vars = {\"wds-color-white\":\"--wds-color-white\",\"wsr-color-D80\":\"--wsr-color-D80\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,mBAAmB;AACrC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,yBAAyB;EAAC,aAAa,EAAC;AAAgC,CAAC;AAC/F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG;EAAC,YAAY,EAAC;AAA8C,CAAC;AAC1E,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/media-image/overlays/overlay.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"overlay1342506184\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"overlay1342506184__root\",\"iconOverlay\":\"overlay1342506184__iconOverlay\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {\"iconShadow\":\"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))\"}; \nexport var vars = {\"wds-color-white\":\"--wds-color-white\",\"wsr-color-D80\":\"--wsr-color-D80\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,mBAAmB;AACrC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,yBAAyB;EAAC,aAAa,EAAC;AAAgC,CAAC;AAC/F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG;EAAC,YAAY,EAAC;AAA8C,CAAC;AAC1E,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image-field/cell-media-image-edit.st.css.js

@@ -5,20 +5,20 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "cellmediaimageedit906118710";
+var _namespace_ = "cellmediaimageedit3201982401";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "cellmediaimageedit906118710__root",
-  "view": "cellmediaimageedit906118710__view",
-  "anchor": "cellmediaimageedit906118710__anchor",
-  "anchorBox": "cellmediaimageedit906118710__anchorBox",
-  "popoverContent": "cellmediaimageedit906118710__popoverContent",
-  "image": "cellmediaimageedit906118710__image",
-  "imageActions": "cellmediaimageedit906118710__imageActions"
+  "root": "cellmediaimageedit3201982401__root",
+  "view": "cellmediaimageedit3201982401__view",
+  "anchor": "cellmediaimageedit3201982401__anchor",
+  "anchorBox": "cellmediaimageedit3201982401__anchorBox",
+  "popoverContent": "cellmediaimageedit3201982401__popoverContent",
+  "image": "cellmediaimageedit3201982401__image",
+  "imageActions": "cellmediaimageedit3201982401__imageActions"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/media-image-field/cell-media-image-edit.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/cell-media-image-edit.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellmediaimageedit906118710\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"cellmediaimageedit906118710__root\",\"view\":\"cellmediaimageedit906118710__view\",\"anchor\":\"cellmediaimageedit906118710__anchor\",\"anchorBox\":\"cellmediaimageedit906118710__anchorBox\",\"popoverContent\":\"cellmediaimageedit906118710__popoverContent\",\"image\":\"cellmediaimageedit906118710__image\",\"imageActions\":\"cellmediaimageedit906118710__imageActions\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-transparent-primary\":\"--wds-color-fill-transparent-primary\",\"wsr-color-D10\":\"--wsr-color-D10\",\"wds-image-border-radius-default\":\"--wds-image-border-radius-default\",\"wds-space-100\":\"--wds-space-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,6BAA6B;AAC/C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,mCAAmC;EAAC,MAAM,EAAC,mCAAmC;EAAC,QAAQ,EAAC,qCAAqC;EAAC,WAAW,EAAC,wCAAwC;EAAC,gBAAgB,EAAC,6CAA6C;EAAC,OAAO,EAAC,oCAAoC;EAAC,cAAc,EAAC;AAA2C,CAAC;AAChX,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oCAAoC,EAAC,sCAAsC;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/cell-media-image-edit.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellmediaimageedit3201982401\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"cellmediaimageedit3201982401__root\",\"view\":\"cellmediaimageedit3201982401__view\",\"anchor\":\"cellmediaimageedit3201982401__anchor\",\"anchorBox\":\"cellmediaimageedit3201982401__anchorBox\",\"popoverContent\":\"cellmediaimageedit3201982401__popoverContent\",\"image\":\"cellmediaimageedit3201982401__image\",\"imageActions\":\"cellmediaimageedit3201982401__imageActions\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-transparent-primary\":\"--wds-color-fill-transparent-primary\",\"wsr-color-D10\":\"--wsr-color-D10\",\"wds-image-border-radius-default\":\"--wds-image-border-radius-default\",\"wds-space-100\":\"--wds-space-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,8BAA8B;AAChD,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,oCAAoC;EAAC,MAAM,EAAC,oCAAoC;EAAC,QAAQ,EAAC,sCAAsC;EAAC,WAAW,EAAC,yCAAyC;EAAC,gBAAgB,EAAC,8CAA8C;EAAC,OAAO,EAAC,qCAAqC;EAAC,cAAc,EAAC;AAA4C,CAAC;AACvX,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oCAAoC,EAAC,sCAAsC;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image-field/media-image-view.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "mediaimageview1913181924";
+var _namespace_ = "mediaimageview1432632342";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "mediaimageview1913181924__root",
-  "altTextPlaceholder": "mediaimageview1913181924__altTextPlaceholder"
+  "root": "mediaimageview1432632342__root",
+  "altTextPlaceholder": "mediaimageview1432632342__altTextPlaceholder"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/media-image-field/media-image-view.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/media-image-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediaimageview1913181924\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"mediaimageview1913181924__root\",\"altTextPlaceholder\":\"mediaimageview1913181924__altTextPlaceholder\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-text-standard-primary\":\"--wds-color-text-standard-primary\",\"wds-color-text-placeholder\":\"--wds-color-text-placeholder\",\"wsr-color-D40\":\"--wsr-color-D40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,oBAAoB,EAAC;AAA8C,CAAC;AAC3H,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,4BAA4B,EAAC,8BAA8B;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/media-image-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediaimageview1432632342\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"mediaimageview1432632342__root\",\"altTextPlaceholder\":\"mediaimageview1432632342__altTextPlaceholder\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-text-standard-primary\":\"--wds-color-text-standard-primary\",\"wds-color-text-placeholder\":\"--wds-color-text-placeholder\",\"wsr-color-D40\":\"--wsr-color-D40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,oBAAoB,EAAC;AAA8C,CAAC;AAC3H,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,4BAA4B,EAAC,8BAA8B;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/media-tag/web-media-tag/media-tag.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "mediatag2747949493";
+var _namespace_ = "mediatag1026054763";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "mediatag2747949493__root"
+  "root": "mediatag1026054763__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/media-tag/web-media-tag/media-tag.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/media-tag/web-media-tag/media-tag.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediatag2747949493\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"mediatag2747949493__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-blue-400\":\"--wds-color-blue-400\",\"wsr-color-B40\":\"--wsr-color-B40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,oBAAoB;AACtC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA0B,CAAC;AACjD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/media-tag/web-media-tag/media-tag.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediatag1026054763\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"mediatag1026054763__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-blue-400\":\"--wds-color-blue-400\",\"wsr-color-B40\":\"--wsr-color-B40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,oBAAoB;AACtC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA0B,CAAC;AACjD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/media-vector-art-field/cell-media-vector-art-edit.js

@@ -0,0 +1,179 @@
+"use strict";
+
+exports.__esModule = true;
+exports.CellMediaVectorArtEdit = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _lazy = require("@wix/wix-ui-icons-common/lazy");
+var _hooks = require("../../hooks");
+var _mediaUtils = require("../../utils/media-utils");
+var _mediaVectorArtValue = require("../../utils/media-vector-art-value");
+var _imageThumbnail = require("../image/image-thumbnail");
+var _thumbnailReplaceOverlay = require("../image/thumbnail-replace-overlay");
+var _mediaControl = require("../media-control");
+var _mediaVectorArtActions = require("./media-vector-art-actions");
+var _cellMediaVectorArtEditStCss = require("./cell-media-vector-art-edit.st.css.js");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-vector-art-field/cell-media-vector-art-edit.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CellMediaVectorArtEdit = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const vectorArt = (0, _mediaVectorArtValue.toMediaVectorArtValue)(value);
+  const [isPreviewOpen, setIsPreviewOpen] = (0, _react.useState)(false);
+  const deletedFromPreview = (0, _react.useRef)(false);
+  const mediaEdit = (0, _mediaControl.useCellMediaEdit)({
+    mediaType: _mediaUtils.MEDIA_TYPES.VECTOR_ART,
+    value: vectorArt,
+    onChange,
+    onCommit,
+    onCancel,
+    onStartEdit,
+    inputRef,
+    fromPick: _mediaVectorArtValue.fromVectorArtPick
+  });
+  const {
+    handleCallMedia,
+    handleDelete,
+    downloadMedia
+  } = mediaEdit;
+  const handleDownload = (0, _react.useCallback)(() => {
+    if (vectorArt) {
+      downloadMedia(vectorArt.uri);
+    }
+  }, [vectorArt, downloadMedia]);
+  const openPreview = (0, _react.useCallback)(() => {
+    onStartEdit == null || onStartEdit();
+    setIsPreviewOpen(true);
+  }, [onStartEdit]);
+  const closePreview = (0, _react.useCallback)(() => {
+    setIsPreviewOpen(false);
+    if (!deletedFromPreview.current) {
+      onCancel == null || onCancel();
+    }
+    deletedFromPreview.current = false;
+  }, [onCancel]);
+  const deleteFromPreview = (0, _react.useCallback)(() => {
+    deletedFromPreview.current = true;
+    handleDelete();
+  }, [handleDelete]);
+  const replaceFromPreview = (0, _react.useCallback)(() => {
+    setIsPreviewOpen(false);
+    handleCallMedia();
+  }, [handleCallMedia]);
+  return /*#__PURE__*/_react.default.createElement(_mediaControl.CellMediaEditShell, {
+    dataHook: dataHook,
+    mediaEdit: mediaEdit,
+    fieldType: _mediaControl.MediaFieldType.image,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 90,
+      columnNumber: 5
+    }
+  }, vectorArt ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('CMS.vectorArt.replace'),
+    appendTo: "window",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 97,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "data-hook": "media-vector-art-edit-thumbnail",
+    "aria-label": t('CMS.vectorArt.replace'),
+    className: _cellMediaVectorArtEditStCss.classes.thumbnailButton,
+    onClick: handleCallMedia,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 98,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_imageThumbnail.ImageThumbnail, {
+    value: vectorArt,
+    width: "36px",
+    height: "24px",
+    borderRadius: "0",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 105,
+      columnNumber: 15
+    }
+  }), /*#__PURE__*/_react.default.createElement(_thumbnailReplaceOverlay.ThumbnailReplaceOverlay, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 15
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_mediaVectorArtActions.MediaVectorArtActions, {
+    dataHook: "media-vector-art-edit",
+    placement: "cell",
+    onReplace: handleCallMedia,
+    onPreview: openPreview,
+    onDownload: handleDownload,
+    onDelete: handleDelete,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 114,
+      columnNumber: 11
+    }
+  }), /*#__PURE__*/_react.default.createElement(_mediaVectorArtActions.MediaVectorArtPreviewModal, {
+    isOpen: isPreviewOpen,
+    vectorArt: vectorArt,
+    onClose: closePreview,
+    onReplace: replaceFromPreview,
+    onDelete: deleteFromPreview,
+    onDownload: handleDownload,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 122,
+      columnNumber: 11
+    }
+  })) : /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('CMS.vectorArt.add'),
+    appendTo: "window",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 132,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    size: "tiny",
+    priority: "secondary",
+    dataHook: "media-vector-art-edit-add-button",
+    ariaLabel: t('CMS.vectorArt.add'),
+    onClick: handleCallMedia,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 133,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_lazy.Add, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 140,
+      columnNumber: 13
+    }
+  }))));
+};
+exports.CellMediaVectorArtEdit = CellMediaVectorArtEdit;
+CellMediaVectorArtEdit.displayName = 'CellMediaVectorArtEdit';
+//# sourceMappingURL=cell-media-vector-art-edit.js.map

package/dist/cjs/components/media-vector-art-field/cell-media-vector-art-edit.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_lazy","_hooks","_mediaUtils","_mediaVectorArtValue","_imageThumbnail","_thumbnailReplaceOverlay","_mediaControl","_mediaVectorArtActions","_cellMediaVectorArtEditStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CellMediaVectorArtEdit","value","onChange","onCommit","onCancel","onStartEdit","inputRef","dataHook","useTranslations","vectorArt","toMediaVectorArtValue","isPreviewOpen","setIsPreviewOpen","useState","deletedFromPreview","useRef","mediaEdit","useCellMediaEdit","mediaType","MEDIA_TYPES","VECTOR_ART","fromPick","fromVectorArtPick","handleCallMedia","handleDelete","downloadMedia","handleDownload","useCallback","uri","openPreview","closePreview","current","deleteFromPreview","replaceFromPreview","createElement","CellMediaEditShell","fieldType","MediaFieldType","image","__self","__source","fileName","lineNumber","columnNumber","Fragment","Tooltip","content","appendTo","type","className","classes","thumbnailButton","onClick","ImageThumbnail","width","height","borderRadius","ThumbnailReplaceOverlay","MediaVectorArtActions","placement","onReplace","onPreview","onDownload","onDelete","MediaVectorArtPreviewModal","isOpen","onClose","IconButton","size","priority","ariaLabel","Add","exports","displayName"],"sources":["../../../../src/components/media-vector-art-field/cell-media-vector-art-edit.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport { IconButton, Tooltip } from '@wix/design-system';\nimport { Add } from '@wix/wix-ui-icons-common/lazy';\nimport { useTranslations } from '../../hooks';\nimport type { MediaVectorArtValue } from '../../types/media-vector-art';\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport {\n  fromVectorArtPick,\n  toMediaVectorArtValue,\n} from '../../utils/media-vector-art-value';\nimport { ImageThumbnail } from '../image/image-thumbnail';\nimport { ThumbnailReplaceOverlay } from '../image/thumbnail-replace-overlay';\nimport {\n  CellMediaEditShell,\n  MediaFieldType,\n  useCellMediaEdit,\n} from '../media-control';\nimport {\n  MediaVectorArtActions,\n  MediaVectorArtPreviewModal,\n} from './media-vector-art-actions';\nimport { classes } from './cell-media-vector-art-edit.st.css.js';\n\nexport interface CellMediaVectorArtEditProps {\n  value: unknown;\n  onChange: (value: MediaVectorArtValue | null) => void;\n  onCommit: () => void;\n  onCancel?: () => void;\n  onStartEdit?: () => void;\n  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;\n  dataHook?: string;\n}\n\nexport const CellMediaVectorArtEdit: React.FC<CellMediaVectorArtEditProps> = ({\n  value,\n  onChange,\n  onCommit,\n  onCancel,\n  onStartEdit,\n  inputRef,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n  const vectorArt = toMediaVectorArtValue(value);\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const deletedFromPreview = useRef(false);\n\n  const mediaEdit = useCellMediaEdit({\n    mediaType: MEDIA_TYPES.VECTOR_ART,\n    value: vectorArt,\n    onChange,\n    onCommit,\n    onCancel,\n    onStartEdit,\n    inputRef,\n    fromPick: fromVectorArtPick,\n  });\n  const { handleCallMedia, handleDelete, downloadMedia } = mediaEdit;\n\n  const handleDownload = useCallback(() => {\n    if (vectorArt) {\n      downloadMedia(vectorArt.uri);\n    }\n  }, [vectorArt, downloadMedia]);\n\n  const openPreview = useCallback(() => {\n    onStartEdit?.();\n    setIsPreviewOpen(true);\n  }, [onStartEdit]);\n\n  const closePreview = useCallback(() => {\n    setIsPreviewOpen(false);\n    if (!deletedFromPreview.current) {\n      onCancel?.();\n    }\n    deletedFromPreview.current = false;\n  }, [onCancel]);\n\n  const deleteFromPreview = useCallback(() => {\n    deletedFromPreview.current = true;\n    handleDelete();\n  }, [handleDelete]);\n\n  const replaceFromPreview = useCallback(() => {\n    setIsPreviewOpen(false);\n    handleCallMedia();\n  }, [handleCallMedia]);\n\n  return (\n    <CellMediaEditShell\n      dataHook={dataHook}\n      mediaEdit={mediaEdit}\n      fieldType={MediaFieldType.image}\n    >\n      {vectorArt ? (\n        <>\n          <Tooltip content={t('CMS.vectorArt.replace')} appendTo=\"window\">\n            <button\n              type=\"button\"\n              data-hook=\"media-vector-art-edit-thumbnail\"\n              aria-label={t('CMS.vectorArt.replace')}\n              className={classes.thumbnailButton}\n              onClick={handleCallMedia}\n            >\n              <ImageThumbnail\n                value={vectorArt}\n                width=\"36px\"\n                height=\"24px\"\n                borderRadius=\"0\"\n              />\n              <ThumbnailReplaceOverlay />\n            </button>\n          </Tooltip>\n          <MediaVectorArtActions\n            dataHook=\"media-vector-art-edit\"\n            placement=\"cell\"\n            onReplace={handleCallMedia}\n            onPreview={openPreview}\n            onDownload={handleDownload}\n            onDelete={handleDelete}\n          />\n          <MediaVectorArtPreviewModal\n            isOpen={isPreviewOpen}\n            vectorArt={vectorArt}\n            onClose={closePreview}\n            onReplace={replaceFromPreview}\n            onDelete={deleteFromPreview}\n            onDownload={handleDownload}\n          />\n        </>\n      ) : (\n        <Tooltip content={t('CMS.vectorArt.add')} appendTo=\"window\">\n          <IconButton\n            size=\"tiny\"\n            priority=\"secondary\"\n            dataHook=\"media-vector-art-edit-add-button\"\n            ariaLabel={t('CMS.vectorArt.add')}\n            onClick={handleCallMedia}\n          >\n            <Add />\n          </IconButton>\n        </Tooltip>\n      )}\n    </CellMediaEditShell>\n  );\n};\n\nCellMediaVectorArtEdit.displayName = 'CellMediaVectorArtEdit';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/media-vector-art-field/cell-media-vector-art-edit.st.css

@@ -0,0 +1,8 @@
+.thumbnailButton {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: none;
+  line-height: 0;
+  cursor: pointer;
+}