@payloadcms/ui 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

package/dist/elements/ListHeader/TitleActions/ListEmptyTrashButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter, useSearchParams } from 'next/navigation.js'\nimport * as qs from 'qs-esm'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useRouteCache } from '../../../providers/RouteCache/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { Button } from '../../Button/index.js'\nimport { ConfirmationModal } from '../../ConfirmationModal/index.js'\nimport { Translation } from '../../Translation/index.js'\n\nconst confirmEmptyTrashSlug = 'confirm-empty-trash'\n\nexport function ListEmptyTrashButton({\n  collectionConfig,\n  hasDeletePermission,\n}: {\n  collectionConfig: ClientCollectionConfig\n  hasDeletePermission: boolean\n}) {\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { config } = useConfig()\n  const { openModal } = useModal()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const { clearRouteCache } = useRouteCache()\n\n  const [trashCount, setTrashCount] = React.useState<null | number>(null)\n\n  React.useEffect(() => {\n    const fetchTrashCount = async () => {\n      const queryString = qs.stringify(\n        {\n          depth: 0,\n          limit: 0,\n          locale,\n          trash: true,\n          where: {\n            deletedAt: {\n              exists: true,\n            },\n          },\n        },\n        { addQueryPrefix: true },\n      )\n\n      try {\n        const res = await requests.get(\n          `${config.serverURL}${config.routes.api}/${collectionConfig.slug}${queryString}`,\n          {\n            headers: {\n              'Accept-Language': i18n.language,\n              'Content-Type': 'application/json',\n            },\n          },\n        )\n\n        const json = await res.json()\n        setTrashCount(json?.totalDocs ?? 0)\n      } catch {\n        setTrashCount(0)\n      }\n    }\n\n    void fetchTrashCount()\n  }, [collectionConfig.slug, config, i18n.language, locale])\n\n  const handleEmptyTrash = React.useCallback(async () => {\n    if (!hasDeletePermission) {\n      return\n    }\n\n    const { slug, labels } = collectionConfig\n\n    const queryString = qs.stringify(\n      {\n        limit: 0,\n        locale,\n        trash: true,\n        where: {\n          deletedAt: {\n            exists: true,\n          },\n        },\n      },\n      { addQueryPrefix: true },\n    )\n\n    const res = await requests.delete(\n      `${config.serverURL}${config.routes.api}/${slug}${queryString}`,\n      {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      },\n    )\n\n    try {\n      const json = await res.json()\n      const deletedCount = json?.docs?.length || 0\n\n      if (res.status < 400) {\n        toast.success(\n          t('general:permanentlyDeletedCountSuccessfully', {\n            count: deletedCount,\n            label: getTranslation(labels?.plural, i18n),\n          }),\n        )\n      }\n\n      if (json?.errors?.length > 0) {\n        toast.error(json.message, {\n          description: json.errors.map((err) => err.message).join('\\n'),\n        })\n      }\n\n      router.replace(\n        qs.stringify(\n          {\n            ...Object.fromEntries(searchParams.entries()),\n            page: '1',\n          },\n          { addQueryPrefix: true },\n        ),\n      )\n\n      clearRouteCache()\n    } catch {\n      toast.error(t('error:unknown'))\n    }\n  }, [\n    collectionConfig,\n    config,\n    hasDeletePermission,\n    i18n,\n    t,\n    locale,\n    searchParams,\n    router,\n    clearRouteCache,\n  ])\n\n  return (\n    <React.Fragment>\n      <Button\n        aria-label={t('general:emptyTrashLabel', {\n          label: getTranslation(collectionConfig?.labels?.plural, i18n),\n        })}\n        buttonStyle=\"pill\"\n        disabled={trashCount === 0}\n        id=\"empty-trash-button\"\n        key=\"empty-trash-button\"\n        onClick={() => {\n          openModal(confirmEmptyTrashSlug)\n        }}\n        size=\"small\"\n      >\n        {t('general:emptyTrash')}\n      </Button>\n      <ConfirmationModal\n        body={\n          <Translation\n            elements={{\n              '0': ({ children }) => <strong>{children}</strong>,\n              '1': ({ children }) => <strong>{children}</strong>,\n            }}\n            i18nKey=\"general:aboutToPermanentlyDeleteTrash\"\n            t={t}\n            variables={{\n              count: trashCount ?? 0,\n              label: getTranslation(\n                trashCount === 1\n                  ? collectionConfig.labels?.singular\n                  : collectionConfig.labels?.plural,\n                i18n,\n              ),\n            }}\n          />\n        }\n        confirmingLabel={t('general:deleting')}\n        heading={t('general:confirmDeletion')}\n        modalSlug={confirmEmptyTrashSlug}\n        onConfirm={handleEmptyTrash}\n      />\n    </React.Fragment>\n  )\n}\n"],"names":["useModal","getTranslation","useRouter","useSearchParams","qs","React","toast","useConfig","useLocale","useRouteCache","useTranslation","requests","Button","ConfirmationModal","Translation","confirmEmptyTrashSlug","ListEmptyTrashButton","collectionConfig","hasDeletePermission","i18n","t","code","locale","config","openModal","router","searchParams","clearRouteCache","trashCount","setTrashCount","useState","useEffect","fetchTrashCount","queryString","stringify","depth","limit","trash","where","deletedAt","exists","addQueryPrefix","res","get","serverURL","routes","api","slug","headers","language","json","totalDocs","handleEmptyTrash","useCallback","labels","delete","deletedCount","docs","length","status","success","count","label","plural","errors","error","message","description","map","err","join","replace","Object","fromEntries","entries","page","Fragment","aria-label","buttonStyle","disabled","id","onClick","size","body","elements","children","strong","i18nKey","variables","singular","confirmingLabel","heading","modalSlug","onConfirm"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter, useSearchParams } from 'next/navigation.js'\nimport * as qs from 'qs-esm'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useRouteCache } from '../../../providers/RouteCache/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { Button } from '../../Button/index.js'\nimport { ConfirmationModal } from '../../ConfirmationModal/index.js'\nimport { Translation } from '../../Translation/index.js'\n\nconst confirmEmptyTrashSlug = 'confirm-empty-trash'\n\nexport function ListEmptyTrashButton({\n  collectionConfig,\n  hasDeletePermission,\n}: {\n  collectionConfig: ClientCollectionConfig\n  hasDeletePermission: boolean\n}) {\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { config } = useConfig()\n  const { openModal } = useModal()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const { clearRouteCache } = useRouteCache()\n\n  const [trashCount, setTrashCount] = React.useState<null | number>(null)\n\n  React.useEffect(() => {\n    const fetchTrashCount = async () => {\n      const queryString = qs.stringify(\n        {\n          depth: 0,\n          limit: 0,\n          locale,\n          trash: true,\n          where: {\n            deletedAt: {\n              exists: true,\n            },\n          },\n        },\n        { addQueryPrefix: true },\n      )\n\n      try {\n        const res = await requests.get(\n          `${config.serverURL}${config.routes.api}/${collectionConfig.slug}${queryString}`,\n          {\n            headers: {\n              'Accept-Language': i18n.language,\n              'Content-Type': 'application/json',\n            },\n          },\n        )\n\n        const json = await res.json()\n        setTrashCount(json?.totalDocs ?? 0)\n      } catch {\n        setTrashCount(0)\n      }\n    }\n\n    void fetchTrashCount()\n  }, [collectionConfig.slug, config, i18n.language, locale])\n\n  const handleEmptyTrash = React.useCallback(async () => {\n    if (!hasDeletePermission) {\n      return\n    }\n\n    const { slug, labels } = collectionConfig\n\n    const queryString = qs.stringify(\n      {\n        limit: 0,\n        locale,\n        trash: true,\n        where: {\n          deletedAt: {\n            exists: true,\n          },\n        },\n      },\n      { addQueryPrefix: true },\n    )\n\n    const res = await requests.delete(\n      `${config.serverURL}${config.routes.api}/${slug}${queryString}`,\n      {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      },\n    )\n\n    try {\n      const json = await res.json()\n      const deletedCount = json?.docs?.length || 0\n\n      if (res.status < 400) {\n        toast.success(\n          t('general:permanentlyDeletedCountSuccessfully', {\n            count: deletedCount,\n            label: getTranslation(labels?.plural, i18n),\n          }),\n        )\n      }\n\n      if (json?.errors?.length > 0) {\n        toast.error(json.message, {\n          description: json.errors.map((err) => err.message).join('\\n'),\n        })\n      }\n\n      router.replace(\n        qs.stringify(\n          {\n            ...Object.fromEntries(searchParams.entries()),\n            page: '1',\n          },\n          { addQueryPrefix: true },\n        ),\n      )\n\n      clearRouteCache()\n    } catch {\n      toast.error(t('error:unknown'))\n    }\n  }, [\n    collectionConfig,\n    config,\n    hasDeletePermission,\n    i18n,\n    t,\n    locale,\n    searchParams,\n    router,\n    clearRouteCache,\n  ])\n\n  return (\n    <React.Fragment>\n      <Button\n        aria-label={t('general:emptyTrashLabel', {\n          label: getTranslation(collectionConfig?.labels?.plural, i18n),\n        })}\n        buttonStyle=\"pill\"\n        disabled={trashCount === 0}\n        id=\"empty-trash-button\"\n        key=\"empty-trash-button\"\n        onClick={() => {\n          openModal(confirmEmptyTrashSlug)\n        }}\n        size=\"small\"\n      >\n        {t('general:emptyTrash')}\n      </Button>\n      <ConfirmationModal\n        body={\n          <Translation\n            elements={{\n              '0': ({ children }) => <strong>{children}</strong>,\n              '1': ({ children }) => <strong>{children}</strong>,\n            }}\n            i18nKey=\"general:aboutToPermanentlyDeleteTrash\"\n            t={t}\n            variables={{\n              count: trashCount ?? 0,\n              label: getTranslation(\n                trashCount === 1\n                  ? collectionConfig.labels?.singular\n                  : collectionConfig.labels?.plural,\n                i18n,\n              ),\n            }}\n          />\n        }\n        confirmingLabel={t('general:deleting')}\n        heading={t('general:confirmDeletion')}\n        modalSlug={confirmEmptyTrashSlug}\n        onConfirm={handleEmptyTrash}\n      />\n    </React.Fragment>\n  )\n}\n"],"names":["useModal","getTranslation","useRouter","useSearchParams","qs","React","toast","useConfig","useLocale","useRouteCache","useTranslation","requests","Button","ConfirmationModal","Translation","confirmEmptyTrashSlug","ListEmptyTrashButton","collectionConfig","hasDeletePermission","i18n","t","code","locale","config","openModal","router","searchParams","clearRouteCache","trashCount","setTrashCount","useState","useEffect","fetchTrashCount","queryString","stringify","depth","limit","trash","where","deletedAt","exists","addQueryPrefix","res","get","serverURL","routes","api","slug","headers","language","json","totalDocs","handleEmptyTrash","useCallback","labels","delete","deletedCount","docs","length","status","success","count","label","plural","errors","error","message","description","map","err","join","replace","Object","fromEntries","entries","page","Fragment","aria-label","buttonStyle","disabled","id","key","onClick","size","body","elements","children","strong","i18nKey","variables","singular","confirmingLabel","heading","modalSlug","onConfirm"],"mappings":"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"}

