@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.c2b57ce

package/dist/elements/Pagination/Separator/index.js

@@ -1,9 +0,0 @@
-'use client';
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-export const Separator = () => /*#__PURE__*/_jsx("span", {
-  className: "paginator__separator",
-  children: "—"
-});
-//# sourceMappingURL=index.js.map

package/dist/elements/Pagination/Separator/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["React","Separator","_jsx","className"],"sources":["../../../../src/elements/Pagination/Separator/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nexport const Separator: React.FC = () => <span className=\"paginator__separator\">&mdash;</span>\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO,MAAMC,SAAA,GAAsBA,CAAA,kBAAMC,IAAA,CAAC;EAAKC,SAAA,EAAU;YAAuB","ignoreList":[]}

package/dist/elements/Pagination/index.scss

@@ -1,52 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .paginator {
-    display: flex;
-
-    &__page {
-      cursor: pointer;
-
-      &--is-current {
-        background: var(--theme-elevation-100);
-        color: var(--theme-elevation-400);
-        cursor: default;
-      }
-
-      &--is-last-page {
-        margin-right: 0;
-      }
-    }
-
-    .clickable-arrow--right {
-      margin-right: base(0.25);
-    }
-
-    &__page {
-      width: base(1.5);
-      height: base(1.5);
-      display: flex;
-      justify-content: center;
-      align-content: center;
-      outline: 0;
-      border-radius: var(--style-radius-s);
-      padding: base(0.5);
-      color: var(--theme-elevation-800);
-      line-height: 0.9;
-
-      &:focus-visible {
-        outline: var(--accessibility-outline);
-      }
-    }
-
-    &__page,
-    &__separator {
-      margin-right: base(0.25);
-    }
-
-    &__separator {
-      align-self: center;
-      color: var(--theme-elevation-400);
-    }
-  }
-}

package/dist/elements/PerPage/index.scss

@@ -1,43 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .per-page {
-    ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: calc(var(--base) / 4);
-    }
-
-    &__base-button {
-      display: flex;
-      align-items: center;
-      font-weight: bold;
-    }
-
-    &__button {
-      cursor: pointer;
-      text-align: left;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      color: var(--theme-elevation-500);
-
-      &:hover,
-      &:focus-visible {
-        text-decoration: underline;
-      }
-
-      svg .stroke {
-        stroke: currentColor;
-      }
-    }
-
-    &__button-active {
-      font-weight: bold;
-      color: var(--theme-text);
-    }
-  }
-}

package/dist/elements/PillSelector/index.scss

@@ -1,47 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .pill-selector {
-    display: flex;
-    flex-wrap: wrap;
-    background: var(--theme-elevation-50);
-    padding: var(--base);
-    gap: calc(var(--base) / 2);
-
-    &__pill {
-      background-color: transparent;
-      box-shadow: 0 0 0 1px var(--theme-elevation-150);
-
-      &.pill-selector__pill {
-        cursor: pointer;
-
-        &:hover {
-          background-color: var(--theme-elevation-100);
-        }
-      }
-
-      &.pill-selector__pill--selected {
-        background-color: var(--theme-elevation-0);
-        box-shadow:
-          0 0px 1px 1px var(--theme-elevation-150),
-          0 2px 4px -2px rgba(0, 0, 0, 0.1);
-
-        &:hover {
-          background-color: var(--theme-elevation-0);
-          box-shadow:
-            0 0px 1px 1px var(--theme-elevation-250),
-            0 3px 4px -1px rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-
-    // TODO: delete this once all icons have been migrated to viewbox edge-to-edge
-    .pill__icon {
-      padding: 0;
-    }
-
-    @include small-break {
-      padding: calc(var(--base) / 2);
-    }
-  }
-}

package/dist/elements/Popup/PopupDivider/index.scss

@@ -1,11 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .popup-divider {
-    width: 100%;
-    height: 1px;
-    background-color: var(--theme-elevation-150);
-    border: none;
-    margin: calc(var(--base) * 0.75) 0;
-  }
-}

package/dist/elements/Popup/PopupGroupLabel/index.scss

@@ -1,11 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .popup-list-group-label {
-    color: var(--theme-elevation-500);
-    font-weight: 500;
-    line-height: 1;
-    margin-top: calc(var(--base) * 0.25);
-    margin-bottom: calc(var(--base) * 0.5);
-  }
-}

