@payloadcms/ui 3.0.0-canary.d894ac7 → 3.0.0-canary.dc8b1fe

package/dist/elements/FileDetails/StaticFileDetails/index.scss

@@ -0,0 +1,134 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .file-details {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    @include inputShadow;
+
+    header {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      position: relative;
+    }
+
+    &__remove {
+      position: absolute;
+      margin: 0;
+      top: $baseline;
+      right: $baseline;
+
+      & .btn__icon {
+        border: 1px solid var(--theme-border-color);
+        background: var(--theme-input-bg);
+        @include inputShadow;
+        transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+
+        &:hover {
+          border: 1px solid var(--theme-elevation-400);
+        }
+      }
+    }
+
+    &__main-detail {
+      padding: base(0.8) base(1.2);
+      width: auto;
+      flex-grow: 1;
+      min-width: 280px;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: stretch;
+      gap: base(0.2);
+    }
+
+    &__toggle-more-info {
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+
+    &__toggle-icon {
+      padding: calc(var(--base) / 4);
+    }
+
+    &__sizes {
+      margin: 0;
+      padding: base(1.5) $baseline 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+
+      li {
+        width: 50%;
+        padding: 0 base(0.5);
+        margin-bottom: $baseline;
+      }
+    }
+
+    &__size-label {
+      color: var(--theme-elevation-400);
+    }
+
+    &__file-mutation {
+      display: flex;
+      margin-top: base(0.25);
+      gap: calc(var(--base) / 2);
+    }
+
+    &__edit {
+      cursor: pointer;
+      background-color: var(--theme-elevation-150);
+      border: none;
+      border-radius: $style-radius-m;
+      padding: base(0.25) base(0.5);
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
+
+    @include large-break {
+      &__main-detail {
+        padding: $baseline;
+      }
+
+      &__sizes {
+        display: block;
+        padding: $baseline $baseline base(0.5);
+
+        li {
+          padding: 0;
+          width: 100%;
+        }
+      }
+    }
+
+    @include mid-break {
+      header {
+        flex-wrap: wrap;
+      }
+
+      .thumbnail {
+        width: 50%;
+        order: 1;
+      }
+
+      &__remove {
+        order: 2;
+      }
+
+      &__main-detail {
+        order: 3;
+        width: 100%;
+      }
+    }
+  }
+}

package/dist/elements/FileDetails/index.d.ts

@@ -1,17 +1,32 @@
-import React from 'react';
-import './index.scss';
 import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
-export type FileDetailsProps = {
+import React from 'react';
+type SharedFileDetailsProps = {
     collectionSlug: string;
     customUploadActions?: React.ReactNode[];
     doc: {
         sizes?: FileSizes;
     } & Data;
     enableAdjustments?: boolean;
-    handleRemove?: () => void;
     hasImageSizes?: boolean;
     imageCacheTag?: string;
     uploadConfig: SanitizedCollectionConfig['upload'];
 };
+type StaticFileDetailsProps = {
+    draggableItemProps?: never;
+    handleRemove?: () => void;
+    hasMany?: never;
+    isSortable?: never;
+    removeItem?: never;
+    rowIndex?: never;
+};
+type DraggableFileDetailsProps = {
+    handleRemove?: never;
+    hasMany: boolean;
+    isSortable?: boolean;
+    removeItem?: (index: number) => void;
+    rowIndex: number;
+};
+export type FileDetailsProps = (DraggableFileDetailsProps | StaticFileDetailsProps) & SharedFileDetailsProps;
 export declare const FileDetails: React.FC<FileDetailsProps>;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/FileDetails/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4DlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,sBAAsB,GAAG;IAC5B,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,KAAK,sBAAsB,GAAG;IAC5B,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,CAAA;AAED,KAAK,yBAAyB,GAAG;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,yBAAyB,GAAG,sBAAsB,CAAC,GACjF,sBAAsB,CAAA;AAExB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}

package/dist/elements/FileDetails/index.js

@@ -1,71 +1,20 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { UploadActions } from '../../elements/Upload/index.js';
-import { Button } from '../Button/index.js';
-import { Thumbnail } from '../Thumbnail/index.js';
-import { FileMeta } from './FileMeta/index.js';
-import './index.scss';
-const baseClass = 'file-details';
+import { DraggableFileDetails } from './DraggableFileDetails/index.js';
+import { StaticFileDetails } from './StaticFileDetails/index.js';
 export const FileDetails = props => {
   const {
-    collectionSlug,
-    customUploadActions,
-    doc,
-    enableAdjustments,
-    handleRemove,
-    hasImageSizes,
-    imageCacheTag,
-    uploadConfig
+    hasMany
   } = props;
-  const {
-    id,
-    filename,
-    filesize,
-    height,
-    mimeType,
-    thumbnailURL,
-    url,
-    width
-  } = doc;
-  return /*#__PURE__*/_jsx("div", {
-    className: baseClass,
-    children: /*#__PURE__*/_jsxs("header", {
-      children: [/*#__PURE__*/_jsx(Thumbnail, {
-        // size="small"
-        className: `${baseClass}__thumbnail`,
-        collectionSlug: collectionSlug,
-        doc: doc,
-        fileSrc: thumbnailURL || url,
-        imageCacheTag: imageCacheTag,
-        uploadConfig: uploadConfig
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__main-detail`,
-        children: [/*#__PURE__*/_jsx(FileMeta, {
-          collection: collectionSlug,
-          filename: filename,
-          filesize: filesize,
-          height: height,
-          id: id,
-          mimeType: mimeType,
-          url: url,
-          width: width
-        }), (enableAdjustments || customUploadActions) && /*#__PURE__*/_jsx(UploadActions, {
-          customActions: customUploadActions,
-          enableAdjustments: enableAdjustments,
-          enablePreviewSizes: hasImageSizes && doc.filename,
-          mimeType: mimeType
-        })]
-      }), handleRemove && /*#__PURE__*/_jsx(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__remove`,
-        icon: "x",
-        iconStyle: "with-border",
-        onClick: handleRemove,
-        round: true
-      })]
-    })
+  if (hasMany) {
+    return /*#__PURE__*/_jsx(DraggableFileDetails, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(StaticFileDetails, {
+    ...props
   });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","collectionSlug","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","_jsx","className","_jsxs","fileSrc","collection","customActions","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { UploadActions } from '../../elements/Upload/index.js'\nimport { Button } from '../Button/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport { FileMeta } from './FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type FileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    customUploadActions,\n    doc,\n    enableAdjustments,\n    handleRemove,\n    hasImageSizes,\n    imageCacheTag,\n    uploadConfig,\n  } = props\n\n  const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          // size=\"small\"\n          className={`${baseClass}__thumbnail`}\n          collectionSlug={collectionSlug}\n          doc={doc}\n          fileSrc={thumbnailURL || url}\n          imageCacheTag={imageCacheTag}\n          uploadConfig={uploadConfig}\n        />\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            collection={collectionSlug}\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            id={id as string}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {(enableAdjustments || customUploadActions) && (\n            <UploadActions\n              customActions={customUploadActions}\n              enableAdjustments={enableAdjustments}\n              enablePreviewSizes={hasImageSizes && doc.filename}\n              mimeType={mimeType}\n            />\n          )}\n        </div>\n        {handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,aAAa,QAAQ;AAC9B,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB,OAAO,MAAMC,WAAA,GAA2CC,KAAA;EACtD,MAAM;IACJC,cAAc;IACdC,mBAAmB;IACnBC,GAAG;IACHC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,aAAa;IACbC;EAAY,CACb,GAAGR,KAAA;EAEJ,MAAM;IAAES,EAAE;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,GAAG;IAAEC;EAAK,CAAE,GAAGb,GAAA;EAE/E,oBACEc,IAAA,CAAC;IAAIC,SAAA,EAAWpB,SAAA;cACd,aAAAqB,KAAA,CAAC;8BACCF,IAAA,CAACrB,SAAA;QACC;QACAsB,SAAA,EAAW,GAAGpB,SAAA,aAAsB;QACpCG,cAAA,EAAgBA,cAAA;QAChBE,GAAA,EAAKA,GAAA;QACLiB,OAAA,EAASN,YAAA,IAAgBC,GAAA;QACzBR,aAAA,EAAeA,aAAA;QACfC,YAAA,EAAcA;uBAEhBW,KAAA,CAAC;QAAID,SAAA,EAAW,GAAGpB,SAAA,eAAwB;gCACzCmB,IAAA,CAACpB,QAAA;UACCwB,UAAA,EAAYpB,cAAA;UACZS,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVC,MAAA,EAAQA,MAAA;UACRH,EAAA,EAAIA,EAAA;UACJI,QAAA,EAAUA,QAAA;UACVE,GAAA,EAAKA,GAAA;UACLC,KAAA,EAAOA;YAGP,CAAAZ,iBAAA,IAAqBF,mBAAkB,kBACvCe,IAAA,CAACvB,aAAA;UACC4B,aAAA,EAAepB,mBAAA;UACfE,iBAAA,EAAmBA,iBAAA;UACnBmB,kBAAA,EAAoBjB,aAAA,IAAiBH,GAAA,CAAIO,QAAQ;UACjDG,QAAA,EAAUA;;UAIfR,YAAA,iBACCY,IAAA,CAACtB,MAAA;QACC6B,WAAA,EAAY;QACZN,SAAA,EAAW,GAAGpB,SAAA,UAAmB;QACjC2B,IAAA,EAAK;QACLC,SAAA,EAAU;QACVC,OAAA,EAAStB,YAAA;QACTuB,KAAK;;;;AAMjB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","DraggableFileDetails","StaticFileDetails","FileDetails","props","hasMany","_jsx"],"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { DraggableFileDetails } from './DraggableFileDetails/index.js'\nimport { StaticFileDetails } from './StaticFileDetails/index.js'\n\ntype SharedFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\ntype StaticFileDetailsProps = {\n  draggableItemProps?: never\n  handleRemove?: () => void\n  hasMany?: never\n  isSortable?: never\n  removeItem?: never\n  rowIndex?: never\n}\n\ntype DraggableFileDetailsProps = {\n  handleRemove?: never\n  hasMany: boolean\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n}\n\nexport type FileDetailsProps = (DraggableFileDetailsProps | StaticFileDetailsProps) &\n  SharedFileDetailsProps\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const { hasMany } = props\n\n  if (hasMany) {\n    return <DraggableFileDetails {...props} />\n  }\n\n  return <StaticFileDetails {...props} />\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAkClC,OAAO,MAAMC,WAAA,GAA2CC,KAAA;EACtD,MAAM;IAAEC;EAAO,CAAE,GAAGD,KAAA;EAEpB,IAAIC,OAAA,EAAS;IACX,oBAAOC,IAAA,CAACL,oBAAA;MAAsB,GAAGG;;EACnC;EAEA,oBAAOE,IAAA,CAACJ,iBAAA;IAAmB,GAAGE;;AAChC","ignoreList":[]}

package/dist/elements/FullscreenModal/index.d.ts

@@ -0,0 +1,4 @@
+import type { Modal as ModalType } from '@faceless-ui/modal';
+import React from 'react';
+export declare function FullscreenModal(props: Parameters<typeof ModalType>[0]): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FullscreenModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FullscreenModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,qBAYrE"}

package/dist/elements/FullscreenModal/index.js

@@ -0,0 +1,38 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from '@faceless-ui/modal';
+import React from 'react';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+export function FullscreenModal(props) {
+  const $ = _c(6);
+  const currentDepth = useEditDepth();
+  let t0;
+  if ($[0] !== props.style) {
+    t0 = props.style || {};
+    $[0] = props.style;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const t1 = `calc(100 + ${currentDepth || 0} + 1)`;
+  let t2;
+  if ($[2] !== t0 || $[3] !== t1 || $[4] !== props) {
+    t2 = _jsx(Modal, {
+      ...props,
+      style: {
+        ...t0,
+        zIndex: t1
+      }
+    });
+    $[2] = t0;
+    $[3] = t1;
+    $[4] = props;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","Modal","React","useEditDepth","FullscreenModal","props","$","currentDepth","t0","style","t1","t2","_jsx","zIndex"],"sources":["../../../src/elements/FullscreenModal/index.tsx"],"sourcesContent":["'use client'\nimport type { Modal as ModalType } from '@faceless-ui/modal'\n\nimport { Modal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\n\nexport function FullscreenModal(props: Parameters<typeof ModalType>[0]) {\n  const currentDepth = useEditDepth()\n\n  return (\n    <Modal\n      {...props}\n      style={{\n        ...(props.style || {}),\n        zIndex: `calc(100 + ${currentDepth || 0} + 1)`,\n      }}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,KAAK,QAAQ;AACtB,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAE7B,OAAO,SAAAC,gBAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACL,MAAAO,YAAA,GAAqBJ,YAAA;EAAA,IAAAK,EAAA;EAAA,IAAAF,CAAA,QAAAD,KAAA,CAAAI,KAAA;IAMXD,EAAA,GAAAH,KAAA,CAAAI,KAAA,MAAiB;IAAAH,CAAA,MAAAD,KAAA,CAAAI,KAAA;IAAAH,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EACb,MAAAI,EAAA,iBAAcH,YAAA,KAAgB,OAAQ;EAAA,IAAAI,EAAA;EAAA,IAAAL,CAAA,QAAAE,EAAA,IAAAF,CAAA,QAAAI,EAAA,IAAAJ,CAAA,QAAAD,KAAA;IAJlDM,EAAA,GAAAC,IAAA,CAAAX,KAAA;MAAA,GACMI,KAAK;MAAAI,KAAA;QAAA,GAEHD,EAAiB;QAAAK,MAAA,EACbH;MAAsC;IAAA,C;;;;;;;;SAJlDC,E","ignoreList":[]}

package/dist/elements/GenerateConfirmation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAsDpE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA0DpE,CAAA"}

package/dist/elements/GenerateConfirmation/index.js

@@ -43,31 +43,38 @@ export const GenerateConfirmation = props => {
       className: baseClass,
       slug: modalSlug,
       children: /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__template`,
-        children: [/*#__PURE__*/_jsx("h1", {
-          children: t('authentication:confirmGeneration')
-        }), /*#__PURE__*/_jsx("p", {
-          children: /*#__PURE__*/_jsx(Translation, {
-            elements: {
-              1: ({
-                children
-              }) => /*#__PURE__*/_jsx("strong", {
-                children: children
-              })
+        className: `${baseClass}__wrapper`,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__content`,
+          children: [/*#__PURE__*/_jsx("h1", {
+            children: t('authentication:confirmGeneration')
+          }), /*#__PURE__*/_jsx("p", {
+            children: /*#__PURE__*/_jsx(Translation, {
+              elements: {
+                1: ({
+                  children
+                }) => /*#__PURE__*/_jsx("strong", {
+                  children: children
+                })
+              },
+              i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
+              t: t
+            })
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__controls`,
+          children: [/*#__PURE__*/_jsx(Button, {
+            buttonStyle: "secondary",
+            onClick: () => {
+              toggleModal(modalSlug);
             },
-            i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
-            t: t
-          })
-        }), /*#__PURE__*/_jsx(Button, {
-          buttonStyle: "secondary",
-          onClick: () => {
-            toggleModal(modalSlug);
-          },
-          type: "button",
-          children: t('general:cancel')
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleGenerate,
-          children: t('authentication:generate')
+            size: "large",
+            type: "button",
+            children: t('general:cancel')
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: handleGenerate,
+            children: t('authentication:generate')
+          })]
         })]
       })
     })]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","useModal","React","toast","useDocumentInfo","useTranslation","Button","Translation","baseClass","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","_jsxs","Fragment","_jsx","buttonStyle","onClick","size","className","slug","elements","children","i18nKey","type"],"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'))\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <div className={`${baseClass}__template`}>\n          <h1>{t('authentication:confirmGeneration')}</h1>\n          <p>\n            <Translation\n              elements={{\n                1: ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n              t={t}\n            />\n          </p>\n\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              toggleModal(modalSlug)\n            }}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n        </div>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAClB,SAASC,KAAK,QAAQ;AAEtB,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,oBAAA,GAA6DC,KAAA;EACxE,MAAM;IAAEC,cAAc;IAAEC;EAAM,CAAE,GAAGF,KAAA;EAEnC,MAAM;IAAEG;EAAE,CAAE,GAAGT,eAAA;EACf,MAAM;IAAEU;EAAW,CAAE,GAAGb,QAAA;EACxB,MAAM;IAAEc;EAAC,CAAE,GAAGV,cAAA;EAEd,MAAMW,SAAA,GAAY,yBAAyBH,EAAA,EAAI;EAE/C,MAAMI,cAAA,GAAiBA,CAAA;IACrBL,MAAA;IACAE,WAAA,CAAYE,SAAA;IACZb,KAAA,CAAMe,OAAO,CAACH,CAAA,CAAE;IAChBJ,cAAA,CAAe;EACjB;EAEA,oBACEQ,KAAA,CAACjB,KAAA,CAAMkB,QAAQ;4BACbC,IAAA,CAACf,MAAA;MACCgB,WAAA,EAAY;MACZC,OAAA,EAASA,CAAA;QACPT,WAAA,CAAYE,SAAA;MACd;MACAQ,IAAA,EAAK;gBAEJT,CAAA,CAAE;qBAELM,IAAA,CAACrB,KAAA;MAAMyB,SAAA,EAAWjB,SAAA;MAAWkB,IAAA,EAAMV,SAAA;gBACjC,aAAAG,KAAA,CAAC;QAAIM,SAAA,EAAW,GAAGjB,SAAA,YAAqB;gCACtCa,IAAA,CAAC;oBAAIN,CAAA,CAAE;yBACPM,IAAA,CAAC;oBACC,aAAAA,IAAA,CAACd,WAAA;YACCoB,QAAA,EAAU;cACR,GAAG,CAAC;gBAAEC;cAAQ,CAAE,kBAAKP,IAAA,CAAC;0BAAQO;;YAChC;YACAC,OAAA,EAAQ;YACRd,CAAA,EAAGA;;yBAIPM,IAAA,CAACf,MAAA;UACCgB,WAAA,EAAY;UACZC,OAAA,EAASA,CAAA;YACPT,WAAA,CAAYE,SAAA;UACd;UACAc,IAAA,EAAK;oBAEJf,CAAA,CAAE;yBAELM,IAAA,CAACf,MAAA;UAAOiB,OAAA,EAASN,cAAA;oBAAiBF,CAAA,CAAE;;;;;AAK9C","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Modal","useModal","React","toast","useDocumentInfo","useTranslation","Button","Translation","baseClass","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","_jsxs","Fragment","_jsx","buttonStyle","onClick","size","className","slug","elements","children","i18nKey","type"],"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'))\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <div className={`${baseClass}__wrapper`}>\n          <div className={`${baseClass}__content`}>\n            <h1>{t('authentication:confirmGeneration')}</h1>\n            <p>\n              <Translation\n                elements={{\n                  1: ({ children }) => <strong>{children}</strong>,\n                }}\n                i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n                t={t}\n              />\n            </p>\n          </div>\n          <div className={`${baseClass}__controls`}>\n            <Button\n              buttonStyle=\"secondary\"\n              onClick={() => {\n                toggleModal(modalSlug)\n              }}\n              size=\"large\"\n              type=\"button\"\n            >\n              {t('general:cancel')}\n            </Button>\n            <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n          </div>\n        </div>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAClB,SAASC,KAAK,QAAQ;AAEtB,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,oBAAA,GAA6DC,KAAA;EACxE,MAAM;IAAEC,cAAc;IAAEC;EAAM,CAAE,GAAGF,KAAA;EAEnC,MAAM;IAAEG;EAAE,CAAE,GAAGT,eAAA;EACf,MAAM;IAAEU;EAAW,CAAE,GAAGb,QAAA;EACxB,MAAM;IAAEc;EAAC,CAAE,GAAGV,cAAA;EAEd,MAAMW,SAAA,GAAY,yBAAyBH,EAAA,EAAI;EAE/C,MAAMI,cAAA,GAAiBA,CAAA;IACrBL,MAAA;IACAE,WAAA,CAAYE,SAAA;IACZb,KAAA,CAAMe,OAAO,CAACH,CAAA,CAAE;IAChBJ,cAAA,CAAe;EACjB;EAEA,oBACEQ,KAAA,CAACjB,KAAA,CAAMkB,QAAQ;4BACbC,IAAA,CAACf,MAAA;MACCgB,WAAA,EAAY;MACZC,OAAA,EAASA,CAAA;QACPT,WAAA,CAAYE,SAAA;MACd;MACAQ,IAAA,EAAK;gBAEJT,CAAA,CAAE;qBAELM,IAAA,CAACrB,KAAA;MAAMyB,SAAA,EAAWjB,SAAA;MAAWkB,IAAA,EAAMV,SAAA;gBACjC,aAAAG,KAAA,CAAC;QAAIM,SAAA,EAAW,GAAGjB,SAAA,WAAoB;gCACrCW,KAAA,CAAC;UAAIM,SAAA,EAAW,GAAGjB,SAAA,WAAoB;kCACrCa,IAAA,CAAC;sBAAIN,CAAA,CAAE;2BACPM,IAAA,CAAC;sBACC,aAAAA,IAAA,CAACd,WAAA;cACCoB,QAAA,EAAU;gBACR,GAAG,CAAC;kBAAEC;gBAAQ,CAAE,kBAAKP,IAAA,CAAC;4BAAQO;;cAChC;cACAC,OAAA,EAAQ;cACRd,CAAA,EAAGA;;;yBAITI,KAAA,CAAC;UAAIM,SAAA,EAAW,GAAGjB,SAAA,YAAqB;kCACtCa,IAAA,CAACf,MAAA;YACCgB,WAAA,EAAY;YACZC,OAAA,EAASA,CAAA;cACPT,WAAA,CAAYE,SAAA;YACd;YACAQ,IAAA,EAAK;YACLM,IAAA,EAAK;sBAEJf,CAAA,CAAE;2BAELM,IAAA,CAACf,MAAA;YAAOiB,OAAA,EAASN,cAAA;sBAAiBF,CAAA,CAAE;;;;;;AAMhD","ignoreList":[]}

package/dist/elements/GenerateConfirmation/index.scss

@@ -1,19 +1,40 @@
 @import '../../scss/styles.scss';
 
-.generate-confirmation {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: base(2);
+@layer payload-default {
+  .generate-confirmation {
+    @include blur-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__template {
-    position: relative;
-    z-index: 1;
-  }
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
+
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
 
-  .btn {
-    margin-right: $baseline;
+      .btn {
+        margin: 0;
+      }
+    }
   }
 }

package/dist/elements/Gutter/index.scss

@@ -1,19 +1,21 @@
 @import '../../scss/styles.scss';
 
-.gutter {
-  &--left {
-    padding-left: var(--gutter-h);
-  }
+@layer payload-default {
+  .gutter {
+    &--left {
+      padding-left: var(--gutter-h);
+    }
 
-  &--right {
-    padding-right: var(--gutter-h);
-  }
+    &--right {
+      padding-right: var(--gutter-h);
+    }
 
-  &--negative-left {
-    margin-left: calc(-1 * var(--gutter-h));
-  }
+    &--negative-left {
+      margin-left: calc(-1 * var(--gutter-h));
+    }
 
-  &--negative-right {
-    margin-right: calc(-1 * var(--gutter-h));
+    &--negative-right {
+      margin-right: calc(-1 * var(--gutter-h));
+    }
   }
 }

package/dist/elements/Hamburger/index.scss

@@ -1,40 +1,46 @@
 @import '../../scss/styles';
 
-.hamburger {
-  padding: 0;
-  border: 0;
-  cursor: pointer;
-  background-color: var(--theme-bg);
-  outline: none;
-  position: relative;
-  color: var(--theme-text);
-  box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
-  padding: base(0.1);
-  border-radius: 3px;
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  width: 100%;
-  transition-property: box-shadow, background-color;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+@layer payload-default {
+  .hamburger {
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+    background-color: var(--theme-bg);
+    outline: none;
+    position: relative;
+    color: var(--theme-text);
+    box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
+    padding: base(0.1);
+    border-radius: 3px;
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    transition-property: box-shadow, background-color;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    --hamburger-size: var(--base);
 
-  &:hover {
-    background-color: var(--theme-elevation-100);
-    box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
-  }
+    &:hover {
+      background-color: var(--theme-elevation-100);
+      box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
+    }
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &::after {
-    z-index: -1;
-  }
+    &::after {
+      z-index: -1;
+    }
 
-  &__open-icon,
-  &__close-icon {
-    width: var(--hamburger-size);
-    height: var(--hamburger-size);
+    &__open-icon,
+    &__close-icon {
+      width: var(--hamburger-size);
+      height: var(--hamburger-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

package/dist/elements/IDLabel/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.id-label {
-  font-size: base(0.8);
-  line-height: base(1.2);
-  font-weight: normal;
-  color: var(--theme-elevation-600);
-  background: var(--theme-elevation-100);
-  padding: base(0.2) base(0.4);
-  border-radius: $style-radius-m;
-  display: inline-flex;
+@layer payload-default {
+  .id-label {
+    font-size: base(0.8);
+    line-height: base(1.2);
+    font-weight: normal;
+    color: var(--theme-elevation-600);
+    background: var(--theme-elevation-100);
+    padding: base(0.2) base(0.4);
+    border-radius: $style-radius-m;
+    display: inline-flex;
+  }
 }

package/dist/elements/LeaveWithoutSaving/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+export declare const LeaveWithoutSaving: React.FC;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/LeaveWithoutSaving/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAOrD,OAAO,cAAc,CAAA;AAkDrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EA8BtC,CAAA"}