@payloadcms/next 3.41.0-canary.2 → 3.41.0-internal.8617025

package/dist/scss/toasts.scss

@@ -0,0 +1,144 @@
+@import './styles.scss';
+
+@layer payload-default {
+  .payload-toast-container {
+    padding: 0;
+    margin: 0;
+
+    .payload-toast-close-button {
+      position: absolute;
+      order: 3;
+      left: unset;
+      inset-inline-end: base(0.8);
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--theme-elevation-600);
+      background: unset;
+      border: none;
+
+      svg {
+        width: base(0.8);
+        height: base(0.8);
+      }
+
+      &:hover {
+        color: var(--theme-elevation-250);
+        background: none;
+      }
+
+      [dir='RTL'] & {
+        right: unset;
+        left: 0.5rem;
+      }
+    }
+
+    .toast-title {
+      line-height: base(1);
+      margin-right: base(1);
+    }
+
+    .payload-toast-item {
+      padding: base(0.8);
+      color: var(--theme-elevation-800);
+      font-style: normal;
+      font-weight: 600;
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      width: 100%;
+      border-radius: 4px;
+      border: 1px solid var(--theme-border-color);
+      background: var(--theme-input-bg);
+      box-shadow:
+        0px 10px 4px -8px rgba(0, 2, 4, 0.02),
+        0px 2px 3px 0px rgba(0, 2, 4, 0.05);
+
+      .toast-content {
+        transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        width: 100%;
+      }
+
+      &[data-front='false'] {
+        .toast-content {
+          opacity: 0;
+        }
+      }
+
+      &[data-expanded='true'] {
+        .toast-content {
+          opacity: 1;
+        }
+      }
+
+      .toast-icon {
+        width: base(0.8);
+        height: base(0.8);
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        & > * {
+          width: base(1.2);
+          height: base(1.2);
+        }
+      }
+
+      &.toast-warning {
+        color: var(--theme-warning-800);
+        border-color: var(--theme-warning-250);
+        background-color: var(--theme-warning-100);
+
+        .payload-toast-close-button {
+          color: var(--theme-warning-600);
+
+          &:hover {
+            color: var(--theme-warning-250);
+          }
+        }
+      }
+
+      &.toast-error {
+        color: var(--theme-error-800);
+        border-color: var(--theme-error-250);
+        background-color: var(--theme-error-100);
+
+        .payload-toast-close-button {
+          color: var(--theme-error-600);
+
+          &:hover {
+            color: var(--theme-error-250);
+          }
+        }
+      }
+
+      &.toast-success {
+        color: var(--theme-success-800);
+        border-color: var(--theme-success-250);
+        background-color: var(--theme-success-100);
+
+        .payload-toast-close-button {
+          color: var(--theme-success-600);
+
+          &:hover {
+            color: var(--theme-success-250);
+          }
+        }
+      }
+
+      &.toast-info {
+        color: var(--theme-elevation-800);
+        border-color: var(--theme-elevation-250);
+        background-color: var(--theme-elevation-100);
+
+        .payload-toast-close-button {
+          color: var(--theme-elevation-600);
+
+          &:hover {
+            color: var(--theme-elevation-250);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/type.scss

@@ -0,0 +1,110 @@
+@import 'vars';
+@import 'queries';
+
+/////////////////////////////
+// HEADINGS
+/////////////////////////////
+@layer payload-default {
+  %h1,
+  %h2,
+  %h3,
+  %h4,
+  %h5,
+  %h6 {
+    font-family: var(--font-body);
+    font-weight: 500;
+  }
+
+  %h1 {
+    margin: 0;
+    font-size: base(1.6);
+    line-height: base(1.8);
+
+    @include small-break {
+      letter-spacing: -0.5px;
+      font-size: base(1.25);
+    }
+  }
+
+  %h2 {
+    margin: 0;
+    font-size: base(1.3);
+    line-height: base(1.6);
+
+    @include small-break {
+      font-size: base(0.85);
+    }
+  }
+
+  %h3 {
+    margin: 0;
+    font-size: base(1);
+    line-height: base(1.2);
+
+    @include small-break {
+      font-size: base(0.65);
+      line-height: 1.25;
+    }
+  }
+
+  %h4 {
+    margin: 0;
+    font-size: base(0.8);
+    line-height: base(1);
+    letter-spacing: -0.375px;
+  }
+
+  %h5 {
+    margin: 0;
+    font-size: base(0.65);
+    line-height: base(0.8);
+  }
+
+  %h6 {
+    margin: 0;
+    font-size: base(0.6);
+    line-height: base(0.8);
+  }
+
+  %small {
+    margin: 0;
+    font-size: 12px;
+    line-height: 20px;
+  }
+
+  /////////////////////////////
+  // TYPE STYLES
+  /////////////////////////////
+
+  %large-body {
+    font-size: base(0.6);
+    line-height: base(1);
+    letter-spacing: base(0.02);
+
+    @include mid-break {
+      font-size: base(0.7);
+      line-height: base(1);
+    }
+
+    @include small-break {
+      font-size: base(0.55);
+      line-height: base(0.75);
+    }
+  }
+
+  %body {
+    font-size: $baseline-body-size;
+    line-height: $baseline-px;
+    font-weight: normal;
+    font-family: var(--font-body);
+  }
+
+  %code {
+    font-size: base(0.4);
+    color: var(--theme-elevation-400);
+
+    span {
+      color: var(--theme-elevation-800);
+    }
+  }
+}

package/dist/scss/vars.scss

@@ -0,0 +1,192 @@
+@use 'sass:math';
+
+/////////////////////////////
+// BREAKPOINTS
+/////////////////////////////
+
+$breakpoint-xs-width: 400px !default;
+$breakpoint-s-width: 768px !default;
+$breakpoint-m-width: 1024px !default;
+$breakpoint-l-width: 1440px !default;
+
+//////////////////////////////
+// BASELINE GRID
+//////////////////////////////
+
+$baseline-px: 20px !default;
+$baseline-body-size: 13px !default;
+$baseline: math.div($baseline-px, $baseline-body-size) + rem;
+
+@function base($multiplier) {
+  @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
+}
+
+//////////////////////////////
+// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+//////////////////////////////
+
+$color-dark-gray: #333333 !default;
+$color-gray: #9a9a9a !default;
+$color-light-gray: #dadada !default;
+$color-background-gray: #f3f3f3 !default;
+$color-red: #ff6f76 !default;
+$color-yellow: #fdffa4 !default;
+$color-green: #b2ffd6 !default;
+$color-purple: #f3ddf3 !default;
+
+//////////////////////////////
+// STYLES
+//////////////////////////////
+
+$style-radius-s: 3px !default;
+$style-radius-m: 4px !default;
+$style-radius-l: 8px !default;
+$style-stroke-width: 1px !default;
+
+$style-stroke-width-s: 1px !default;
+$style-stroke-width-m: 2px !default;
+
+//////////////////////////////
+// MISC
+//////////////////////////////
+
+$top-header-offset: calc(base(1) - 1px);
+$top-header-offset-m: base(3);
+$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
+
+//////////////////////////////
+// SHADOWS
+//////////////////////////////
+
+@mixin shadow-sm {
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+}
+
+@mixin shadow-m {
+  box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
+}
+
+@mixin shadow-lg {
+  box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
+}
+
+@mixin shadow-lg-top {
+  box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
+}
+
+@mixin inputShadow {
+  @include shadow-sm;
+
+  &:not(:disabled) {
+    &:hover {
+      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+@mixin soft-shadow-bottom {
+  box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
+}
+
+//////////////////////////////
+// STYLE MIXINS
+//////////////////////////////
+
+@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
+  &:before,
+  &:after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &:before {
+    background: $color;
+    opacity: $opacity;
+  }
+
+  &:after {
+    backdrop-filter: blur(8px);
+  }
+}
+
+@mixin blur-bg-light {
+  @include blur-bg(var(--theme-bg), 0.3);
+}
+
+@mixin readOnly {
+  background: var(--theme-elevation-100);
+  color: var(--theme-elevation-400);
+  box-shadow: none;
+
+  &:hover {
+    border-color: var(--theme-elevation-150);
+    box-shadow: none;
+  }
+}
+
+@mixin formInput() {
+  @include inputShadow;
+  font-family: var(--font-body);
+  width: 100%;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-s);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-800);
+  font-size: 1rem;
+  height: base(2);
+  line-height: base(1);
+  padding: base(0.4) base(0.75);
+  -webkit-appearance: none;
+  transition-property: border, box-shadow;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+
+  &[data-rtl='true'] {
+    direction: rtl;
+  }
+
+  &::-webkit-input-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &::-moz-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &:hover {
+    border-color: var(--theme-elevation-250);
+  }
+
+  &:focus,
+  &:focus-within,
+  &:active {
+    border-color: var(--theme-elevation-400);
+    outline: 0;
+  }
+
+  &:disabled {
+    @include readOnly;
+  }
+}
+
+@mixin lightInputError {
+  background-color: var(--theme-error-50);
+  border: 1px solid var(--theme-error-500);
+}
+
+@mixin darkInputError {
+  background-color: var(--theme-error-100);
+  border: 1px solid var(--theme-error-400);
+
+  &:hover {
+    border-color: var(--theme-error-500);
+  }
+}

package/dist/scss/z-index.scss

@@ -0,0 +1,9 @@
+/////////////////////////////
+// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+/////////////////////////////
+
+$z-page: 20;
+$z-page-content: 30;
+$z-nav: 40;
+$z-modal: 50;
+$z-status: 60;

package/dist/templates/Default/Wrapper/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .template-default {

package/dist/templates/Default/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles.scss';
 
 @layer payload-default {
   .template-default {

package/dist/templates/Minimal/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles';
 
 @layer payload-default {
   .template-minimal {

package/dist/views/API/RenderJSON/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 $tab-width: 16px;
 

package/dist/views/API/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles.scss';
 
 @layer payload-default {
   .query-inspector {

package/dist/views/Account/Settings/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .payload-settings {

package/dist/views/CreateFirstUser/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles.scss';
 
 @layer payload-default {
   .create-first-user {

package/dist/views/Dashboard/Default/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .dashboard {

package/dist/views/LivePreview/Preview/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .live-preview-window {

package/dist/views/LivePreview/Toolbar/Controls/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../../scss/styles.scss';
 
 @layer payload-default {
   .live-preview-toolbar-controls {

package/dist/views/LivePreview/Toolbar/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .live-preview-toolbar {

package/dist/views/LivePreview/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles.scss';
 
 @layer payload-default {
   .live-preview {

package/dist/views/Logout/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles.scss';
 
 @layer payload-default {
   .logout {

package/dist/views/NotFound/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles.scss';
 
 @layer payload-default {
   .not-found {

package/dist/views/ResetPassword/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles.scss';
 
 @layer payload-default {
   .reset-password__wrap {

package/dist/views/Unauthorized/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles.scss';
 
 @layer payload-default {
   .unauthorized {

package/dist/views/Version/Default/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .view-version {
@@ -61,6 +61,7 @@
         gap: calc(var(--base) / 4);
       }
 
+
       &__restore {
         margin: calc(var(--base) * 0.5) 0 0 0;
       }

package/dist/views/Version/RenderFieldsToDiff/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .render-field-diffs {

package/dist/views/Version/Restore/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../.././scss/styles.scss';
 
 @layer payload-default {
   .restore-version {

package/dist/views/Versions/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles.scss';
 
 @layer payload-default {
   .versions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/next",
-  "version": "3.41.0-canary.2",
+  "version": "3.41.0-internal.8617025",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -16,10 +16,6 @@
       "url": "https://payloadcms.com"
     }
   ],
-  "sideEffects": [
-    "*.scss",
-    "*.css"
-  ],
   "type": "module",
   "exports": {
     "./css": {
@@ -88,32 +84,32 @@
     "react-diff-viewer-continued": "4.0.5",
     "sass": "1.77.4",
     "uuid": "10.0.0",
-    "@payloadcms/graphql": "3.41.0-canary.2",
-    "@payloadcms/translations": "3.41.0-canary.2",
-    "@payloadcms/ui": "3.41.0-canary.2"
+    "@payloadcms/graphql": "3.41.0-internal.8617025",
+    "@payloadcms/translations": "3.41.0-internal.8617025",
+    "@payloadcms/ui": "3.41.0-internal.8617025"
   },
   "devDependencies": {
-    "@babel/cli": "7.27.2",
-    "@babel/core": "7.27.3",
-    "@babel/preset-env": "7.27.2",
-    "@babel/preset-react": "7.27.1",
-    "@babel/preset-typescript": "7.27.1",
-    "@next/eslint-plugin-next": "15.3.2",
+    "@babel/cli": "7.26.4",
+    "@babel/core": "7.26.7",
+    "@babel/preset-env": "7.26.7",
+    "@babel/preset-react": "7.26.3",
+    "@babel/preset-typescript": "7.26.0",
+    "@next/eslint-plugin-next": "15.3.0",
     "@types/busboy": "1.5.4",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.2",
     "@types/uuid": "10.0.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
-    "esbuild": "0.25.5",
+    "babel-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
+    "esbuild": "0.24.2",
     "esbuild-sass-plugin": "3.3.1",
-    "swc-plugin-transform-remove-imports": "4.0.4",
+    "swc-plugin-transform-remove-imports": "3.1.0",
     "@payloadcms/eslint-config": "3.28.0",
-    "payload": "3.41.0-canary.2"
+    "payload": "3.41.0-internal.8617025"
   },
   "peerDependencies": {
     "graphql": "^16.8.1",
     "next": "^15.2.3",
-    "payload": "3.41.0-canary.2"
+    "payload": "3.41.0-internal.8617025"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"