package/dist/elements/PreviewButton/index.scss

@@ -1,39 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .preview-btn {
-    background: none;
-    border: none;
-    border: 1px solid;
-    border-color: var(--theme-elevation-100);
-    border-radius: var(--style-radius-s);
-    line-height: var(--btn-line-height);
-    font-size: var(--base-body-size);
-    padding: calc(var(--base) * 0.2) calc(var(--base) * 0.4);
-    cursor: pointer;
-    transition-property: border, color, background;
-    transition-duration: 100ms;
-    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-    height: calc(var(--base) * 1.6);
-    width: calc(var(--base) * 1.6);
-    position: relative;
-
-    .icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      .stroke {
-        transition-property: stroke;
-        transition-duration: 100ms;
-        transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-      }
-    }
-
-    &:hover {
-      border-color: var(--theme-elevation-300);
-      background-color: var(--theme-elevation-100);
-    }
-  }
-}

package/dist/elements/PublishButton/ScheduleDrawer/index.scss

@@ -1,52 +0,0 @@
-@layer payload-default {
-  .schedule-publish {
-    &__drawer-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: calc(var(--base) * 2.5) var(--gutter-h);
-      height: 48px;
-      border-bottom: 1px solid var(--theme-border-color);
-
-      h2 {
-        margin: 0;
-      }
-    }
-
-    &__scheduler {
-      padding-top: calc(var(--base) * 2);
-      padding-bottom: calc(var(--base) * 2);
-      border-bottom: 1px solid var(--theme-border-color);
-    }
-
-    &__type {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-
-      li {
-        margin-right: calc(var(--base) * 2);
-      }
-    }
-
-    &__actions {
-      button {
-        margin-right: var(--base);
-      }
-    }
-
-    &__upcoming {
-      padding-top: calc(var(--base) * 2);
-      padding-bottom: calc(var(--base) * 2);
-
-      h4 {
-        margin-bottom: var(--base);
-      }
-    }
-
-    &__delete {
-      margin: 0;
-    }
-  }
-}

package/dist/elements/QueryPresets/QueryPresetBar/index.scss

@@ -1,41 +0,0 @@
-@import '../../../scss/styles';
-
-@layer payload-default {
-  .query-preset-bar {
-    display: flex;
-    gap: base(0.5);
-    justify-content: space-between;
-    background-color: var(--theme-elevation-50);
-    border-radius: var(--style-radius-m);
-    padding: base(0.5);
-
-    &__menu {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      flex-grow: 1;
-    }
-
-    &__create-new-preset {
-      height: 100%;
-      padding: 0 3px;
-      background: transparent;
-      box-shadow: inset 0 0 0 1px var(--theme-elevation-150);
-
-      &:hover {
-        background: transparent;
-      }
-    }
-
-    &__menu-items {
-      overflow: auto;
-      display: flex;
-      gap: base(0.5);
-
-      button {
-        color: var(--theme-elevation-500);
-        margin: 0;
-      }
-    }
-  }
-}

package/dist/elements/QueryPresets/QueryPresetToggler/index.d.ts

@@ -1,8 +0,0 @@
-import type { QueryPreset } from 'payload';
-import './index.scss';
-export declare function QueryPresetToggler({ activePreset, openPresetListDrawer, resetPreset, }: {
-    activePreset: QueryPreset;
-    openPresetListDrawer: () => void;
-    resetPreset: () => Promise<void>;
-}): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/elements/QueryPresets/QueryPresetToggler/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/QueryPresets/QueryPresetToggler/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAS1C,OAAO,cAAc,CAAA;AAIrB,wBAAgB,kBAAkB,CAAC,EACjC,YAAY,EACZ,oBAAoB,EACpB,WAAW,GACZ,EAAE;IACD,YAAY,EAAE,WAAW,CAAA;IACzB,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CACjC,+BAmDA"}

