@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec

package/dist/elements/DraggableSortable/DraggableSortableItem/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/types.ts"],"sourcesContent":["import type { UseDraggableArguments } from '@dnd-kit/core'\nimport type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'\nimport type React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../useDraggableSortable/types.js'\n\nexport type DragHandleProps = {\n  attributes: UseDraggableArguments['attributes']\n  listeners: SyntheticListenerMap\n} & UseDraggableArguments\n\nexport type ChildFunction = (args: UseDraggableSortableReturn) => React.ReactNode\n\nexport type Props = {\n  children: ChildFunction\n} & UseDraggableArguments\n"],"mappings":"AAaA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/types.ts"],"sourcesContent":["import type { UseDraggableArguments } from '@dnd-kit/core'\nimport type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities/index.js'\nimport type React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../useDraggableSortable/types.js'\n\nexport type DragHandleProps = {\n  attributes: UseDraggableArguments['attributes']\n  listeners: SyntheticListenerMap\n} & UseDraggableArguments\n\nexport type ChildFunction = (args: UseDraggableSortableReturn) => React.ReactNode\n\nexport type Props = {\n  children: ChildFunction\n} & UseDraggableArguments\n"],"mappings":"AAaA","ignoreList":[]}

package/dist/elements/DraggableSortable/useDraggableSortable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAI1D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,oBAAoB,UAAW,qBAAqB,KAAG,0BAyBnE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAI1D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,oBAAoB,GAAI,OAAO,qBAAqB,KAAG,0BAoCnE,CAAA"}

package/dist/elements/DraggableSortable/useDraggableSortable/index.js

