@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.c2b57ce

package/dist/elements/TimezonePicker/index.css

@@ -0,0 +1,165 @@
+@layer payload-default {
+  .timezone-picker-wrapper {
+    display: flex;
+    gap: var(--spacer-1);
+    margin-top: var(--spacer-2);
+    align-items: center;
+    position: relative;
+
+    .timezone-picker__label {
+      color: var(--color-text-secondary);
+      flex-shrink: 0;
+      font-family: var(--text-body-medium-font-family);
+      font-size: var(--text-body-medium-font-size);
+      font-weight: var(--text-body-medium-font-weight);
+      line-height: var(--text-body-medium-line-height);
+      letter-spacing: var(--text-body-medium-letter-spacing);
+    }
+
+    .timezone-picker__required {
+      color: var(--color-text-danger);
+      margin-left: var(--spacer-1);
+    }
+
+    .timezone-picker.react-select {
+      display: inline-flex;
+      position: static;
+
+      .rs__menu {
+        overflow: hidden;
+        border-radius: var(--radius-large);
+        background: var(--color-bg-menu);
+        padding: var(--spacer-2);
+        min-width: 280px;
+        max-height: 280px;
+      }
+
+      .rs__menu-list {
+        max-height: calc(var(--spacer-6) * 5);
+        overflow-y: auto;
+      }
+
+      .rs__option {
+        padding: var(--spacer-1) var(--spacer-2);
+        border-radius: var(--radius-medium);
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .rs__option--is-focused,
+      .rs__option--is-selected {
+        /* Colors handled by inline styles via react-select styles prop */
+      }
+
+      .rs__value-container {
+        padding: 0;
+      }
+
+      .rs__control.rs__control {
+        display: inline-flex;
+        align-items: center;
+        background: none;
+        border: none;
+        padding: 0;
+        padding-left: var(--spacer-1);
+        min-height: auto !important;
+        position: relative;
+        box-shadow: unset;
+        border-radius: var(--radius-medium);
+        gap: 0;
+        flex-wrap: nowrap;
+
+        &:hover {
+          cursor: pointer;
+          box-shadow: unset;
+          background: var(--color-bg-secondary);
+        }
+
+        &:active {
+          background: var(--color-bg-secondary-pressed);
+        }
+
+        &.rs__control--is-focused {
+          box-shadow: 0 0 0 1px var(--accessibility-focus-color);
+        }
+
+        &.rs__control--menu-is-open::before {
+          display: block;
+        }
+      }
+
+      .rs__input-container {
+        margin: 0;
+        padding: 0;
+      }
+
+      .rs__input {
+        caret-color: transparent;
+      }
+
+      .rs__indicators {
+        position: static;
+        display: flex;
+        align-items: center;
+        min-height: auto;
+        margin-inline-start: 0;
+        gap: 0;
+        flex-shrink: 0;
+      }
+
+      .rs__single-value {
+        color: var(--color-text);
+        font-family: var(--text-body-medium-font-family);
+        font-size: var(--text-body-medium-font-size);
+        font-weight: var(--text-body-medium-font-weight);
+        line-height: var(--text-body-medium-line-height);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .rs__placeholder {
+        color: var(--color-text-secondary);
+        font-family: var(--text-body-medium-font-family);
+        font-size: var(--text-body-medium-font-size);
+        font-weight: var(--text-body-medium-font-weight);
+        line-height: var(--text-body-medium-line-height);
+      }
+
+      .timezone-picker__dropdown-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        background: none;
+        border: none;
+        cursor: pointer;
+        border-radius: var(--radius-medium);
+        color: var(--color-text-secondary);
+
+        &:focus-visible {
+          outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+          outline-offset: calc(-1 * var(--stroke-width-small));
+        }
+      }
+
+      .timezone-picker__clear-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-inline: calc(-1 * var(--stroke-width-small));
+        cursor: pointer;
+        margin-left: calc(var(--spacer-1) / 2);
+        height: var(--spacer-3);
+        overflow: visible;
+        border-radius: var(--radius-medium);
+
+        &:focus-visible {
+          outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+        }
+      }
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import type React from 'react';
 import type { Props } from './types.js';
-import './index.scss';
+import './index.css';
 export declare const TimezonePicker: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+C1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAOvC,OAAO,aAAa,CAAA;AAqDpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqE1C,CAAA"}

package/dist/elements/TimezonePicker/index.js

@@ -2,11 +2,59 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { FieldLabel } from '../../fields/FieldLabel/index.js';
-import './index.scss';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { CircledXIcon } from '../../icons/CircledX/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { ReactSelect } from '../ReactSelect/index.js';
 import { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js';
+import './index.css';
+const SmallDropdownIndicator = props => {
+  const {
+    innerProps: {
+      ref,
+      ...restInnerProps
+    }
+  } = props;
+  return /*#__PURE__*/_jsx("button", {
+    className: "timezone-picker__dropdown-indicator",
+    ref: ref,
+    ...restInnerProps,
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.key = ' ';
+      }
+    },
+    type: "button",
+    children: /*#__PURE__*/_jsx(ChevronIcon, {
+      size: 16
+    })
+  });
+};
+const SmallClearIndicator = props => {
+  const {
+    clearValue,
+    innerProps: {
+      ref,
+      ...restInnerProps
+    }
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    className: "timezone-picker__clear-indicator",
+    ref: typeof ref === 'string' ? null : ref,
+    ...restInnerProps,
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        clearValue();
+        e.stopPropagation();
+      }
+    },
+    role: "button",
+    tabIndex: 0,
+    children: /*#__PURE__*/_jsx(CircledXIcon, {
+      size: 24
+    })
+  });
+};
 export const TimezonePicker = props => {
   const {
     id,
@@ -29,13 +77,18 @@ export const TimezonePicker = props => {
   const readOnly = Boolean(readOnlyFromProps) || options.length === 1;
   return /*#__PURE__*/_jsxs("div", {
     className: "timezone-picker-wrapper",
-    children: [/*#__PURE__*/_jsx(FieldLabel, {
-      htmlFor: id,
-      label: `${t('general:timezone')} ${required ? '*' : ''}`,
-      required: required,
-      unstyled: true
+    children: [/*#__PURE__*/_jsxs("span", {
+      className: "timezone-picker__label",
+      children: [t('general:timezone'), required && /*#__PURE__*/_jsx("span", {
+        className: "timezone-picker__required",
+        children: "*"
+      })]
     }), /*#__PURE__*/_jsx(ReactSelect, {
       className: "timezone-picker",
+      components: {
+        ClearIndicator: SmallClearIndicator,
+        DropdownIndicator: SmallDropdownIndicator
+      },
       disabled: readOnly,
       inputId: id,
       isClearable: !required,
@@ -46,6 +99,18 @@ export const TimezonePicker = props => {
         }
       },
       options: options,
+      placeholder: t('general:none'),
+      styles: {
+        control: base => ({
+          ...base,
+          flexWrap: 'nowrap'
+        }),
+        option: (base_0, state) => ({
+          ...base_0,
+          backgroundColor: state.isFocused || state.isSelected ? 'var(--color-bg-selected-strong)' : 'transparent',
+          color: state.isFocused || state.isSelected ? 'var(--color-text-onselected-strong)' : 'var(--color-text-ontooltip)'
+        })
+      },
       value: selectedTimezone
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useMemo","FieldLabel","useTranslation","ReactSelect","formatOptions","TimezonePicker","props","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","_jsxs","className","_jsx","htmlFor","label","unstyled","disabled","inputId","isClearable","isCreatable","val"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\n\nimport { useMemo } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport './index.scss'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <FieldLabel\n        htmlFor={id}\n        label={`${t('general:timezone')} ${required ? '*' : ''}`}\n        required={required}\n        unstyled\n      />\n      <ReactSelect\n        className=\"timezone-picker\"\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAKA,SAASA,OAAO,QAAQ;AAIxB,SAASC,UAAU,QAAQ;AAC3B,OAAO;AACP,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAE9B,OAAO,MAAMC,cAAA,GAAmCC,KAAA;EAC9C,MAAM;IACJC,EAAE;IACFC,QAAA,EAAUC,iBAAiB;IAC3BC,OAAA,EAASC,gBAAgB;IACzBC,QAAA,EAAUC,iBAAiB;IAC3BC,QAAQ;IACRC,gBAAA,EAAkBC;EAAyB,CAC5C,GAAGV,KAAA;EAEJ,MAAM;IAAEW;EAAC,CAAE,GAAGf,cAAA;EAEd,MAAMQ,OAAA,GAAUN,aAAA,CAAcO,gBAAA;EAE9B,MAAMI,gBAAA,GAAmBf,OAAA,CAAQ;IAC/B,OAAOU,OAAA,CAAQQ,IAAI,CAAED,GAAA;MACnB,MAAME,KAAA,GAAQ,OAAOF,GAAA,KAAM,WAAWA,GAAA,GAAIA,GAAA,CAAEE,KAAK;MACjD,OAAOA,KAAA,KAAUH,yBAAA;IACnB;EACF,GAAG,CAACN,OAAA,EAASM,yBAAA,CAA0B;EAEvC,MAAMJ,QAAA,GAAWQ,OAAA,CAAQP,iBAAA,KAAsBH,OAAA,CAAQW,MAAM,KAAK;EAElE,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAU;4BACbC,IAAA,CAACvB,UAAA;MACCwB,OAAA,EAASlB,EAAA;MACTmB,KAAA,EAAO,GAAGT,CAAA,CAAE,uBAAuBH,QAAA,GAAW,MAAM,IAAI;MACxDA,QAAA,EAAUA,QAAA;MACVa,QAAQ;qBAEVH,IAAA,CAACrB,WAAA;MACCoB,SAAA,EAAU;MACVK,QAAA,EAAUhB,QAAA;MACViB,OAAA,EAAStB,EAAA;MACTuB,WAAA,EAAa,CAAChB,QAAA;MACdiB,WAAA,EAAa;MACbvB,QAAA,EAAWwB,GAAA;QACT,IAAIvB,iBAAA,EAAmB;UACrBA,iBAAA,CAAkBuB,GAAA,EAAKb,KAAA,IAAS;QAClC;MACF;MACAT,OAAA,EAASA,OAAA;MACTS,KAAA,EAAOJ;;;AAIf","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useMemo","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","ref","restInnerProps","_jsx","className","onKeyDown","e","key","type","size","SmallClearIndicator","clearValue","stopPropagation","role","tabIndex","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","_jsxs","components","ClearIndicator","DropdownIndicator","disabled","inputId","isClearable","isCreatable","val","placeholder","styles","control","base","flexWrap","option","state","backgroundColor","isFocused","isSelected","color"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport type { ClearIndicatorProps, DropdownIndicatorProps, StylesConfig } from 'react-select'\n\nimport { useMemo } from 'react'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CircledXIcon } from '../../icons/CircledX/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\nimport './index.css'\n\nconst SmallDropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <button\n      className=\"timezone-picker__dropdown-indicator\"\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon size={16} />\n    </button>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    clearValue,\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <div\n      className=\"timezone-picker__clear-indicator\"\n      ref={typeof ref === 'string' ? null : ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          clearValue()\n          e.stopPropagation()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <CircledXIcon size={24} />\n    </div>\n  )\n}\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <span className=\"timezone-picker__label\">\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </span>\n      <ReactSelect\n        className=\"timezone-picker\"\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n        }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={\n          {\n            control: (base) => ({\n              ...base,\n              flexWrap: 'nowrap',\n            }),\n            option: (base, state) => ({\n              ...base,\n              backgroundColor:\n                state.isFocused || state.isSelected\n                  ? 'var(--color-bg-selected-strong)'\n                  : 'transparent',\n              color:\n                state.isFocused || state.isSelected\n                  ? 'var(--color-text-onselected-strong)'\n                  : 'var(--color-text-ontooltip)',\n            }),\n          } as StylesConfig<OptionType>\n        }\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Tooltip/index.css

@@ -0,0 +1,146 @@
+@layer payload-default {
+  .tooltip {
+    --caret-width: 15px;
+    --caret-height: 7px;
+    --caret-offset: 4px;
+    --caret-border-color: var(--color-border);
+    --tooltip-x: -50%;
+
+    opacity: 0;
+    background-color: var(--color-bg-tooltip);
+    position: absolute;
+    z-index: 3;
+    left: 50%;
+    padding: var(--spacer-1);
+    color: var(--color-text-ontooltip);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-letter-spacing);
+    white-space: nowrap;
+    border-radius: var(--radius-medium);
+    box-shadow: var(--elevation-300-tooltip);
+    visibility: hidden;
+
+    &.field-error {
+      background-color: var(--color-bg-danger);
+      color: var(--color-text-ondanger);
+
+      .tooltip__caret-fill {
+        fill: var(--color-bg-danger);
+        stroke: var(--color-bg-danger);
+      }
+
+      .tooltip__caret-stroke {
+        stroke: var(--color-bg-danger);
+      }
+    }
+
+    .tooltip-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+
+  .tooltip__caret {
+    position: absolute;
+    pointer-events: none;
+    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.15));
+  }
+
+  .tooltip__caret-fill {
+    fill: var(--color-bg-tooltip);
+    stroke: var(--color-bg-tooltip);
+  }
+
+  .tooltip__caret-stroke {
+    fill: none;
+    stroke: var(--color-border);
+    stroke-width: 1.5px;
+  }
+
+  .tooltip--show {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+    cursor: default;
+  }
+
+  .tooltip--caret-center .tooltip__caret {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .tooltip--caret-left .tooltip__caret {
+    left: var(--spacer-2);
+  }
+
+  .tooltip--caret-right .tooltip__caret {
+    right: var(--spacer-2);
+  }
+
+  .tooltip--position-top {
+    top: 0;
+    transform: translate3d(var(--tooltip-x), calc(-100% - var(--caret-height) - var(--caret-offset) + 1px), 0);
+
+    .tooltip__caret {
+      --color-border: var(--ramp-grey-700);
+      top: calc(100% - 0.5px);
+    }
+
+    &.tooltip--caret-center .tooltip__caret {
+      transform: translateX(-50%);
+    }
+  }
+
+  .tooltip--position-bottom {
+    top: 100%;
+    transform: translate3d(-50%, calc(var(--caret-height) + var(--caret-offset) - 1px), 0);
+
+    .tooltip__caret {
+      bottom: calc(100% - 0.5px);
+      transform: rotate(180deg);
+    }
+
+    &.tooltip--caret-center .tooltip__caret {
+      transform: translateX(-50%) rotate(180deg);
+    }
+
+    &.tooltip--caret-right .tooltip__caret {
+      transform: rotate(180deg);
+    }
+  }
+
+  .tooltip--position-left {
+    top: 50%;
+    left: 0;
+    transform: translate3d(calc(-100% - var(--caret-height) - var(--caret-offset)), -50%, 0);
+
+    .tooltip__caret {
+      top: calc(50% + 0.5px);
+      left: calc(100% - 0.5px);
+      transform: translateY(calc(1 * var(--caret-width) / 2)) rotate(-90deg);
+      transform-origin: top left;
+    }
+  }
+
+  .tooltip--position-right {
+    top: 50%;
+    left: 100%;
+    transform: translate3d(calc(var(--caret-height) + var(--caret-offset)), -50%, 0);
+
+    .tooltip__caret {
+      top: calc(50% + 0.5px);
+      left: unset;
+      right: calc(100% - 0.5px);
+      transform: translateY(calc(1 * var(--caret-width) / 2)) rotate(90deg);
+      transform-origin: top right;
+    }
+  }
+}

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type Props = {
     alignCaret?: 'center' | 'left' | 'right';
     boundingRef?: React.RefObject<HTMLElement | null>;
     children: React.ReactNode;
     className?: string;
     delay?: number;
-    position?: 'bottom' | 'top';
+    position?: 'bottom' | 'left' | 'right' | 'top';
     show?: boolean;
     /**
      * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmFnC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAsBD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkFnC,CAAA"}

package/dist/elements/Tooltip/index.js

@@ -1,23 +1,58 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useIntersect } from '../../hooks/useIntersect.js';
-import './index.scss';
+import './index.css';
+const TooltipCaret = () => {
+  const $ = _c(2);
+  const clipId = React.useId();
+  let t0;
+  if ($[0] !== clipId) {
+    t0 = _jsxs("svg", {
+      "aria-hidden": "true",
+      className: "tooltip__caret",
+      height: "14",
+      viewBox: "0 0 14 14",
+      width: "15",
+      children: [_jsx("clipPath", {
+        id: clipId,
+        children: _jsx("rect", {
+          height: "14",
+          width: "15",
+          x: "-0.5",
+          y: "0.5"
+        })
+      }), _jsx("path", {
+        className: "tooltip__caret-stroke",
+        clipPath: `url(#${clipId})`,
+        d: "M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z"
+      }), _jsx("path", {
+        className: "tooltip__caret-fill",
+        d: "M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z"
+      })]
+    });
+    $[0] = clipId;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
 export const Tooltip = props => {
   const {
     alignCaret = 'center',
     boundingRef,
     children,
     className,
-    delay = 350,
+    delay = 500,
     position: positionFromProps,
     show: showFromProps = true,
     staticPositioning = false
   } = props;
   const [show, setShow] = React.useState(showFromProps);
   const [position, setPosition] = React.useState('top');
-  const getTitleAttribute = content => typeof content === 'string' ? content : '';
   const [ref, intersectionEntry] = useIntersect({
     root: boundingRef?.current || null,
     rootMargin: '-145px 0px 0px 100px',
@@ -47,24 +82,23 @@ export const Tooltip = props => {
   }, [intersectionEntry, staticPositioning]);
   // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!staticPositioning && /*#__PURE__*/_jsx("aside", {
+    children: [!staticPositioning && /*#__PURE__*/_jsxs("aside", {
       "aria-hidden": "true",
       className: ['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top'].filter(Boolean).join(' '),
       ref: ref,
       style: {
         opacity: '0'
       },
-      children: /*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(TooltipCaret, {}), /*#__PURE__*/_jsx("div", {
         className: "tooltip-content",
         children: children
-      })
-    }), /*#__PURE__*/_jsx("aside", {
+      })]
+    }), /*#__PURE__*/_jsxs("aside", {
       className: ['tooltip', className, show && 'tooltip--show', `tooltip--caret-${alignCaret}`, `tooltip--position-${positionFromProps || position}`].filter(Boolean).join(' '),
-      title: getTitleAttribute(children),
-      children: /*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(TooltipCaret, {}), /*#__PURE__*/_jsx("div", {
         className: "tooltip-content",
         children: children
-      })
+      })]
     })]
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useIntersect","Tooltip","props","alignCaret","boundingRef","children","className","delay","position","positionFromProps","show","showFromProps","staticPositioning","setShow","useState","setPosition","getTitleAttribute","content","ref","intersectionEntry","root","current","rootMargin","threshold","timerID","setTimeout","clearTimeout","isIntersecting","_jsxs","Fragment","_jsx","filter","Boolean","join","style","opacity","title"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  position?: 'bottom' | 'top'\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 350,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'top'>('top')\n\n  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')\n\n  const [ref, intersectionEntry] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) {\n      return\n    }\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${positionFromProps || position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAgBP,OAAO,MAAMC,OAAA,GAA4BC,KAAA;EACvC,MAAM;IACJC,UAAA,GAAa,QAAQ;IACrBC,WAAW;IACXC,QAAQ;IACRC,SAAS;IACTC,KAAA,GAAQ,GAAG;IACXC,QAAA,EAAUC,iBAAiB;IAC3BC,IAAA,EAAMC,aAAA,GAAgB,IAAI;IAC1BC,iBAAA,GAAoB;EAAK,CAC1B,GAAGV,KAAA;EAEJ,MAAM,CAACQ,IAAA,EAAMG,OAAA,CAAQ,GAAGf,KAAA,CAAMgB,QAAQ,CAACH,aAAA;EACvC,MAAM,CAACH,QAAA,EAAUO,WAAA,CAAY,GAAGjB,KAAA,CAAMgB,QAAQ,CAAmB;EAEjE,MAAME,iBAAA,GAAqBC,OAAA,IAAa,OAAOA,OAAA,KAAY,WAAWA,OAAA,GAAU;EAEhF,MAAM,CAACC,GAAA,EAAKC,iBAAA,CAAkB,GAAGnB,YAAA,CAC/B;IACEoB,IAAA,EAAMhB,WAAA,EAAaiB,OAAA,IAAW;IAC9BC,UAAA,EAAY;IACZC,SAAA,EAAW;EACb,GACAX,iBAAA;EAGFb,SAAA,CAAU;IACR,IAAIyB,OAAA;IAEJ;IACA,IAAIjB,KAAA,IAASI,aAAA,EAAe;MAC1Ba,OAAA,GAAUC,UAAA,CAAW;QACnBZ,OAAA,CAAQF,aAAA;MACV,GAAGJ,KAAA;IACL,OAAO;MACLM,OAAA,CAAQF,aAAA;IACV;IAEA,OAAO;MACL,IAAIa,OAAA,EAAS;QACXE,YAAA,CAAaF,OAAA;MACf;IACF;EACF,GAAG,CAACb,aAAA,EAAeJ,KAAA,CAAM;EAEzBR,SAAA,CAAU;IACR,IAAIa,iBAAA,EAAmB;MACrB;IACF;IACAG,WAAA,CAAYI,iBAAA,EAAmBQ,cAAA,GAAiB,QAAQ;EAC1D,GAAG,CAACR,iBAAA,EAAmBP,iBAAA,CAAkB;EAEzC;EACA,oBACEgB,KAAA,CAAC9B,KAAA,CAAM+B,QAAQ;eACZ,CAACjB,iBAAA,iBACAkB,IAAA,CAAC;MACC,eAAY;MACZxB,SAAA,EAAW,CAAC,WAAWA,SAAA,EAAW,kBAAkBH,UAAA,EAAY,EAAE,wBAAwB,CACvF4B,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;MACRf,GAAA,EAAKA,GAAA;MACLgB,KAAA,EAAO;QAAEC,OAAA,EAAS;MAAI;gBAEtB,aAAAL,IAAA,CAAC;QAAIxB,SAAA,EAAU;kBAAmBD;;qBAGtCyB,IAAA,CAAC;MACCxB,SAAA,EAAW,CACT,WACAA,SAAA,EACAI,IAAA,IAAQ,iBACR,kBAAkBP,UAAA,EAAY,EAC9B,qBAAqBM,iBAAA,IAAqBD,QAAA,EAAU,CACrD,CACEuB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;MACRG,KAAA,EAAOpB,iBAAA,CAAkBX,QAAA;gBAEzB,aAAAyB,IAAA,CAAC;QAAIxB,SAAA,EAAU;kBAAmBD;;;;AAI1C","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useIntersect","TooltipCaret","$","clipId","useId","t0","_jsxs","className","height","viewBox","width","children","_jsx","id","x","y","clipPath","d","Tooltip","props","alignCaret","boundingRef","delay","position","positionFromProps","show","showFromProps","staticPositioning","setShow","useState","setPosition","ref","intersectionEntry","root","current","rootMargin","threshold","timerID","setTimeout","clearTimeout","isIntersecting","Fragment","filter","Boolean","join","style","opacity"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.css'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  position?: 'bottom' | 'left' | 'right' | 'top'\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nconst TooltipCaret: React.FC = () => {\n  const clipId = React.useId()\n\n  return (\n    <svg aria-hidden=\"true\" className=\"tooltip__caret\" height=\"14\" viewBox=\"0 0 14 14\" width=\"15\">\n      <clipPath id={clipId}>\n        <rect height=\"14\" width=\"15\" x=\"-0.5\" y=\"0.5\" />\n      </clipPath>\n      {/* Border stroke - clipped to hide top edge */}\n      <path\n        className=\"tooltip__caret-stroke\"\n        clipPath={`url(#${clipId})`}\n        d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\"\n      />\n      {/* Fill path */}\n      <path className=\"tooltip__caret-fill\" d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\" />\n    </svg>\n  )\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 500,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'left' | 'right' | 'top'>('top')\n\n  const [ref, intersectionEntry] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) {\n      return\n    }\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <TooltipCaret />\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${positionFromProps || position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <TooltipCaret />\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAgBP,MAAMC,YAAA,GAAyBA,CAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAC7B,MAAAM,MAAA,GAAeL,KAAA,CAAAM,KAAA,CAAW;EAAA,IAAAC,EAAA;EAAA,IAAAH,CAAA,QAAAC,MAAA;IAGxBE,EAAA,GAAAC,KAAA,CAAC;MAAA,eAAgB;MAAAC,SAAA,EAAiB;MAAAC,MAAA,EAAwB;MAAAC,OAAA,EAAa;MAAAC,KAAA,EAAkB;MAAAC,QAAA,GACvFC,IAAA,CAAC;QAAAC,EAAA,EAAaV,MAAA;QAAAQ,QAAA,EACZC,IAAA,CAAC;UAAAJ,MAAA,EAAY;UAAAE,KAAA,EAAW;UAAAI,CAAA,EAAO;UAAAC,CAAA,EAAS;QAAA,C;UAG1CH,IAAA,CAAC;QAAAL,SAAA,EACW;QAAAS,QAAA,EACA,QAAQb,MAAA,GAAS;QAAAc,CAAA,EACzB;MAAA,C,GAGJL,IAAA,CAAC;QAAAL,SAAA,EAAe;QAAAU,CAAA,EAAwB;MAAA,C;;;;;;;SAX1CZ,E;CAcJ;AAEA,OAAO,MAAMa,OAAA,GAA4BC,KAAA;EACvC,MAAM;IACJC,UAAA,GAAa,QAAQ;IACrBC,WAAW;IACXV,QAAQ;IACRJ,SAAS;IACTe,KAAA,GAAQ,GAAG;IACXC,QAAA,EAAUC,iBAAiB;IAC3BC,IAAA,EAAMC,aAAA,GAAgB,IAAI;IAC1BC,iBAAA,GAAoB;EAAK,CAC1B,GAAGR,KAAA;EAEJ,MAAM,CAACM,IAAA,EAAMG,OAAA,CAAQ,GAAG9B,KAAA,CAAM+B,QAAQ,CAACH,aAAA;EACvC,MAAM,CAACH,QAAA,EAAUO,WAAA,CAAY,GAAGhC,KAAA,CAAM+B,QAAQ,CAAsC;EAEpF,MAAM,CAACE,GAAA,EAAKC,iBAAA,CAAkB,GAAGhC,YAAA,CAC/B;IACEiC,IAAA,EAAMZ,WAAA,EAAaa,OAAA,IAAW;IAC9BC,UAAA,EAAY;IACZC,SAAA,EAAW;EACb,GACAT,iBAAA;EAGF5B,SAAA,CAAU;IACR,IAAIsC,OAAA;IAEJ;IACA,IAAIf,KAAA,IAASI,aAAA,EAAe;MAC1BW,OAAA,GAAUC,UAAA,CAAW;QACnBV,OAAA,CAAQF,aAAA;MACV,GAAGJ,KAAA;IACL,OAAO;MACLM,OAAA,CAAQF,aAAA;IACV;IAEA,OAAO;MACL,IAAIW,OAAA,EAAS;QACXE,YAAA,CAAaF,OAAA;MACf;IACF;EACF,GAAG,CAACX,aAAA,EAAeJ,KAAA,CAAM;EAEzBvB,SAAA,CAAU;IACR,IAAI4B,iBAAA,EAAmB;MACrB;IACF;IACAG,WAAA,CAAYE,iBAAA,EAAmBQ,cAAA,GAAiB,QAAQ;EAC1D,GAAG,CAACR,iBAAA,EAAmBL,iBAAA,CAAkB;EAEzC;EACA,oBACErB,KAAA,CAACR,KAAA,CAAM2C,QAAQ;eACZ,CAACd,iBAAA,iBACArB,KAAA,CAAC;MACC,eAAY;MACZC,SAAA,EAAW,CAAC,WAAWA,SAAA,EAAW,kBAAkBa,UAAA,EAAY,EAAE,wBAAwB,CACvFsB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;MACRb,GAAA,EAAKA,GAAA;MACLc,KAAA,EAAO;QAAEC,OAAA,EAAS;MAAI;8BAEtBlC,IAAA,CAACX,YAAA,O,aACDW,IAAA,CAAC;QAAIL,SAAA,EAAU;kBAAmBI;;qBAGtCL,KAAA,CAAC;MACCC,SAAA,EAAW,CACT,WACAA,SAAA,EACAkB,IAAA,IAAQ,iBACR,kBAAkBL,UAAA,EAAY,EAC9B,qBAAqBI,iBAAA,IAAqBD,QAAA,EAAU,CACrD,CACEmB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;8BAERhC,IAAA,CAACX,YAAA,O,aACDW,IAAA,CAAC;QAAIL,SAAA,EAAU;kBAAmBI;;;;AAI1C","ignoreList":[]}

package/dist/elements/TrashBanner/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .trash-banner {
+    margin-bottom: var(--spacer-3);
+  }
+}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TrashBanner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAiB/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TrashBanner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAe/B,CAAA"}

package/dist/elements/TrashBanner/index.js

@@ -1,13 +1,14 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { TrashIcon } from '../../icons/Trash/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import './index.scss';
+import { Banner } from '../Banner/index.js';
+import './index.css';
 const baseClass = 'trash-banner';
 export const TrashBanner = () => {
   const {
@@ -25,13 +26,13 @@ export const TrashBanner = () => {
   const {
     i18n
   } = useTranslation();
-  return _jsxs("div", {
+  return _jsx(Banner, {
     className: baseClass,
-    children: [_jsx(TrashIcon, {}), _jsx("p", {
-      children: i18n.t("general:documentIsTrashed", {
-        label: `${getTranslation(labels?.singular, i18n)}`
-      })
-    })]
+    icon: _jsx(TrashIcon, {}),
+    type: "warning",
+    children: i18n.t("general:documentIsTrashed", {
+      label: `${getTranslation(labels?.singular, i18n)}`
+    })
   });
 };
 //# sourceMappingURL=index.js.map