package/dist/elements/QueryPresets/QueryPresetToggler/index.js

@@ -1,100 +0,0 @@
-'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getTranslation } from '@payloadcms/translations';
-import { PeopleIcon } from '../../../icons/People/index.js';
-import { XIcon } from '../../../icons/X/index.js';
-import { useConfig } from '../../../providers/Config/index.js';
-import { useTranslation } from '../../../providers/Translation/index.js';
-import { Pill } from '../../Pill/index.js';
-import './index.scss';
-const baseClass = 'active-query-preset';
-export function QueryPresetToggler(t0) {
-  const $ = _c(11);
-  const {
-    activePreset,
-    openPresetListDrawer,
-    resetPreset
-  } = t0;
-  const {
-    i18n,
-    t
-  } = useTranslation();
-  const {
-    getEntityConfig
-  } = useConfig();
-  let t1;
-  if ($[0] !== activePreset || $[1] !== getEntityConfig || $[2] !== i18n || $[3] !== openPresetListDrawer || $[4] !== resetPreset || $[5] !== t) {
-    const presetsConfig = getEntityConfig({
-      collectionSlug: "payload-query-presets"
-    });
-    const t2 = activePreset && `${baseClass}--active`;
-    let t3;
-    if ($[7] !== t2) {
-      t3 = [baseClass, t2].filter(Boolean);
-      $[7] = t2;
-      $[8] = t3;
-    } else {
-      t3 = $[8];
-    }
-    let t4;
-    if ($[9] !== openPresetListDrawer) {
-      t4 = () => {
-        openPresetListDrawer();
-      };
-      $[9] = openPresetListDrawer;
-      $[10] = t4;
-    } else {
-      t4 = $[10];
-    }
-    t1 = _jsx(Pill, {
-      className: t3.join(" "),
-      id: "select-preset",
-      onClick: t4,
-      pillStyle: "light",
-      size: "small",
-      children: _jsxs("div", {
-        className: `${baseClass}__label`,
-        children: [activePreset?.isShared && _jsx(PeopleIcon, {
-          className: `${baseClass}__shared`
-        }), _jsx("div", {
-          className: `${baseClass}__label-text-max-width`,
-          children: _jsx("div", {
-            className: `${baseClass}__label-text`,
-            children: activePreset?.title || t("general:selectLabel", {
-              label: getTranslation(presetsConfig.labels.singular, i18n)
-            })
-          })
-        }), activePreset ? _jsx("div", {
-          className: `${baseClass}__clear`,
-          id: "clear-preset",
-          onClick: async e => {
-            e.stopPropagation();
-            await resetPreset();
-          },
-          onKeyDown: async e_0 => {
-            if (e_0.key === "Enter" || e_0.key === " ") {
-              e_0.stopPropagation();
-              await resetPreset();
-            }
-          },
-          role: "button",
-          tabIndex: 0,
-          children: _jsx(XIcon, {})
-        }) : null]
-      })
-    });
-    $[0] = activePreset;
-    $[1] = getEntityConfig;
-    $[2] = i18n;
-    $[3] = openPresetListDrawer;
-    $[4] = resetPreset;
-    $[5] = t;
-    $[6] = t1;
-  } else {
-    t1 = $[6];
-  }
-  return t1;
-}
-//# sourceMappingURL=index.js.map