package/dist/elements/ListHeader/index.js

@@ -1,70 +1,21 @@
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
-import React from 'react';
 import './index.scss';
 export const listHeaderClass = 'list-header';
 export const ListHeader = (props)=>{
-    return /*#__PURE__*/ _jsxDEV("header", {
-        className: [
-            listHeaderClass,
-            props.className
-        ].filter(Boolean).join(' '),
-        children: [
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${listHeaderClass}__content`,
-                children: [
-                    /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${listHeaderClass}__title-and-actions`,
-                        children: [
-                            /*#__PURE__*/ _jsxDEV("h1", {
-                                className: `${listHeaderClass}__title`,
-                                children: props.title
-                            }, void 0, false, {
-                                fileName: "src/elements/ListHeader/index.tsx",
-                                lineNumber: 19,
-                                columnNumber: 11
-                            }, this),
-                            props.TitleActions.length ? /*#__PURE__*/ _jsxDEV("div", {
-                                className: `${listHeaderClass}__title-actions`,
-                                children: props.TitleActions
-                            }, void 0, false, {
-                                fileName: "src/elements/ListHeader/index.tsx",
-                                lineNumber: 21,
-                                columnNumber: 13
-                            }, this) : null
-                        ]
-                    }, void 0, true, {
-                        fileName: "src/elements/ListHeader/index.tsx",
-                        lineNumber: 18,
-                        columnNumber: 9
-                    }, this),
-                    props.Actions.length ? /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${listHeaderClass}__actions`,
-                        children: props.Actions
-                    }, void 0, false, {
-                        fileName: "src/elements/ListHeader/index.tsx",
-                        lineNumber: 25,
-                        columnNumber: 11
-                    }, this) : null
-                ]
-            }, void 0, true, {
-                fileName: "src/elements/ListHeader/index.tsx",
-                lineNumber: 17,
-                columnNumber: 7
-            }, this),
-            props.AfterListHeaderContent ? /*#__PURE__*/ _jsxDEV("div", {
-                className: `${listHeaderClass}__after-header-content`,
-                children: props.AfterListHeaderContent
-            }, void 0, false, {
-                fileName: "src/elements/ListHeader/index.tsx",
-                lineNumber: 29,
-                columnNumber: 9
-            }, this) : null
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/ListHeader/index.tsx",
-        lineNumber: 16,
-        columnNumber: 5
-    }, this);
+    return <header className={[
+        listHeaderClass,
+        props.className
+    ].filter(Boolean).join(' ')}>
+      <div className={`${listHeaderClass}__content`}>
+        <div className={`${listHeaderClass}__title-and-actions`}>
+          <h1 className={`${listHeaderClass}__title`}>{props.title}</h1>
+          {props.TitleActions.length ? <div className={`${listHeaderClass}__title-actions`}>{props.TitleActions}</div> : null}
+        </div>
+        {props.Actions.length ? <div className={`${listHeaderClass}__actions`}>{props.Actions}</div> : null}
+      </div>
+      {props.AfterListHeaderContent ? <div className={`${listHeaderClass}__after-header-content`}>
+          {props.AfterListHeaderContent}
+        </div> : null}
+    </header>;
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/ListHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListHeader/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nexport const listHeaderClass = 'list-header'\n\ntype ListHeaderProps = {\n  readonly Actions?: React.ReactNode[]\n  readonly AfterListHeaderContent?: React.ReactNode\n  readonly className?: string\n  readonly title: string\n  readonly TitleActions?: React.ReactNode[]\n}\nexport const ListHeader: React.FC<ListHeaderProps> = (props) => {\n  return (\n    <header className={[listHeaderClass, props.className].filter(Boolean).join(' ')}>\n      <div className={`${listHeaderClass}__content`}>\n        <div className={`${listHeaderClass}__title-and-actions`}>\n          <h1 className={`${listHeaderClass}__title`}>{props.title}</h1>\n          {props.TitleActions.length ? (\n            <div className={`${listHeaderClass}__title-actions`}>{props.TitleActions}</div>\n          ) : null}\n        </div>\n        {props.Actions.length ? (\n          <div className={`${listHeaderClass}__actions`}>{props.Actions}</div>\n        ) : null}\n      </div>\n      {props.AfterListHeaderContent ? (\n        <div className={`${listHeaderClass}__after-header-content`}>\n          {props.AfterListHeaderContent}\n        </div>\n      ) : null}\n    </header>\n  )\n}\n"],"names":["React","listHeaderClass","ListHeader","props","header","className","filter","Boolean","join","div","h1","title","TitleActions","length","Actions","AfterListHeaderContent"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,OAAO,MAAMC,kBAAkB,cAAa;AAS5C,OAAO,MAAMC,aAAwC,CAACC;IACpD,qBACE,QAACC;QAAOC,WAAW;YAACJ;YAAiBE,MAAME,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;;0BACzE,QAACC;gBAAIJ,WAAW,GAAGJ,gBAAgB,SAAS,CAAC;;kCAC3C,QAACQ;wBAAIJ,WAAW,GAAGJ,gBAAgB,mBAAmB,CAAC;;0CACrD,QAACS;gCAAGL,WAAW,GAAGJ,gBAAgB,OAAO,CAAC;0CAAGE,MAAMQ,KAAK;;;;;;4BACvDR,MAAMS,YAAY,CAACC,MAAM,iBACxB,QAACJ;gCAAIJ,WAAW,GAAGJ,gBAAgB,eAAe,CAAC;0CAAGE,MAAMS,YAAY;;;;;uCACtE;;;;;;;oBAELT,MAAMW,OAAO,CAACD,MAAM,iBACnB,QAACJ;wBAAIJ,WAAW,GAAGJ,gBAAgB,SAAS,CAAC;kCAAGE,MAAMW,OAAO;;;;;+BAC3D;;;;;;;YAELX,MAAMY,sBAAsB,iBAC3B,QAACN;gBAAIJ,WAAW,GAAGJ,gBAAgB,sBAAsB,CAAC;0BACvDE,MAAMY,sBAAsB;;;;;uBAE7B;;;;;;;AAGV,EAAC"}
+{"version":3,"sources":["../../../src/elements/ListHeader/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nexport const listHeaderClass = 'list-header'\n\ntype ListHeaderProps = {\n  readonly Actions?: React.ReactNode[]\n  readonly AfterListHeaderContent?: React.ReactNode\n  readonly className?: string\n  readonly title: string\n  readonly TitleActions?: React.ReactNode[]\n}\nexport const ListHeader: React.FC<ListHeaderProps> = (props) => {\n  return (\n    <header className={[listHeaderClass, props.className].filter(Boolean).join(' ')}>\n      <div className={`${listHeaderClass}__content`}>\n        <div className={`${listHeaderClass}__title-and-actions`}>\n          <h1 className={`${listHeaderClass}__title`}>{props.title}</h1>\n          {props.TitleActions.length ? (\n            <div className={`${listHeaderClass}__title-actions`}>{props.TitleActions}</div>\n          ) : null}\n        </div>\n        {props.Actions.length ? (\n          <div className={`${listHeaderClass}__actions`}>{props.Actions}</div>\n        ) : null}\n      </div>\n      {props.AfterListHeaderContent ? (\n        <div className={`${listHeaderClass}__after-header-content`}>\n          {props.AfterListHeaderContent}\n        </div>\n      ) : null}\n    </header>\n  )\n}\n"],"names":["listHeaderClass","ListHeader","props","header","className","filter","Boolean","join","div","h1","title","TitleActions","length","Actions","AfterListHeaderContent"],"mappings":"AAEA,OAAO,eAAc;AAErB,OAAO,MAAMA,kBAAkB,cAAa;AAS5C,OAAO,MAAMC,aAAwC,CAACC;IACpD,QACGC,OAAOC,WAAW;QAACJ;QAAiBE,MAAME,SAAS;KAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC,MAAM;MAC/E,CAACC,IAAIJ,WAAW,GAAGJ,gBAAgB,SAAS,CAAC,EAAE;QAC7C,CAACQ,IAAIJ,WAAW,GAAGJ,gBAAgB,mBAAmB,CAAC,EAAE;UACvD,CAACS,GAAGL,WAAW,GAAGJ,gBAAgB,OAAO,CAAC,GAAGE,MAAMQ,KAAK,GAAGD,GAAG;UAC9D,CAACP,MAAMS,YAAY,CAACC,MAAM,IACvBJ,IAAIJ,WAAW,GAAGJ,gBAAgB,eAAe,CAAC,GAAGE,MAAMS,YAAY,GAAGH,OACzE,KAAK;QACX,EAAEA,IAAI;QACN,CAACN,MAAMW,OAAO,CAACD,MAAM,IAClBJ,IAAIJ,WAAW,GAAGJ,gBAAgB,SAAS,CAAC,GAAGE,MAAMW,OAAO,GAAGL,OAC9D,KAAK;MACX,EAAEA,IAAI;MACN,CAACN,MAAMY,sBAAsB,IAC1BN,IAAIJ,WAAW,GAAGJ,gBAAgB,sBAAsB,CAAC,EAAE;UAC1D,CAACE,MAAMY,sBAAsB,CAAC;QAChC,EAAEN,OACA,KAAK;IACX,EAAEL;AAEN,EAAC"}

package/dist/elements/ListSelection/index.js

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
@@ -17,86 +16,28 @@ const baseClass = 'list-selection';
    * @example edit, delete, publish, unpublish
    */ export function ListSelection_v4({ count, ListActions, SelectionActions }) {
     const { t } = useTranslation();
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: baseClass,
-        children: [
-            /*#__PURE__*/ _jsxDEV("span", {
-                children: t('general:selectedCount', {
-                    count,
-                    label: ''
-                })
-            }, void 0, false, {
-                fileName: "src/elements/ListSelection/index.tsx",
-                lineNumber: 35,
-                columnNumber: 7
-            }, this),
-            ListActions && ListActions.length > 0 && /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsxDEV("span", {
-                        children: "—"
-                    }, void 0, false, {
-                        fileName: "src/elements/ListSelection/index.tsx",
-                        lineNumber: 38,
-                        columnNumber: 11
-                    }, this),
-                    /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${baseClass}__actions`,
-                        children: ListActions
-                    }, void 0, false, {
-                        fileName: "src/elements/ListSelection/index.tsx",
-                        lineNumber: 39,
-                        columnNumber: 11
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/elements/ListSelection/index.tsx",
-                lineNumber: 37,
-                columnNumber: 9
-            }, this),
-            SelectionActions && SelectionActions.length > 0 && /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsxDEV("span", {
-                        children: "—"
-                    }, void 0, false, {
-                        fileName: "src/elements/ListSelection/index.tsx",
-                        lineNumber: 44,
-                        columnNumber: 11
-                    }, this),
-                    /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${baseClass}__actions`,
-                        children: SelectionActions
-                    }, void 0, false, {
-                        fileName: "src/elements/ListSelection/index.tsx",
-                        lineNumber: 45,
-                        columnNumber: 11
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/elements/ListSelection/index.tsx",
-                lineNumber: 43,
-                columnNumber: 9
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/ListSelection/index.tsx",
-        lineNumber: 34,
-        columnNumber: 5
-    }, this);
+    return <div className={baseClass}>
+      <span>{t('general:selectedCount', {
+        count,
+        label: ''
+    })}</span>
+      {ListActions && ListActions.length > 0 && <React.Fragment>
+          <span>&mdash;</span>
+          <div className={`${baseClass}__actions`}>{ListActions}</div>
+        </React.Fragment>}
+      {SelectionActions && SelectionActions.length > 0 && <React.Fragment>
+          <span>&mdash;</span>
+          <div className={`${baseClass}__actions`}>{SelectionActions}</div>
+        </React.Fragment>}
+    </div>;
 }
 export function ListSelectionButton({ children, className, ...props }) {
-    return /*#__PURE__*/ _jsxDEV(Button, {
-        ...props,
-        buttonStyle: "none",
-        className: [
-            `${baseClass}__button`,
-            className
-        ].filter(Boolean).join(' '),
-        children: children
-    }, void 0, false, {
-        fileName: "src/elements/ListSelection/index.tsx",
-        lineNumber: 55,
-        columnNumber: 5
-    }, this);
+    return <Button {...props} buttonStyle="none" className={[
+        `${baseClass}__button`,
+        className
+    ].filter(Boolean).join(' ')}>
+      {children}
+    </Button>;
 }
 
 //# sourceMappingURL=index.js.map

package/dist/elements/ListSelection/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props as ButtonProps } from '../Button/types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\ntype ListSelection_v4Props = {\n  /**\n   * The count of selected items\n   */\n  readonly count: number\n  /**\n   * Actions that apply to the list as a whole\n   *\n   * @example select all, clear selection\n   */\n  readonly ListActions?: React.ReactNode[]\n  /**\n   * Actions that apply to the selected items\n   *\n   * @example edit, delete, publish, unpublish\n   */\n  readonly SelectionActions?: React.ReactNode[]\n}\nexport function ListSelection_v4({ count, ListActions, SelectionActions }: ListSelection_v4Props) {\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label: '' })}</span>\n      {ListActions && ListActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{ListActions}</div>\n        </React.Fragment>\n      )}\n      {SelectionActions && SelectionActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{SelectionActions}</div>\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\ntype ListSelectionButtonProps = {} & ButtonProps\nexport function ListSelectionButton({ children, className, ...props }: ListSelectionButtonProps) {\n  return (\n    <Button\n      {...props}\n      buttonStyle=\"none\"\n      className={[`${baseClass}__button`, className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"names":["React","useTranslation","Button","baseClass","ListSelection_v4","count","ListActions","SelectionActions","t","div","className","span","label","length","Fragment","ListSelectionButton","children","props","buttonStyle","filter","Boolean","join"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAGhB;;GAEC,GAED;;;;GAIC,GAED;;;;GAIC,GAGH,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,EAAyB;IAC9F,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,qBACE,QAACQ;QAAIC,WAAWP;;0BACd,QAACQ;0BAAMH,EAAE,yBAAyB;oBAAEH;oBAAOO,OAAO;gBAAG;;;;;;YACpDN,eAAeA,YAAYO,MAAM,GAAG,mBACnC,QAACb,MAAMc,QAAQ;;kCACb,QAACH;kCAAK;;;;;;kCACN,QAACF;wBAAIC,WAAW,GAAGP,UAAU,SAAS,CAAC;kCAAGG;;;;;;;;;;;;YAG7CC,oBAAoBA,iBAAiBM,MAAM,GAAG,mBAC7C,QAACb,MAAMc,QAAQ;;kCACb,QAACH;kCAAK;;;;;;kCACN,QAACF;wBAAIC,WAAW,GAAGP,UAAU,SAAS,CAAC;kCAAGI;;;;;;;;;;;;;;;;;;AAKpD;AAGA,OAAO,SAASQ,oBAAoB,EAAEC,QAAQ,EAAEN,SAAS,EAAE,GAAGO,OAAiC;IAC7F,qBACE,QAACf;QACE,GAAGe,KAAK;QACTC,aAAY;QACZR,WAAW;YAAC,GAAGP,UAAU,QAAQ,CAAC;YAAEO;SAAU,CAACS,MAAM,CAACC,SAASC,IAAI,CAAC;kBAEnEL;;;;;;AAGP"}
+{"version":3,"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props as ButtonProps } from '../Button/types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\ntype ListSelection_v4Props = {\n  /**\n   * The count of selected items\n   */\n  readonly count: number\n  /**\n   * Actions that apply to the list as a whole\n   *\n   * @example select all, clear selection\n   */\n  readonly ListActions?: React.ReactNode[]\n  /**\n   * Actions that apply to the selected items\n   *\n   * @example edit, delete, publish, unpublish\n   */\n  readonly SelectionActions?: React.ReactNode[]\n}\nexport function ListSelection_v4({ count, ListActions, SelectionActions }: ListSelection_v4Props) {\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label: '' })}</span>\n      {ListActions && ListActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{ListActions}</div>\n        </React.Fragment>\n      )}\n      {SelectionActions && SelectionActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{SelectionActions}</div>\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\ntype ListSelectionButtonProps = {} & ButtonProps\nexport function ListSelectionButton({ children, className, ...props }: ListSelectionButtonProps) {\n  return (\n    <Button\n      {...props}\n      buttonStyle=\"none\"\n      className={[`${baseClass}__button`, className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"names":["React","useTranslation","Button","baseClass","ListSelection_v4","count","ListActions","SelectionActions","t","div","className","span","label","length","Fragment","ListSelectionButton","children","props","buttonStyle","filter","Boolean","join"],"mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAGhB;;GAEC,GAED;;;;GAIC,GAED;;;;GAIC,GAGH,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,EAAyB;IAC9F,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,QACGQ,IAAIC,WAAWP,WAAW;MACzB,CAACQ,MAAMH,EAAE,yBAAyB;QAAEH;QAAOO,OAAO;IAAG,KAAKD,KAAK;MAC/D,CAACL,eAAeA,YAAYO,MAAM,GAAG,MAClCb,MAAMc,SAAS;UACd,CAACH,KAAK,OAAO,EAAEA,KAAK;UACpB,CAACF,IAAIC,WAAW,GAAGP,UAAU,SAAS,CAAC,GAAGG,cAAcG,IAAI;QAC9D,EAAET,MAAMc,UACR;MACF,CAACP,oBAAoBA,iBAAiBM,MAAM,GAAG,MAC5Cb,MAAMc,SAAS;UACd,CAACH,KAAK,OAAO,EAAEA,KAAK;UACpB,CAACF,IAAIC,WAAW,GAAGP,UAAU,SAAS,CAAC,GAAGI,mBAAmBE,IAAI;QACnE,EAAET,MAAMc,UACR;IACJ,EAAEL;AAEN;AAGA,OAAO,SAASM,oBAAoB,EAAEC,QAAQ,EAAEN,SAAS,EAAE,GAAGO,OAAiC;IAC7F,QACGf,QACE,GAAGe,KAAK,EACTC,YAAY,OACZR,WAAW;QAAC,GAAGP,UAAU,QAAQ,CAAC;QAAEO;KAAU,CAACS,MAAM,CAACC,SAASC,IAAI,CAAC,MACrE;MACC,CAACL,SAAS;IACZ,EAAEd;AAEN"}

package/dist/elements/LivePreview/Device/index.js

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useEffect } from 'react';
 import { useResize } from '../../../hooks/useResize.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
@@ -62,31 +61,19 @@ export const DeviceContainer = (props)=>{
         width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
         height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
     }
-    return /*#__PURE__*/ _jsxDEV("div", {
-        ref: outerFrameRef,
-        style: {
-            height: '100%',
-            width: '100%'
-        },
-        children: /*#__PURE__*/ _jsxDEV("div", {
-            ref: deviceFrameRef,
-            style: {
-                height,
-                margin,
-                transform: `translate3d(${x}, 0, 0)`,
-                width
-            },
-            children: children
-        }, void 0, false, {
-            fileName: "src/elements/LivePreview/Device/index.tsx",
-            lineNumber: 95,
-            columnNumber: 7
-        }, this)
-    }, void 0, false, {
-        fileName: "src/elements/LivePreview/Device/index.tsx",
-        lineNumber: 88,
-        columnNumber: 5
-    }, this);
+    return <div ref={outerFrameRef} style={{
+        height: '100%',
+        width: '100%'
+    }}>
+      <div ref={deviceFrameRef} style={{
+        height,
+        margin,
+        transform: `translate3d(${x}, 0, 0)`,
+        width
+    }}>
+        {children}
+      </div>
+    </div>;
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/Device/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useResize } from '../../../hooks/useResize.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n  const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext()\n\n  // Keep an accurate measurement of the actual device size as it is truly rendered\n  // This is helpful when `sizes` are non-number units like percentages, etc.\n\n  const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\n\n  const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n  let deviceIsLargerThanFrame: boolean = false\n\n  // Sync the measured device size with the context so that other components can use it\n  // This happens from the bottom up so that as this component mounts and unmounts,\n  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n  useEffect(() => {\n    if (measuredDeviceSize) {\n      setMeasuredDeviceSize(measuredDeviceSize)\n    }\n  }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n  let x = '0'\n  let margin = '0'\n\n  if (breakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      desiredSize &&\n      measuredDeviceSize &&\n      typeof zoom === 'number' &&\n      typeof desiredSize.width === 'number' &&\n      typeof desiredSize.height === 'number' &&\n      typeof measuredDeviceSize.width === 'number' &&\n      typeof measuredDeviceSize.height === 'number'\n    ) {\n      margin = '0 auto'\n      const scaledDesiredWidth = desiredSize.width / zoom\n      const scaledDeviceWidth = measuredDeviceSize.width * zoom\n      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n      if (deviceIsLargerThanFrame) {\n        if (zoom > 1) {\n          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n          if (differenceFromDeviceToFrame < 0) {\n            x = `${differenceFromDeviceToFrame / 2}px`\n          } else {\n            x = '0'\n          }\n        } else {\n          x = '0'\n        }\n      } else {\n        if (zoom >= 1) {\n          x = `${scaledDeviceDifferencePixels / 2}px`\n        } else {\n          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n          x = `${differenceFromDeviceToFrame / 2}px`\n          margin = '0'\n        }\n      }\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={outerFrameRef}\n      style={{\n        height: '100%',\n        width: '100%',\n      }}\n    >\n      <div\n        ref={deviceFrameRef}\n        style={{\n          height,\n          margin,\n          transform: `translate3d(${x}, 0, 0)`,\n          width,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useResize","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","div","ref","style","transform"],"mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,SAAS,QAAQ,8BAA6B;AACvD,SAASC,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,iBAAiBP,MAAMQ,MAAM,CAAiB;IACpD,MAAMC,gBAAgBT,MAAMQ,MAAM,CAAiB;IAEnD,MAAM,EAAEE,UAAU,EAAEC,qBAAqB,EAAEC,MAAMC,WAAW,EAAEC,IAAI,EAAE,GAAGX;IAEvE,iFAAiF;IACjF,2EAA2E;IAE3E,MAAM,EAAES,MAAMG,kBAAkB,EAAE,GAAGb,UAAUK,eAAeS,OAAO;IAErE,MAAM,EAAEJ,MAAMK,cAAc,EAAE,GAAGf,UAAUO,cAAcO,OAAO;IAEhE,IAAIE,0BAAmC;IAEvC,qFAAqF;IACrF,iFAAiF;IACjF,8FAA8F;IAC9FjB,UAAU;QACR,IAAIc,oBAAoB;YACtBJ,sBAAsBI;QACxB;IACF,GAAG;QAACA;QAAoBJ;KAAsB;IAE9C,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIV,cAAcA,eAAe,cAAc;QAC7CS,IAAI;QAEJ,IACEN,eACAE,sBACA,OAAOD,SAAS,YAChB,OAAOD,YAAYQ,KAAK,KAAK,YAC7B,OAAOR,YAAYS,MAAM,KAAK,YAC9B,OAAOP,mBAAmBM,KAAK,KAAK,YACpC,OAAON,mBAAmBO,MAAM,KAAK,UACrC;YACAF,SAAS;YACT,MAAMG,qBAAqBV,YAAYQ,KAAK,GAAGP;YAC/C,MAAMU,oBAAoBT,mBAAmBM,KAAK,GAAGP;YACrD,MAAMW,+BAA+BF,qBAAqBV,YAAYQ,KAAK;YAC3EH,0BAA0BM,oBAAoBP,eAAeI,KAAK;YAElE,IAAIH,yBAAyB;gBAC3B,IAAIJ,OAAO,GAAG;oBACZ,MAAMY,8BAA8BX,mBAAmBM,KAAK,GAAGJ,eAAeI,KAAK;oBACnF,IAAIK,8BAA8B,GAAG;wBACnCP,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC5C,OAAO;wBACLP,IAAI;oBACN;gBACF,OAAO;oBACLA,IAAI;gBACN;YACF,OAAO;gBACL,IAAIL,QAAQ,GAAG;oBACbK,IAAI,GAAGM,+BAA+B,EAAE,EAAE,CAAC;gBAC7C,OAAO;oBACL,MAAMC,8BAA8BT,eAAeI,KAAK,GAAGG;oBAC3DL,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC1CN,SAAS;gBACX;YACF;QACF;IACF;IAEA,IAAIC,QAAQP,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IACtC,IAAIQ,SAASR,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IAEvC,IAAIJ,eAAe,cAAc;QAC/BW,QAAQ,GAAGR,aAAaQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;QACzEQ,SAAS,GAAGT,aAAaS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;IAC7E;IAEA,qBACE,QAACa;QACCC,KAAKnB;QACLoB,OAAO;YACLP,QAAQ;YACRD,OAAO;QACT;kBAEA,cAAA,QAACM;YACCC,KAAKrB;YACLsB,OAAO;gBACLP;gBACAF;gBACAU,WAAW,CAAC,YAAY,EAAEX,EAAE,OAAO,CAAC;gBACpCE;YACF;sBAECf;;;;;;;;;;;AAIT,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useResize } from '../../../hooks/useResize.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n  const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext()\n\n  // Keep an accurate measurement of the actual device size as it is truly rendered\n  // This is helpful when `sizes` are non-number units like percentages, etc.\n\n  const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\n\n  const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n  let deviceIsLargerThanFrame: boolean = false\n\n  // Sync the measured device size with the context so that other components can use it\n  // This happens from the bottom up so that as this component mounts and unmounts,\n  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n  useEffect(() => {\n    if (measuredDeviceSize) {\n      setMeasuredDeviceSize(measuredDeviceSize)\n    }\n  }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n  let x = '0'\n  let margin = '0'\n\n  if (breakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      desiredSize &&\n      measuredDeviceSize &&\n      typeof zoom === 'number' &&\n      typeof desiredSize.width === 'number' &&\n      typeof desiredSize.height === 'number' &&\n      typeof measuredDeviceSize.width === 'number' &&\n      typeof measuredDeviceSize.height === 'number'\n    ) {\n      margin = '0 auto'\n      const scaledDesiredWidth = desiredSize.width / zoom\n      const scaledDeviceWidth = measuredDeviceSize.width * zoom\n      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n      if (deviceIsLargerThanFrame) {\n        if (zoom > 1) {\n          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n          if (differenceFromDeviceToFrame < 0) {\n            x = `${differenceFromDeviceToFrame / 2}px`\n          } else {\n            x = '0'\n          }\n        } else {\n          x = '0'\n        }\n      } else {\n        if (zoom >= 1) {\n          x = `${scaledDeviceDifferencePixels / 2}px`\n        } else {\n          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n          x = `${differenceFromDeviceToFrame / 2}px`\n          margin = '0'\n        }\n      }\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={outerFrameRef}\n      style={{\n        height: '100%',\n        width: '100%',\n      }}\n    >\n      <div\n        ref={deviceFrameRef}\n        style={{\n          height,\n          margin,\n          transform: `translate3d(${x}, 0, 0)`,\n          width,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useResize","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","div","ref","style","transform"],"mappings":"AAAA;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,SAAS,QAAQ,8BAA6B;AACvD,SAASC,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,iBAAiBP,MAAMQ,MAAM,CAAiB;IACpD,MAAMC,gBAAgBT,MAAMQ,MAAM,CAAiB;IAEnD,MAAM,EAAEE,UAAU,EAAEC,qBAAqB,EAAEC,MAAMC,WAAW,EAAEC,IAAI,EAAE,GAAGX;IAEvE,iFAAiF;IACjF,2EAA2E;IAE3E,MAAM,EAAES,MAAMG,kBAAkB,EAAE,GAAGb,UAAUK,eAAeS,OAAO;IAErE,MAAM,EAAEJ,MAAMK,cAAc,EAAE,GAAGf,UAAUO,cAAcO,OAAO;IAEhE,IAAIE,0BAAmC;IAEvC,qFAAqF;IACrF,iFAAiF;IACjF,8FAA8F;IAC9FjB,UAAU;QACR,IAAIc,oBAAoB;YACtBJ,sBAAsBI;QACxB;IACF,GAAG;QAACA;QAAoBJ;KAAsB;IAE9C,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIV,cAAcA,eAAe,cAAc;QAC7CS,IAAI;QAEJ,IACEN,eACAE,sBACA,OAAOD,SAAS,YAChB,OAAOD,YAAYQ,KAAK,KAAK,YAC7B,OAAOR,YAAYS,MAAM,KAAK,YAC9B,OAAOP,mBAAmBM,KAAK,KAAK,YACpC,OAAON,mBAAmBO,MAAM,KAAK,UACrC;YACAF,SAAS;YACT,MAAMG,qBAAqBV,YAAYQ,KAAK,GAAGP;YAC/C,MAAMU,oBAAoBT,mBAAmBM,KAAK,GAAGP;YACrD,MAAMW,+BAA+BF,qBAAqBV,YAAYQ,KAAK;YAC3EH,0BAA0BM,oBAAoBP,eAAeI,KAAK;YAElE,IAAIH,yBAAyB;gBAC3B,IAAIJ,OAAO,GAAG;oBACZ,MAAMY,8BAA8BX,mBAAmBM,KAAK,GAAGJ,eAAeI,KAAK;oBACnF,IAAIK,8BAA8B,GAAG;wBACnCP,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC5C,OAAO;wBACLP,IAAI;oBACN;gBACF,OAAO;oBACLA,IAAI;gBACN;YACF,OAAO;gBACL,IAAIL,QAAQ,GAAG;oBACbK,IAAI,GAAGM,+BAA+B,EAAE,EAAE,CAAC;gBAC7C,OAAO;oBACL,MAAMC,8BAA8BT,eAAeI,KAAK,GAAGG;oBAC3DL,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC1CN,SAAS;gBACX;YACF;QACF;IACF;IAEA,IAAIC,QAAQP,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IACtC,IAAIQ,SAASR,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IAEvC,IAAIJ,eAAe,cAAc;QAC/BW,QAAQ,GAAGR,aAAaQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;QACzEQ,SAAS,GAAGT,aAAaS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;IAC7E;IAEA,QACGa,IACCC,KAAKnB,eACLoB,OAAO;QACLP,QAAQ;QACRD,OAAO;IACT,GACD;MACC,CAACM,IACCC,KAAKrB,gBACLsB,OAAO;QACLP;QACAF;QACAU,WAAW,CAAC,YAAY,EAAEX,EAAE,OAAO,CAAC;QACpCE;IACF,GACD;QACC,CAACf,SAAS;MACZ,EAAEqB,IAAI;IACR,EAAEA;AAEN,EAAC"}

package/dist/elements/LivePreview/DeviceContainer/index.js

@@ -1,6 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
-import React from 'react';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 export const DeviceContainer = (props)=>{
     const { children } = props;
@@ -17,19 +15,14 @@ export const DeviceContainer = (props)=>{
             margin = '0 auto';
         }
     }
-    return /*#__PURE__*/ _jsxDEV("div", {
-        style: {
-            height: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%',
-            margin,
-            transform: `translate3d(${x}, 0, 0)`,
-            width: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%'
-        },
-        children: children
-    }, void 0, false, {
-        fileName: "src/elements/LivePreview/DeviceContainer/index.tsx",
-        lineNumber: 34,
-        columnNumber: 5
-    }, this);
+    return <div style={{
+        height: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%',
+        margin,
+        transform: `translate3d(${x}, 0, 0)`,
+        width: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%'
+    }}>
+      {children}
+    </div>;
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/DeviceContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,GAAGK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,qBACE,QAACK;QACCC,OAAO;YACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;YACRM;YACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;YACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;QACV;kBAECJ;;;;;;AAGP,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"mappings":"AAAA;AAGA,SAASA,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,GAAGK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,QACGK,IACCC,OAAO;QACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;QACRM;QACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;QACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;IACV,GACD;MACC,CAACJ,SAAS;IACZ,EAAEe;AAEN,EAAC"}

package/dist/elements/LivePreview/IFrame/index.js

@@ -1,27 +1,14 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
-import React from 'react';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 import './index.scss';
 const baseClass = 'live-preview-iframe';
 export const IFrame = ()=>{
     const { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext();
-    return /*#__PURE__*/ _jsxDEV("iframe", {
-        className: baseClass,
-        onLoad: ()=>{
-            setLoadedURL(url);
-        },
-        ref: iframeRef,
-        src: url,
-        style: {
-            transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
-        },
-        title: url
-    }, url, false, {
-        fileName: "src/elements/LivePreview/IFrame/index.tsx",
-        lineNumber: 13,
-        columnNumber: 5
-    }, this);
+    return <iframe className={baseClass} key={url} onLoad={()=>{
+        setLoadedURL(url);
+    }} ref={iframeRef} src={url} style={{
+        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
+    }} title={url}/>;
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/IFrame/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\nexport const IFrame: React.FC = () => {\n  const { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      key={url}\n      onLoad={() => {\n        setLoadedURL(url)\n      }}\n      ref={iframeRef}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n}\n"],"names":["React","useLivePreviewContext","baseClass","IFrame","iframeRef","setLoadedURL","url","zoom","iframe","className","onLoad","ref","src","style","transform","undefined","title"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,SAAmB;IAC9B,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGN;IAE/C,qBACE,QAACO;QACCC,WAAWP;QAEXQ,QAAQ;YACNL,aAAaC;QACf;QACAK,KAAKP;QACLQ,KAAKN;QACLO,OAAO;YACLC,WAAW,OAAOP,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGQ;QAC5D;QACAC,OAAOV;OATFA;;;;;AAYX,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\nexport const IFrame: React.FC = () => {\n  const { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      key={url}\n      onLoad={() => {\n        setLoadedURL(url)\n      }}\n      ref={iframeRef}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n}\n"],"names":["useLivePreviewContext","baseClass","IFrame","iframeRef","setLoadedURL","url","zoom","iframe","className","key","onLoad","ref","src","style","transform","undefined","title"],"mappings":"AAAA;AAGA,SAASA,qBAAqB,QAAQ,4CAA2C;AACjF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,SAAmB;IAC9B,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGN;IAE/C,QACGO,OACCC,WAAWP,WACXQ,KAAKJ,KACLK,QAAQ;QACNN,aAAaC;IACf,GACAM,KAAKR,WACLS,KAAKP,KACLQ,OAAO;QACLC,WAAW,OAAOR,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGS;IAC5D,GACAC,OAAOX;AAGb,EAAC"}

package/dist/elements/LivePreview/Toggler/index.js

@@ -1,5 +1,3 @@
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
-import React from 'react';
 import { EyeIcon } from '../../../icons/Eye/index.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
@@ -11,30 +9,14 @@ export const LivePreviewToggler = ()=>{
     if (!livePreviewURL) {
         return null;
     }
-    return /*#__PURE__*/ _jsxDEV("button", {
-        "aria-label": isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
-        className: [
-            baseClass,
-            isLivePreviewing && `${baseClass}--active`
-        ].filter(Boolean).join(' '),
-        id: "live-preview-toggler",
-        onClick: ()=>{
-            setIsLivePreviewing(!isLivePreviewing);
-        },
-        title: isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
-        type: "button",
-        children: /*#__PURE__*/ _jsxDEV(EyeIcon, {
-            active: isLivePreviewing
-        }, void 0, false, {
-            fileName: "src/elements/LivePreview/Toggler/index.tsx",
-            lineNumber: 29,
-            columnNumber: 7
-        }, this)
-    }, void 0, false, {
-        fileName: "src/elements/LivePreview/Toggler/index.tsx",
-        lineNumber: 19,
-        columnNumber: 5
-    }, this);
+    return <button aria-label={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')} className={[
+        baseClass,
+        isLivePreviewing && `${baseClass}--active`
+    ].filter(Boolean).join(' ')} id="live-preview-toggler" onClick={()=>{
+        setIsLivePreviewing(!isLivePreviewing);
+    }} title={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')} type="button">
+      <EyeIcon active={isLivePreviewing}/>
+    </button>;
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/Toggler/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toggler'\n\nexport const LivePreviewToggler: React.FC = () => {\n  const { isLivePreviewing, setIsLivePreviewing, url: livePreviewURL } = useLivePreviewContext()\n  const { t } = useTranslation()\n\n  if (!livePreviewURL) {\n    return null\n  }\n\n  return (\n    <button\n      aria-label={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      className={[baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' ')}\n      id=\"live-preview-toggler\"\n      onClick={() => {\n        setIsLivePreviewing(!isLivePreviewing)\n      }}\n      title={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      type=\"button\"\n    >\n      <EyeIcon active={isLivePreviewing} />\n    </button>\n  )\n}\n"],"names":["React","EyeIcon","useLivePreviewContext","useTranslation","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","url","livePreviewURL","t","button","aria-label","className","filter","Boolean","join","id","onClick","title","type","active"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,8BAA6B;AACrD,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,qBAA+B;IAC1C,MAAM,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,KAAKC,cAAc,EAAE,GAAGP;IACvE,MAAM,EAAEQ,CAAC,EAAE,GAAGP;IAEd,IAAI,CAACM,gBAAgB;QACnB,OAAO;IACT;IAEA,qBACE,QAACE;QACCC,cAAYN,mBAAmBI,EAAE,6BAA6BA,EAAE;QAChEG,WAAW;YAACT;YAAWE,oBAAoB,GAAGF,UAAU,QAAQ,CAAC;SAAC,CAACU,MAAM,CAACC,SAASC,IAAI,CAAC;QACxFC,IAAG;QACHC,SAAS;YACPX,oBAAoB,CAACD;QACvB;QACAa,OAAOb,mBAAmBI,EAAE,6BAA6BA,EAAE;QAC3DU,MAAK;kBAEL,cAAA,QAACnB;YAAQoB,QAAQf;;;;;;;;;;;AAGvB,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toggler'\n\nexport const LivePreviewToggler: React.FC = () => {\n  const { isLivePreviewing, setIsLivePreviewing, url: livePreviewURL } = useLivePreviewContext()\n  const { t } = useTranslation()\n\n  if (!livePreviewURL) {\n    return null\n  }\n\n  return (\n    <button\n      aria-label={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      className={[baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' ')}\n      id=\"live-preview-toggler\"\n      onClick={() => {\n        setIsLivePreviewing(!isLivePreviewing)\n      }}\n      title={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      type=\"button\"\n    >\n      <EyeIcon active={isLivePreviewing} />\n    </button>\n  )\n}\n"],"names":["EyeIcon","useLivePreviewContext","useTranslation","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","url","livePreviewURL","t","button","aria-label","className","filter","Boolean","join","id","onClick","title","type","active"],"mappings":"AAEA,SAASA,OAAO,QAAQ,8BAA6B;AACrD,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,qBAA+B;IAC1C,MAAM,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,KAAKC,cAAc,EAAE,GAAGP;IACvE,MAAM,EAAEQ,CAAC,EAAE,GAAGP;IAEd,IAAI,CAACM,gBAAgB;QACnB,OAAO;IACT;IAEA,QACGE,OACCC,YAAYN,mBAAmBI,EAAE,6BAA6BA,EAAE,wBAChEG,WAAW;QAACT;QAAWE,oBAAoB,GAAGF,UAAU,QAAQ,CAAC;KAAC,CAACU,MAAM,CAACC,SAASC,IAAI,CAAC,MACxFC,GAAG,uBACHC,SAAS;QACPX,oBAAoB,CAACD;IACvB,GACAa,OAAOb,mBAAmBI,EAAE,6BAA6BA,EAAE,wBAC3DU,KAAK,SACN;MACC,CAACnB,QAAQoB,QAAQf,mBAAoB;IACvC,EAAEK;AAEN,EAAC"}