@@ -3,7 +3,7 @@
 import { c as _c } from "react/compiler-runtime";
 import { useSortable } from '@dnd-kit/sortable';
 export const useDraggableSortable = props => {
-  const $ = _c(16);
+  const $ = _c(18);
   const {
     id,
     disabled
@@ -34,6 +34,8 @@ export const useDraggableSortable = props => {
   const {
     attributes,
     isDragging,
+    isOver,
+    isSorting,
     listeners,
     setNodeRef,
     transform,
@@ -63,24 +65,28 @@ export const useDraggableSortable = props => {
   }
   const t4 = transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`;
   let t5;
-  if ($[9] !== isDragging || $[10] !== listeners || $[11] !== setNodeRef || $[12] !== t3 || $[13] !== t4 || $[14] !== transition) {
+  if ($[9] !== isDragging || $[10] !== isOver || $[11] !== isSorting || $[12] !== listeners || $[13] !== setNodeRef || $[14] !== t3 || $[15] !== t4 || $[16] !== transition) {
     t5 = {
       attributes: t3,
       isDragging,
+      isOver,
+      isSorting,
       listeners,
       setNodeRef,
       transform: t4,
       transition
     };
     $[9] = isDragging;
-    $[10] = listeners;
-    $[11] = setNodeRef;
-    $[12] = t3;
-    $[13] = t4;
-    $[14] = transition;
-    $[15] = t5;
+    $[10] = isOver;
+    $[11] = isSorting;
+    $[12] = listeners;
+    $[13] = setNodeRef;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = transition;
+    $[17] = t5;
   } else {
-    t5 = $[15];
+    t5 = $[17];
   }
   return t5;
 };

package/dist/elements/DraggableSortable/useDraggableSortable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useSortable","useDraggableSortable","props","$","id","disabled","t0","Symbol","for","duration","easing","t1","transition","attributes","isDragging","listeners","setNodeRef","transform","t2","t3","style","t4","x","y","t5"],"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { UseDraggableArguments } from '@dnd-kit/core'\n\nimport { useSortable } from '@dnd-kit/sortable'\n\nimport type { UseDraggableSortableReturn } from './types.js'\n\nexport const useDraggableSortable = (props: UseDraggableArguments): UseDraggableSortableReturn => {\n  const { id, disabled } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({\n    id,\n    disabled,\n    transition: {\n      duration: 250,\n      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',\n    },\n  })\n\n  return {\n    attributes: {\n      ...attributes,\n      style: {\n        transition,\n      },\n    },\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`, // translate3d is faster than translate in most browsers\n    transition,\n  }\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAGA,SAASC,WAAW,QAAQ;AAI5B,OAAO,MAAMC,oBAAA,GAAuBC,KAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EAClC;IAAAK,EAAA;IAAAC;EAAA,IAAyBH,KAAA;EAAA,IAAAI,EAAA;EAAA,IAAAH,CAAA,QAAAI,MAAA,CAAAC,GAAA;IAKXF,EAAA;MAAAG,QAAA;MAAAC,MAAA,EAEF;IAAA;IACVP,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAR,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAC,EAAA;IAN2FO,EAAA;MAAAP,EAAA;MAAAC,QAAA;MAAAO,UAAA,EAG/EN;IAGZ;IACFH,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAC,EAAA;IAAAD,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAPA;IAAAU,UAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAL;EAAA,IAAiFZ,WAAA,CAAYW,EAO7F;EAAA,IAAAO,EAAA;EAAA,IAAAf,CAAA,QAAAS,UAAA;IAKWM,EAAA;MAAAN;IAAA;IAEPT,CAAA,MAAAS,UAAA;IAAAT,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAA,IAAAgB,EAAA;EAAA,IAAAhB,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAe,EAAA;IAJUC,EAAA;MAAA,GACPN,UAAU;MAAAO,KAAA,EACNF;IAEP;IACFf,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAIW,MAAAkB,EAAA,GAAAJ,SAAA,IAAa,eAAeA,SAAA,CAAAK,CAAA,OAAkBL,SAAA,CAAAM,CAAA,QAAmB;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAW,UAAA,IAAAX,CAAA,SAAAY,SAAA,IAAAZ,CAAA,SAAAa,UAAA,IAAAb,CAAA,SAAAgB,EAAA,IAAAhB,CAAA,SAAAkB,EAAA,IAAAlB,CAAA,SAAAS,UAAA;IAVvEY,EAAA;MAAAX,UAAA,EACOM,EAKZ;MAAAL,UAAA;MAAAC,SAAA;MAAAC,UAAA;MAAAC,SAAA,EAIWI,EAAiE;MAAAT;IAAA;IAE9ET,CAAA,MAAAW,UAAA;IAAAX,CAAA,OAAAY,SAAA;IAAAZ,CAAA,OAAAa,UAAA;IAAAb,CAAA,OAAAgB,EAAA;IAAAhB,CAAA,OAAAkB,EAAA;IAAAlB,CAAA,OAAAS,UAAA;IAAAT,CAAA,OAAAqB,EAAA;EAAA;IAAAA,EAAA,GAAArB,CAAA;EAAA;EAAA,OAZOqB,EAYP;AAAA,CACF","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useSortable","useDraggableSortable","props","$","id","disabled","t0","Symbol","for","duration","easing","t1","transition","attributes","isDragging","isOver","isSorting","listeners","setNodeRef","transform","t2","t3","style","t4","x","y","t5"],"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { UseDraggableArguments } from '@dnd-kit/core'\n\nimport { useSortable } from '@dnd-kit/sortable'\n\nimport type { UseDraggableSortableReturn } from './types.js'\n\nexport const useDraggableSortable = (props: UseDraggableArguments): UseDraggableSortableReturn => {\n  const { id, disabled } = props\n\n  const {\n    attributes,\n    isDragging,\n    isOver,\n    isSorting,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id,\n    disabled,\n    transition: {\n      duration: 250,\n      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',\n    },\n  })\n\n  return {\n    attributes: {\n      ...attributes,\n      style: {\n        transition,\n      },\n    },\n    isDragging,\n    isOver,\n    isSorting,\n    listeners,\n    setNodeRef,\n    transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`, // translate3d is faster than translate in most browsers\n    transition,\n  }\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAGA,SAASC,WAAW,QAAQ;AAI5B,OAAO,MAAMC,oBAAA,GAAuBC,KAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EAClC;IAAAK,EAAA;IAAAC;EAAA,IAAyBH,KAAA;EAAA,IAAAI,EAAA;EAAA,IAAAH,CAAA,QAAAI,MAAA,CAAAC,GAAA;IAcXF,EAAA;MAAAG,QAAA;MAAAC,MAAA,EAEF;IAAA;IACVP,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAR,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAC,EAAA;IANcO,EAAA;MAAAP,EAAA;MAAAC,QAAA;MAAAO,UAAA,EAGFN;IAGZ;IACFH,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAC,EAAA;IAAAD,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAhBA;IAAAU,UAAA;IAAAC,UAAA;IAAAC,MAAA;IAAAC,SAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAP;EAAA,IASIZ,WAAA,CAAYW,EAOhB;EAAA,IAAAS,EAAA;EAAA,IAAAjB,CAAA,QAAAS,UAAA;IAKWQ,EAAA;MAAAR;IAAA;IAEPT,CAAA,MAAAS,UAAA;IAAAT,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAlB,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAiB,EAAA;IAJUC,EAAA;MAAA,GACPR,UAAU;MAAAS,KAAA,EACNF;IAEP;IACFjB,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAiB,EAAA;IAAAjB,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAMW,MAAAoB,EAAA,GAAAJ,SAAA,IAAa,eAAeA,SAAA,CAAAK,CAAA,OAAkBL,SAAA,CAAAM,CAAA,QAAmB;EAAA,IAAAC,EAAA;EAAA,IAAAvB,CAAA,QAAAW,UAAA,IAAAX,CAAA,SAAAY,MAAA,IAAAZ,CAAA,SAAAa,SAAA,IAAAb,CAAA,SAAAc,SAAA,IAAAd,CAAA,SAAAe,UAAA,IAAAf,CAAA,SAAAkB,EAAA,IAAAlB,CAAA,SAAAoB,EAAA,IAAApB,CAAA,SAAAS,UAAA;IAZvEc,EAAA;MAAAb,UAAA,EACOQ,EAKZ;MAAAP,UAAA;MAAAC,MAAA;MAAAC,SAAA;MAAAC,SAAA;MAAAC,UAAA;MAAAC,SAAA,EAMWI,EAAiE;MAAAX;IAAA;IAE9ET,CAAA,MAAAW,UAAA;IAAAX,CAAA,OAAAY,MAAA;IAAAZ,CAAA,OAAAa,SAAA;IAAAb,CAAA,OAAAc,SAAA;IAAAd,CAAA,OAAAe,UAAA;IAAAf,CAAA,OAAAkB,EAAA;IAAAlB,CAAA,OAAAoB,EAAA;IAAApB,CAAA,OAAAS,UAAA;IAAAT,CAAA,OAAAuB,EAAA;EAAA;IAAAA,EAAA,GAAAvB,CAAA;EAAA;EAAA,OAdOuB,EAcP;AAAA,CACF","ignoreList":[]}

package/dist/elements/DraggableSortable/useDraggableSortable/types.d.ts

@@ -1,8 +1,10 @@
-import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities/index.js';
 import type { HTMLAttributes } from 'react';
 export type UseDraggableSortableReturn = {
     readonly attributes: HTMLAttributes<unknown>;
     readonly isDragging?: boolean;
+    readonly isOver?: boolean;
+    readonly isSorting?: boolean;
     readonly listeners: SyntheticListenerMap;
     readonly setNodeRef: (node: HTMLElement | null) => void;
     readonly transform: string;

package/dist/elements/DraggableSortable/useDraggableSortable/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC5C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAA;IACxC,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAA;AACvF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC5C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAA;IACxC,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA"}

package/dist/elements/DraggableSortable/useDraggableSortable/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"sourcesContent":["import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'\nimport type { HTMLAttributes } from 'react'\n\nexport type UseDraggableSortableReturn = {\n  readonly attributes: HTMLAttributes<unknown>\n  readonly isDragging?: boolean\n  readonly listeners: SyntheticListenerMap\n  readonly setNodeRef: (node: HTMLElement | null) => void\n  readonly transform: string\n  readonly transition: string\n}\n"],"mappings":"AAGA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"sourcesContent":["import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities/index.js'\nimport type { HTMLAttributes } from 'react'\n\nexport type UseDraggableSortableReturn = {\n  readonly attributes: HTMLAttributes<unknown>\n  readonly isDragging?: boolean\n  readonly isOver?: boolean\n  readonly isSorting?: boolean\n  readonly listeners: SyntheticListenerMap\n  readonly setNodeRef: (node: HTMLElement | null) => void\n  readonly transform: string\n  readonly transition: string\n}\n"],"mappings":"AAGA","ignoreList":[]}

package/dist/elements/Drawer/index.css

@@ -1,50 +1,33 @@
 @layer payload-default {
   .drawer {
     display: flex;
+    justify-content: flex-end;
     overflow: hidden;
     position: fixed;
-    height: 100vh;
+    inset: 0;
+
+    --gutter-h: var(--spacer-2-5);
+    --gutter-v: var(--spacer-2-5);
   }
 
   .drawer__blur-bg {
     position: absolute;
     z-index: 1;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     opacity: 0;
-    transition: all 200ms linear;
-
-    &:before,
-    &:after {
-      content: ' ';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-
-    &:before {
-      background: var(--theme-bg);
-      opacity: 0.75;
-    }
-
-    &:after {
-      backdrop-filter: blur(8px);
-    }
+    transition: opacity 200ms linear;
+    background: var(--color-drawer-backdrop);
   }
 
   .drawer__content {
     opacity: 0;
-    transform: translateX(calc(var(--base) * 4));
     position: relative;
     z-index: 2;
-    /* NOTE: width is controlled by js */
+    width: 600px;
     overflow: hidden;
     transition: all 200ms linear;
-    background-color: var(--theme-bg);
+    background-color: var(--color-bg);
+    box-shadow: var(--elevation-400-menu-panel);
   }
 
   .drawer__content-children {
@@ -52,13 +35,8 @@
     z-index: 1;
     overflow: auto;
     height: 100%;
-    padding: 0;
     display: flex;
     flex-direction: column;
-
-    & > * {
-      padding: var(--spacer-2-5);
-    }
   }
 
   .drawer--is-open .drawer__content,
@@ -80,14 +58,13 @@
     position: relative;
     z-index: 2;
     flex-shrink: 0;
-    text-indent: -9999px;
     cursor: pointer;
     opacity: 0;
-    will-change: opacity;
     transition: none;
     transition-delay: 0ms;
     flex-grow: 1;
-    background: var(--theme-elevation-800);
+    background: var(--color-drawer-backdrop);
+    border: 0;
 
     &:active,
     &:focus {
@@ -98,41 +75,36 @@
   .drawer__header {
     display: flex;
     align-items: center;
-    width: 100%;
-    border-bottom: 1px solid var(--color-border);
+    padding: var(--spacer-2-5);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
     background: var(--color-bg);
+    gap: var(--spacer-2);
   }
 
   .drawer__header__title {
     margin: 0;
-    flex-grow: 1;
+    flex: 1 0 0;
+    min-width: 0;
     overflow: hidden;
-    color: var(--color-text);
+    white-space: nowrap;
     text-overflow: ellipsis;
+    color: var(--color-text);
+    font-family: var(--text-body-large-strong-font-family);
     font-size: var(--text-body-large-strong-font-size);
     font-weight: var(--text-body-large-strong-font-weight);
     line-height: var(--text-body-large-strong-line-height);
-    letter-spacing: -0.032px;
+    letter-spacing: var(--text-body-large-strong-letter-spacing);
   }
 
   .drawer__header__close {
     margin: 0;
+    padding: 0;
+    border: 0;
   }
 
   .drawer__header__actions {
     display: flex;
-    gap: 10px;
+    gap: var(--spacer-2);
     align-items: center;
-    margin-left: auto;
-  }
-
-  html[data-theme='dark'] {
-    .drawer__close {
-      background: var(--color-base-1000);
-    }
-
-    .drawer--is-open .drawer__close {
-      opacity: 0.25;
-    }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqE,MAAM,OAAO,CAAA;AAEzF,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,MAAM,CAAA;AAE9B,eAAO,MAAM,gBAAgB,oBAAqB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyBhD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwGlC,CAAA;AAED,eAAO,MAAM,kBAAkB,uBAAmB,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAKvE,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,MAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqE,MAAM,OAAO,CAAA;AAEzF,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,MAAM,CAAA;AAE9B,eAAO,MAAM,gBAAgB,GAAI,iBAAiB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwChD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIlC,CAAA;AAkGD,eAAO,MAAM,kBAAkB,uBAAmB,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAKvE,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,MAAiC,CAAA"}

package/dist/elements/Drawer/index.js

@@ -4,9 +4,9 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, useModal } from '@faceless-ui/modal';
 import React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
-import { Gutter } from '../Gutter/index.js';
 import './index.css';
 const baseClass = 'drawer';
 export const drawerZBase = 100;
@@ -19,6 +19,7 @@ export const DrawerToggler = t0 => {
   const $ = _c(4);
   const {
     slug,
+    buttonStyle,
     children,
     className,
     disabled,
@@ -44,6 +45,16 @@ export const DrawerToggler = t0 => {
     t1 = $[3];
   }
   const handleClick = t1;
+  if (buttonStyle) {
+    return _jsx(Button, {
+      buttonStyle,
+      className,
+      disabled,
+      onClick: handleClick,
+      ...rest,
+      children
+    });
+  }
   return _jsx("button", {
     className,
     disabled,
@@ -53,19 +64,22 @@ export const DrawerToggler = t0 => {
     children
   });
 };
-export const Drawer = t0 => {
+export const Drawer = props => /*#__PURE__*/_jsx(DrawerDepthProvider, {
+  children: /*#__PURE__*/_jsx(DrawerInner, {
+    ...props
+  })
+});
+const DrawerInner = t0 => {
   const $ = _c(23);
   const {
     slug,
     children,
     className,
-    gutter: t1,
     Header,
     headerActions,
     hoverTitle,
     title
   } = t0;
-  const gutter = t1 === undefined ? true : t1;
   const {
     t
   } = useTranslation();
@@ -76,38 +90,39 @@ export const Drawer = t0 => {
   const drawerDepth = useDrawerDepth();
   const isOpen = !!modalState[slug]?.isOpen;
   const [animateIn, setAnimateIn] = useState(isOpen);
+  let t1;
   let t2;
-  let t3;
   if ($[0] !== isOpen) {
-    t2 = () => {
+    t1 = () => {
       setAnimateIn(isOpen);
     };
-    t3 = [isOpen];
+    t2 = [isOpen];
     $[0] = isOpen;
-    $[1] = t2;
-    $[2] = t3;
+    $[1] = t1;
+    $[2] = t2;
   } else {
-    t2 = $[1];
-    t3 = $[2];
+    t1 = $[1];
+    t2 = $[2];
   }
-  useLayoutEffect(t2, t3);
+  useLayoutEffect(t1, t2);
   if (isOpen) {
-    const t4 = animateIn && `${baseClass}--is-open`;
-    const t5 = drawerDepth > 1 && `${baseClass}--nested`;
-    let t6;
-    if ($[3] !== className || $[4] !== t4 || $[5] !== t5) {
-      t6 = [className, baseClass, t4, t5].filter(Boolean);
+    const t3 = animateIn && `${baseClass}--is-open`;
+    const t4 = drawerDepth > 1 && `${baseClass}--nested`;
+    let t5;
+    if ($[3] !== className || $[4] !== t3 || $[5] !== t4) {
+      t5 = [className, baseClass, t3, t4].filter(Boolean);
       $[3] = className;
-      $[4] = t4;
-      $[5] = t5;
-      $[6] = t6;
+      $[4] = t3;
+      $[5] = t4;
+      $[6] = t5;
     } else {
-      t6 = $[6];
+      t5 = $[6];
     }
-    const t7 = t6.join(" ");
+    const t6 = t5.join(" ");
+    const t7 = drawerDepth > 1 ? `calc(${drawerDepth - 1} * var(--spacer-3))` : undefined;
     const t8 = drawerZBase + drawerDepth;
     let t9;
-    if ($[7] !== Header || $[8] !== children || $[9] !== closeModal || $[10] !== drawerDepth || $[11] !== gutter || $[12] !== headerActions || $[13] !== hoverTitle || $[14] !== slug || $[15] !== t || $[16] !== t7 || $[17] !== t8 || $[18] !== title) {
+    if ($[7] !== Header || $[8] !== children || $[9] !== closeModal || $[10] !== drawerDepth || $[11] !== headerActions || $[12] !== hoverTitle || $[13] !== slug || $[14] !== t || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== title) {
       let t10;
       if ($[20] !== closeModal || $[21] !== slug) {
         t10 = () => closeModal(slug);
@@ -117,64 +132,60 @@ export const Drawer = t0 => {
       } else {
         t10 = $[22];
       }
-      t9 = _jsx(DrawerDepthProvider, {
-        children: _jsxs(Modal, {
-          className: t7,
-          closeOnBlur: false,
-          slug,
-          style: {
-            zIndex: t8
-          },
-          children: [(!drawerDepth || drawerDepth === 1) && _jsx("div", {
-            className: `${baseClass}__blur-bg`
-          }), _jsx("button", {
-            "aria-label": t("general:close"),
-            className: `${baseClass}__close`,
-            id: `close-drawer__${slug}`,
-            onClick: t10,
-            type: "button"
+      t9 = _jsxs(Modal, {
+        className: t6,
+        closeOnBlur: false,
+        slug,
+        style: {
+          paddingRight: t7,
+          zIndex: t8
+        },
+        children: [drawerDepth === 1 && _jsx("div", {
+          className: `${baseClass}__blur-bg`
+        }), _jsx("button", {
+          "aria-label": t("general:close"),
+          className: `${baseClass}__close`,
+          id: `close-drawer__${slug}`,
+          onClick: t10,
+          type: "button"
+        }), _jsxs("div", {
+          className: `${baseClass}__content`,
+          children: [_jsx("div", {
+            className: `${baseClass}__blur-bg-content`
           }), _jsxs("div", {
-            className: `${baseClass}__content`,
-            style: {
-              width: `calc(100% - (${drawerDepth} * var(--gutter-h)))`
-            },
-            children: [_jsx("div", {
-              className: `${baseClass}__blur-bg-content`
-            }), _jsxs(Gutter, {
-              className: `${baseClass}__content-children`,
-              left: gutter,
-              right: gutter,
-              children: [Header, Header === undefined && _jsxs("div", {
-                className: `${baseClass}__header`,
-                children: [_jsx(Button, {
-                  "aria-label": t("general:close"),
-                  buttonStyle: "icon-label",
-                  className: `${baseClass}__header__close`,
-                  id: `close-drawer__${slug}`,
-                  onClick: () => closeModal(slug),
-                  children: "\u2039"
-                }), _jsx("h2", {
-                  className: `${baseClass}__header__title`,
-                  title: hoverTitle ? title : null,
-                  children: title
-                }), headerActions && headerActions.length > 0 && _jsx("div", {
-                  className: `${baseClass}__header__actions`,
-                  children: headerActions.map(_temp)
-                })]
-              }), children]
-            })]
+            className: `${baseClass}__content-children`,
+            children: [Header, Header === undefined && _jsxs("div", {
+              className: `${baseClass}__header`,
+              children: [_jsx(Button, {
+                "aria-label": t("general:close"),
+                buttonStyle: "ghost",
+                className: `${baseClass}__header__close`,
+                icon: _jsx(ChevronIcon, {
+                  direction: "left",
+                  size: 24
+                }),
+                onClick: () => closeModal(slug)
+              }), _jsx("h2", {
+                className: `${baseClass}__header__title`,
+                title: hoverTitle ? title : null,
+                children: title
+              }), headerActions && headerActions.length > 0 && _jsx("div", {
+                className: `${baseClass}__header__actions`,
+                children: headerActions.map(_temp)
+              })]
+            }), children]
           })]
-        })
+        })]
       });
       $[7] = Header;
       $[8] = children;
       $[9] = closeModal;
       $[10] = drawerDepth;
-      $[11] = gutter;
-      $[12] = headerActions;
-      $[13] = hoverTitle;
-      $[14] = slug;
-      $[15] = t;
+      $[11] = headerActions;
+      $[12] = hoverTitle;
+      $[13] = slug;
+      $[14] = t;
+      $[15] = t6;
       $[16] = t7;
       $[17] = t8;
       $[18] = title;
@@ -186,7 +197,7 @@ export const Drawer = t0 => {
   }
   return null;
 };
-export const DrawerDepthContext = /*#__PURE__*/createContext(1);
+export const DrawerDepthContext = /*#__PURE__*/createContext(0);
 export const DrawerDepthProvider = t0 => {
   const $ = _c(3);
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","createContext","use","useCallback","useLayoutEffect","useState","useTranslation","Button","Gutter","baseClass","drawerZBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","children","className","disabled","onClick","rest","openModal","t1","e","handleClick","_jsx","type","Drawer","gutter","Header","headerActions","hoverTitle","title","undefined","t","closeModal","modalState","drawerDepth","useDrawerDepth","isOpen","animateIn","setAnimateIn","t2","t3","t4","t5","t6","filter","Boolean","t7","join","t8","t9","t10","DrawerDepthProvider","_jsxs","closeOnBlur","style","zIndex","id","width","left","right","buttonStyle","length","map","_temp","DrawerDepthContext","parentDepth","value","action","i","margin","size","label"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.css'\n\nconst baseClass = 'drawer'\n\nexport const drawerZBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') {\n        onClick(e)\n      }\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  children,\n  className,\n  gutter = true,\n  Header,\n  headerActions,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useDrawerDepth()\n\n  const isOpen = !!modalState[slug]?.isOpen\n\n  const [animateIn, setAnimateIn] = useState(isOpen)\n\n  useLayoutEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <DrawerDepthProvider>\n        <Modal\n          className={[\n            className,\n            baseClass,\n            animateIn && `${baseClass}--is-open`,\n            drawerDepth > 1 && `${baseClass}--nested`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          // Fixes https://github.com/payloadcms/payload/issues/13778\n          closeOnBlur={false}\n          slug={slug}\n          style={{\n            zIndex: drawerZBase + drawerDepth,\n          }}\n        >\n          {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n          <button\n            aria-label={t('general:close')}\n            className={`${baseClass}__close`}\n            id={`close-drawer__${slug}`}\n            onClick={() => closeModal(slug)}\n            type=\"button\"\n          />\n          <div\n            className={`${baseClass}__content`}\n            style={{\n              width: `calc(100% - (${drawerDepth} * var(--gutter-h)))`,\n            }}\n          >\n            <div className={`${baseClass}__blur-bg-content`} />\n            <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                    i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                  */}\n                  <Button\n                    aria-label={t('general:close')}\n                    buttonStyle=\"icon-label\"\n                    className={`${baseClass}__header__close`}\n                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                  >\n                    {/* TODO: add icon */}\n                    &lsaquo;\n                  </Button>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\n                  </h2>\n                  {headerActions && headerActions.length > 0 && (\n                    <div className={`${baseClass}__header__actions`}>\n                      {headerActions.map((action, i) => (\n                        <Button\n                          buttonStyle={action.style || 'secondary'}\n                          disabled={action.disabled}\n                          key={i}\n                          margin={false}\n                          onClick={action.onClick}\n                          size=\"medium\"\n                        >\n                          {action.label}\n                        </Button>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              )}\n              {children}\n            </Gutter>\n          </div>\n        </Modal>\n      </DrawerDepthProvider>\n    )\n  }\n\n  return null\n}\n\nexport const DrawerDepthContext = createContext(1)\n\nexport const DrawerDepthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const parentDepth = useDrawerDepth()\n  const depth = parentDepth + 1\n\n  return <DrawerDepthContext value={depth}>{children}</DrawerDepthContext>\n}\n\nexport const useDrawerDepth = (): number => use(DrawerDepthContext)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","createContext","use","useCallback","useLayoutEffect","useState","ChevronIcon","useTranslation","Button","baseClass","drawerZBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","buttonStyle","children","className","disabled","onClick","rest","openModal","t1","e","handleClick","_jsx","type","Drawer","props","DrawerDepthProvider","DrawerInner","Header","headerActions","hoverTitle","title","t","closeModal","modalState","drawerDepth","useDrawerDepth","isOpen","animateIn","setAnimateIn","t2","t3","t4","t5","filter","Boolean","t6","join","t7","undefined","t8","t9","t10","_jsxs","closeOnBlur","style","paddingRight","zIndex","id","icon","direction","size","length","map","_temp","DrawerDepthContext","parentDepth","value","action","i","margin","label"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'drawer'\n\nexport const drawerZBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  buttonStyle,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') {\n        onClick(e)\n      }\n    },\n    [openModal, slug, onClick],\n  )\n\n  if (buttonStyle) {\n    return (\n      <Button\n        buttonStyle={buttonStyle}\n        className={className}\n        disabled={disabled}\n        onClick={handleClick}\n        {...rest}\n      >\n        {children}\n      </Button>\n    )\n  }\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = (props) => (\n  <DrawerDepthProvider>\n    <DrawerInner {...props} />\n  </DrawerDepthProvider>\n)\n\nconst DrawerInner: React.FC<Props> = ({\n  slug,\n  children,\n  className,\n  Header,\n  headerActions,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useDrawerDepth()\n\n  const isOpen = !!modalState[slug]?.isOpen\n\n  const [animateIn, setAnimateIn] = useState(isOpen)\n\n  useLayoutEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        // Fixes https://github.com/payloadcms/payload/issues/13778\n        closeOnBlur={false}\n        slug={slug}\n        style={{\n          paddingRight: drawerDepth > 1 ? `calc(${drawerDepth - 1} * var(--spacer-3))` : undefined,\n          zIndex: drawerZBase + drawerDepth,\n        }}\n      >\n        {drawerDepth === 1 && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div className={`${baseClass}__content`}>\n          <div className={`${baseClass}__blur-bg-content`} />\n          <div className={`${baseClass}__content-children`}>\n            {Header}\n            {Header === undefined && (\n              <div className={`${baseClass}__header`}>\n                {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                  i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                */}\n                <Button\n                  aria-label={t('general:close')}\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__header__close`}\n                  icon={<ChevronIcon direction=\"left\" size={24} />}\n                  onClick={() => closeModal(slug)}\n                />\n                <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                  {title}\n                </h2>\n                {headerActions && headerActions.length > 0 && (\n                  <div className={`${baseClass}__header__actions`}>\n                    {headerActions.map((action, i) => (\n                      <Button\n                        buttonStyle={action.style || 'secondary'}\n                        disabled={action.disabled}\n                        key={i}\n                        margin={false}\n                        onClick={action.onClick}\n                        size=\"medium\"\n                      >\n                        {action.label}\n                      </Button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n\nexport const DrawerDepthContext = createContext(0)\n\nexport const DrawerDepthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const parentDepth = useDrawerDepth()\n  const depth = parentDepth + 1\n\n  return <DrawerDepthContext value={depth}>{children}</DrawerDepthContext>\n}\n\nexport const useDrawerDepth = (): number => use(DrawerDepthContext)\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Drawer/types.d.ts

@@ -3,12 +3,11 @@ export type DrawerHeaderAction = {
     readonly disabled?: boolean;
     readonly label: string;
     readonly onClick: () => void;
-    readonly style?: 'dashed' | 'destructive' | 'ghost' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'subtle' | 'tab';
+    readonly style?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary';
 };
 export type Props = {
     readonly children: React.ReactNode;
     readonly className?: string;
-    readonly gutter?: boolean;
     readonly Header?: React.ReactNode;
     readonly headerActions?: ReadonlyArray<DrawerHeaderAction>;
     readonly hoverTitle?: boolean;
@@ -16,9 +15,11 @@ export type Props = {
     readonly title?: string;
 };
 export type TogglerProps = {
+    buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary';
     children: React.ReactNode;
     className?: string;
     disabled?: boolean;
+    extraButtonProps?: Record<string, any>;
     slug: string;
 } & HTMLAttributes<HTMLButtonElement>;
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/Drawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EACX,QAAQ,GACR,aAAa,GACb,OAAO,GACP,YAAY,GACZ,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,GACX,QAAQ,GACR,KAAK,CAAA;CACV,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAA;IAC1D,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,CAAA;CACvF,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAA;IAC1D,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,CAAA;IACnF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA"}

package/dist/elements/Drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type DrawerHeaderAction = {\n  readonly disabled?: boolean\n  readonly label: string\n  readonly onClick: () => void\n  readonly style?:\n    | 'dashed'\n    | 'destructive'\n    | 'ghost'\n    | 'icon-label'\n    | 'none'\n    | 'pill'\n    | 'primary'\n    | 'secondary'\n    | 'subtle'\n    | 'tab'\n}\n\nexport type Props = {\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly gutter?: boolean\n  readonly Header?: React.ReactNode\n  readonly headerActions?: ReadonlyArray<DrawerHeaderAction>\n  readonly hoverTitle?: boolean\n  readonly slug: string\n  readonly title?: string\n}\n\nexport type TogglerProps = {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"mappings":"AA8BA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type DrawerHeaderAction = {\n  readonly disabled?: boolean\n  readonly label: string\n  readonly onClick: () => void\n  readonly style?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n}\n\nexport type Props = {\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly Header?: React.ReactNode\n  readonly headerActions?: ReadonlyArray<DrawerHeaderAction>\n  readonly hoverTitle?: boolean\n  readonly slug: string\n  readonly title?: string\n}\n\nexport type TogglerProps = {\n  buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  extraButtonProps?: Record<string, any>\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"mappings":"AAmBA","ignoreList":[]}

package/dist/elements/Drawer/useDrawerSlug.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerSlug.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/useDrawerSlug.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,SAAU,MAAM,KAAG,MAO5C,CAAA"}
+{"version":3,"file":"useDrawerSlug.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/useDrawerSlug.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,KAAG,MAO5C,CAAA"}

package/dist/elements/DrawerActionHeader/index.css

@@ -0,0 +1,24 @@
+@layer payload-default {
+  .drawer-action-header {
+    padding: var(--spacer-2-5);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .drawer-action-header__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .drawer-action-header__title {
+    margin: 0;
+    color: var(--color-text);
+  }
+
+  .drawer-action-header__actions {
+    display: flex;
+    margin-left: auto;
+    padding-left: var(--spacer-3);
+    gap: var(--spacer-2);
+  }
+}