package/dist/elements/QueryPresets/QueryPresetToggler/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","PeopleIcon","XIcon","useConfig","useTranslation","Pill","baseClass","QueryPresetToggler","t0","$","activePreset","openPresetListDrawer","resetPreset","i18n","t","getEntityConfig","t1","presetsConfig","collectionSlug","t2","t3","filter","Boolean","t4","_jsx","className","join","id","onClick","pillStyle","size","children","_jsxs","isShared","title","label","labels","singular","e","stopPropagation","onKeyDown","e_0","key","role","tabIndex"],"sources":["../../../../src/elements/QueryPresets/QueryPresetToggler/index.tsx"],"sourcesContent":["'use client'\nimport type { QueryPreset } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport { PeopleIcon } from '../../../icons/People/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'active-query-preset'\n\nexport function QueryPresetToggler({\n  activePreset,\n  openPresetListDrawer,\n  resetPreset,\n}: {\n  activePreset: QueryPreset\n  openPresetListDrawer: () => void\n  resetPreset: () => Promise<void>\n}) {\n  const { i18n, t } = useTranslation()\n  const { getEntityConfig } = useConfig()\n\n  const presetsConfig = getEntityConfig({\n    collectionSlug: 'payload-query-presets',\n  })\n\n  return (\n    <Pill\n      className={[baseClass, activePreset && `${baseClass}--active`].filter(Boolean).join(' ')}\n      id=\"select-preset\"\n      onClick={() => {\n        openPresetListDrawer()\n      }}\n      pillStyle=\"light\"\n      size=\"small\"\n    >\n      <div className={`${baseClass}__label`}>\n        {activePreset?.isShared && <PeopleIcon className={`${baseClass}__shared`} />}\n        <div className={`${baseClass}__label-text-max-width`}>\n          <div className={`${baseClass}__label-text`}>\n            {activePreset?.title ||\n              t('general:selectLabel', {\n                label: getTranslation(presetsConfig.labels.singular, i18n),\n              })}\n          </div>\n        </div>\n        {activePreset ? (\n          <div\n            className={`${baseClass}__clear`}\n            id=\"clear-preset\"\n            onClick={async (e) => {\n              e.stopPropagation()\n              await resetPreset()\n            }}\n            onKeyDown={async (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.stopPropagation()\n                await resetPreset()\n              }\n            }}\n            role=\"button\"\n            tabIndex={0}\n          >\n            <XIcon />\n          </div>\n        ) : null}\n      </div>\n    </Pill>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAE/B,SAASC,UAAU,QAAQ;AAC3B,SAASC,KAAK,QAAQ;AACtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,SAAAC,mBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAA4B;IAAAW,YAAA;IAAAC,oBAAA;IAAAC;EAAA,IAAAJ,EAQlC;EACC;IAAAK,IAAA;IAAAC;EAAA,IAAoBV,cAAA;EACpB;IAAAW;EAAA,IAA4BZ,SAAA;EAAA,IAAAa,EAAA;EAAA,IAAAP,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAM,eAAA,IAAAN,CAAA,QAAAI,IAAA,IAAAJ,CAAA,QAAAE,oBAAA,IAAAF,CAAA,QAAAG,WAAA,IAAAH,CAAA,QAAAK,CAAA;IAE5B,MAAAG,aAAA,GAAsBF,eAAA;MAAAG,cAAA,EACJ;IAAA,CAClB;IAI2B,MAAAC,EAAA,GAAAT,YAAA,IAAgB,GAAAJ,SAAA,UAAsB;IAAA,IAAAc,EAAA;IAAA,IAAAX,CAAA,QAAAU,EAAA;MAAlDC,EAAA,IAAAd,SAAA,EAAYa,EAAsC,EAAAE,MAAA,CAAAC,OAAS;MAAAb,CAAA,MAAAU,EAAA;MAAAV,CAAA,MAAAW,EAAA;IAAA;MAAAA,EAAA,GAAAX,CAAA;IAAA;IAAA,IAAAc,EAAA;IAAA,IAAAd,CAAA,QAAAE,oBAAA;MAE7DY,EAAA,GAAAA,CAAA;QACPZ,oBAAA;MAAA;MACFF,CAAA,MAAAE,oBAAA;MAAAF,CAAA,OAAAc,EAAA;IAAA;MAAAA,EAAA,GAAAd,CAAA;IAAA;IALFO,EAAA,GAAAQ,IAAA,CAAAnB,IAAA;MAAAoB,SAAA,EACaL,EAA2D,CAAAM,IAAA,CAAc;MAAAC,EAAA,EACjF;MAAAC,OAAA,EACML,EAET;MAAAM,SAAA,EACU;MAAAC,IAAA,EACL;MAAAC,QAAA,EAELC,KAAA,CAAC;QAAAP,SAAA,EAAe,GAAAnB,SAAA,SAAqB;QAAAyB,QAAA,GAClCrB,YAAA,EAAAuB,QAAA,IAA0BT,IAAA,CAAAvB,UAAA;UAAAwB,SAAA,EAAuB,GAAAnB,SAAA;QAAsB,C,GACxEkB,IAAA,CAAC;UAAAC,SAAA,EAAe,GAAAnB,SAAA,wBAAoC;UAAAyB,QAAA,EAClDP,IAAA,CAAC;YAAAC,SAAA,EAAe,GAAAnB,SAAA,cAA0B;YAAAyB,QAAA,EACvCrB,YAAA,EAAAwB,KAAA,IACCpB,CAAA,CAAE;cAAAqB,KAAA,EACOnC,cAAA,CAAeiB,aAAA,CAAAmB,MAAA,CAAAC,QAAA,EAA+BxB,IAAA;YAAA,CACvD;UAAA,C;YAGLH,YAAA,GACCc,IAAA,CAAC;UAAAC,SAAA,EACY,GAAAnB,SAAA,SAAqB;UAAAqB,EAAA,EAC7B;UAAAC,OAAA,QAAAU,CAAA;YAEDA,CAAA,CAAAC,eAAA,CAAiB;YAAA,MACX3B,WAAA;UAAA;UAAA4B,SAAA,QAAAC,GAAA;YAAA,IAGFH,GAAA,CAAAI,GAAA,KAAU,WAAWJ,GAAA,CAAAI,GAAA,KAAU;cACjCJ,GAAA,CAAAC,eAAA,CAAiB;cAAA,MACX3B,WAAA;YAAA;UAAA;UAAA+B,IAAA,EAGL;UAAAC,QAAA;UAAAb,QAAA,EAGLP,IAAA,CAAAtB,KAAA,IAAC;QAAA,C,QAED;MAAA,C;;;;;;;;;;;;SAtCRc,E","ignoreList":[]}

package/dist/elements/QueryPresets/QueryPresetToggler/index.scss

@@ -1,61 +0,0 @@
-@import '../../../scss/styles';
-
-@layer payload-default {
-  .active-query-preset {
-    &__label {
-      display: flex;
-      align-items: center;
-    }
-
-    &__label-text-max-width {
-      max-width: 100px;
-      overflow: hidden;
-    }
-
-    &__label-text {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    &__label-and-clear-wrap {
-      display: flex;
-      align-items: center;
-    }
-
-    &__shared {
-      margin-right: 2px;
-    }
-
-    &__clear {
-      display: flex;
-      align-items: center;
-      width: var(--pill-icon-size);
-      height: var(--pill-icon-size);
-    }
-
-    &--active {
-      box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
-      background-color: var(--theme-elevation-0);
-      padding-right: 4px;
-
-      &:hover {
-        background-color: var(--theme-elevation-100);
-      }
-    }
-  }
-
-  html[data-theme='dark'] {
-    .active-query-preset {
-      &--active {
-        box-shadow: inset 0 0 0 1px var(--theme-elevation-300);
-        color: var(--theme-elevation-0);
-        background-color: var(--theme-elevation-800);
-
-        &:hover {
-          background-color: var(--theme-elevation-700);
-        }
-      }
-    }
-  }
-}

package/dist/elements/RelationshipTable/cells/DrawerLink/index.scss

@@ -1,16 +0,0 @@
-@layer payload-default {
-  .drawer-link {
-    display: flex;
-    gap: calc(var(--base) / 2);
-
-    &__doc-drawer-toggler {
-      border: none;
-      background: none;
-      padding: 0;
-      cursor: pointer;
-      color: var(--color-text);
-      font-size: inherit;
-      line-height: inherit;
-    }
-  }
-}

package/dist/elements/RelationshipTable/index.scss

@@ -1,54 +0,0 @@
-@layer payload-default {
-  .relationship-table {
-    position: relative;
-
-    &__header {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: var(--base);
-    }
-
-    &__actions {
-      display: flex;
-      align-items: center;
-      gap: var(--base);
-    }
-
-    &__columns-inner {
-      padding-bottom: var(--base);
-    }
-
-    &__add-new-polymorphic-wrapper {
-      display: inline-flex;
-    }
-
-    &__add-new-polymorphic .btn__label {
-      display: flex;
-      text-wrap: nowrap;
-      align-items: center;
-    }
-
-    .table {
-      table {
-        width: 100%;
-        overflow: auto;
-
-        [class^='cell'] > p,
-        [class^='cell'] > span,
-        [class^='cell'] > a {
-          line-clamp: 4;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 4;
-          overflow: hidden;
-          display: -webkit-box;
-          max-width: 100vw;
-        }
-      }
-
-      th,
-      td:first-child {
-        min-width: 0;
-      }
-    }
-  }
-}

package/dist/elements/RenderTitle/index.scss

@@ -1,11 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .render-title {
-    display: inline-block;
-    &__id {
-      vertical-align: middle;
-      position: relative;
-    }
-  }
-}

package/dist/elements/SearchBar/index.scss

@@ -1,82 +0,0 @@
-@import '../../scss/styles';
-
-@layer payload-default {
-  .search-bar {
-    --icon-width: 40px;
-    --search-bg: var(--theme-elevation-50);
-
-    display: grid;
-    grid-template-columns: auto 1fr;
-    width: 100%;
-    background-color: var(--search-bg);
-    border-radius: var(--style-radius-m);
-    position: relative;
-    min-height: 46px;
-    isolation: isolate;
-
-    &:has(.search-bar__actions) {
-      grid-template-columns: auto 1fr auto;
-    }
-
-    &:has(.popup--active) {
-      z-index: 1;
-    }
-
-    .icon--search {
-      grid-column: 1/2;
-      grid-row: 1/2;
-      z-index: 1;
-      align-self: center;
-      justify-self: center;
-      pointer-events: none;
-      width: 40px;
-    }
-
-    .search-filter {
-      grid-column: 1/3;
-      grid-row: 1/2;
-      background-color: transparent;
-      border-radius: inherit;
-      input {
-        height: 100%;
-        padding-bottom: calc(var(--base) * 0.5);
-        padding-top: calc(var(--base) * 0.5);
-        padding-inline-start: var(--icon-width);
-        padding-inline-end: var(--base);
-        background-color: transparent;
-      }
-    }
-
-    &__actions {
-      display: flex;
-      align-items: center;
-      gap: calc(var(--base) / 4);
-      padding: calc(var(--base) * 0.5);
-      grid-column: 3/4;
-    }
-
-    @include small-break {
-      min-height: 40px;
-      background-color: transparent;
-
-      &:has(.search-bar__actions) {
-        row-gap: calc(var(--base) / 2);
-        grid-template-columns: auto 1fr;
-        grid-template-rows: auto auto;
-      }
-
-      .search-filter {
-        background-color: var(--search-bg);
-      }
-
-      &__actions {
-        grid-row: 2/3;
-        grid-column: 1/3;
-        display: flex;
-        align-items: center;
-        gap: calc(var(--base) / 4);
-        padding: 0;
-      }
-    }
-  }
-}