@payloadcms/ui 3.0.0-canary.96477cf → 3.0.0-canary.98e0119

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useState","AnimateHeightImport","ChevronIcon","usePreferences","useNav","AnimateHeight","default","baseClass","NavGroup","t0","$","children","label","collapsed","setCollapsed","animate","setAnimate","getPreference","setPreference","navOpen","preferencesKey","t1","t2","setCollapsedFromPreferences","preferences","indexOf","t3","preferences_0","filter","preference","push","toggleCollapsed","t4","t5","t6","Boolean","t7","join","t8","t9","t10","t11","t12","t13","_jsxs","className","id","onClick","tabIndex","type","_jsx","direction","undefined","duration","height","Fragment"],"sources":["../../../src/elements/NavGroup/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useNav } from '../Nav/context.js'\nimport './index.scss'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nconst baseClass = 'nav-group'\n\ntype Props = {\n  children: React.ReactNode\n  label: string\n}\n\nexport const NavGroup: React.FC<Props> = ({ children, label }) => {\n  const [collapsed, setCollapsed] = useState(true)\n  const [animate, setAnimate] = useState(false)\n  const { getPreference, setPreference } = usePreferences()\n  const { navOpen } = useNav()\n\n  const preferencesKey = `collapsed-${label}-groups`\n\n  useEffect(() => {\n    if (label) {\n      const setCollapsedFromPreferences = async () => {\n        const preferences = (await getPreference(preferencesKey)) || []\n        setCollapsed(preferences.indexOf(label) !== -1)\n      }\n      void setCollapsedFromPreferences()\n    }\n  }, [getPreference, label, preferencesKey])\n\n  if (label) {\n    const toggleCollapsed = async () => {\n      setAnimate(true)\n      let preferences: string[] = (await getPreference(preferencesKey)) || []\n      if (collapsed) {\n        preferences = preferences.filter((preference) => label !== preference)\n      } else {\n        preferences.push(label)\n      }\n      void setPreference(preferencesKey, preferences)\n      setCollapsed(!collapsed)\n    }\n\n    return (\n      <div\n        className={[`${baseClass}`, `${label}`, collapsed && `${baseClass}--collapsed`]\n          .filter(Boolean)\n          .join(' ')}\n        id={`nav-group-${label}`}\n      >\n        <button\n          className={[\n            `${baseClass}__toggle`,\n            `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={toggleCollapsed}\n          tabIndex={!navOpen ? -1 : 0}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__label`}>{label}</div>\n          <div className={`${baseClass}__indicator`}>\n            <ChevronIcon\n              className={`${baseClass}__indicator`}\n              direction={!collapsed ? 'up' : undefined}\n            />\n          </div>\n        </button>\n        <AnimateHeight duration={animate ? 200 : 0} height={collapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n      </div>\n    )\n  }\n\n  return <React.Fragment>{children}</React.Fragment>\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","AnimateHeightImport","ChevronIcon","usePreferences","useNav","AnimateHeight","default","baseClass","preferencesKey","NavGroup","t0","$","children","isOpen","isOpenFromProps","label","collapsed","setCollapsed","animate","setAnimate","setPreference","navOpen","t1","newGroupPrefs","open","Boolean","groups","toggleCollapsed","t2","t3","t4","filter","t5","join","t6","t7","t8","t9","t10","t11","_jsxs","className","id","onClick","tabIndex","type","_jsx","direction","undefined","duration","height","Fragment"],"sources":["../../../src/elements/NavGroup/index.tsx"],"sourcesContent":["'use client'\nimport type { NavPreferences } from 'payload'\n\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport './index.scss'\nimport { useNav } from '../Nav/context.js'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nconst baseClass = 'nav-group'\n\ntype Props = {\n  children: React.ReactNode\n  isOpen?: boolean\n  label: string\n}\n\nconst preferencesKey = 'nav'\n\nexport const NavGroup: React.FC<Props> = ({ children, isOpen: isOpenFromProps, label }) => {\n  const [collapsed, setCollapsed] = useState(\n    typeof isOpenFromProps !== 'undefined' ? !isOpenFromProps : false,\n  )\n\n  const [animate, setAnimate] = useState(false)\n  const { setPreference } = usePreferences()\n  const { navOpen } = useNav()\n\n  if (label) {\n    const toggleCollapsed = () => {\n      setAnimate(true)\n      const newGroupPrefs: NavPreferences['groups'] = {}\n\n      if (!newGroupPrefs?.[label]) {\n        newGroupPrefs[label] = { open: Boolean(collapsed) }\n      } else {\n        newGroupPrefs[label].open = Boolean(collapsed)\n      }\n\n      void setPreference(preferencesKey, { groups: newGroupPrefs }, true)\n      setCollapsed(!collapsed)\n    }\n\n    return (\n      <div\n        className={[`${baseClass}`, `${label}`, collapsed && `${baseClass}--collapsed`]\n          .filter(Boolean)\n          .join(' ')}\n        id={`nav-group-${label}`}\n      >\n        <button\n          className={[\n            `${baseClass}__toggle`,\n            `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={toggleCollapsed}\n          tabIndex={!navOpen ? -1 : 0}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__label`}>{label}</div>\n          <div className={`${baseClass}__indicator`}>\n            <ChevronIcon\n              className={`${baseClass}__indicator`}\n              direction={!collapsed ? 'up' : undefined}\n            />\n          </div>\n        </button>\n        <AnimateHeight duration={animate ? 200 : 0} height={collapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n      </div>\n    )\n  }\n\n  return <React.Fragment>{children}</React.Fragment>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAChC,OAAOC,mBAAA,MAAyB;AAEhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AACP,SAASC,MAAM,QAAQ;AAEvB,MAAMC,aAAA,GAAiBJ,mBAAA,CAAoBK,OAAO,IAChDL,mBAAA;AAEF,MAAMM,SAAA,GAAY;AAQlB,MAAMC,cAAA,GAAiB;AAEvB,OAAO,MAAMC,QAAA,GAA4BC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,QAAA;IAAAC,MAAA,EAAAC,eAAA;IAAAC;EAAA,IAAAL,EAA4C;EACpF,OAAAM,SAAA,EAAAC,YAAA,IAAkCjB,QAAA,CAChC,OAAOc,eAAA,KAAoB,eAAeA,eAAA,QAAkB;EAG9D,OAAAI,OAAA,EAAAC,UAAA,IAA8BnB,QAAA,MAAS;EACvC;IAAAoB;EAAA,IAA0BjB,cAAA;EAC1B;IAAAkB;EAAA,IAAoBjB,MAAA;EAAA,IAEhBW,KAAA;IAAA,IAAAO,EAAA;IAAA,IAAAX,CAAA,QAAAI,KAAA,IAAAJ,CAAA,QAAAK,SAAA,IAAAL,CAAA,QAAAS,aAAA;MACsBE,EAAA,GAAAA,CAAA;QACtBH,UAAA,KAAW;QACX,MAAAI,aAAA;QAAiD,KAE5CA,aAAA,GAAgBR,KAAA;UACnBQ,aAAa,CAACR,KAAA;YAAAS,IAAA,EAAiBC,OAAA,CAAQT,SAAA;UAAA;QAAA;UAEvCO,aAAa,CAACR,KAAA,EAAAS,IAAA,GAAcC,OAAA,CAAQT,SAAA;QAAA;QAGjCI,aAAA,CAAAZ,cAAA;UAAAkB,MAAA,EAAwCH;QAAA,OAAiB;QAC9DN,YAAA,EAAcD,SAAA;MAAA;MAChBL,CAAA,MAAAI,KAAA;MAAAJ,CAAA,MAAAK,SAAA;MAAAL,CAAA,MAAAS,aAAA;MAAAT,CAAA,MAAAW,EAAA;IAAA;MAAAA,EAAA,GAAAX,CAAA;IAAA;IAZA,MAAAgB,eAAA,GAAwBL,EAYxB;IAIgC,MAAAM,EAAA,MAAGb,KAAA,EAAO;IAAE,MAAAc,EAAA,GAAAb,SAAA,IAAa,GAAAT,SAAA,aAAyB;IAAA,IAAAuB,EAAA;IAAA,IAAAnB,CAAA,QAAAiB,EAAA,IAAAjB,CAAA,QAAAkB,EAAA;MAAnEC,EAAA,IAAC,GAAAvB,SAAA,EAAc,EAAEqB,EAAU,EAAEC,EAAsC,EAAAE,MAAA,CAAAN,OACpE;MAAAd,CAAA,MAAAiB,EAAA;MAAAjB,CAAA,MAAAkB,EAAA;MAAAlB,CAAA,MAAAmB,EAAA;IAAA;MAAAA,EAAA,GAAAnB,CAAA;IAAA;IADC,MAAAqB,EAAA,GAAAF,EACD,CAAAG,IAAA,CACF;IACJ,MAAAC,EAAA,gBAAanB,KAAA,EAAO;IAKpB,MAAAoB,EAAA,MAAA5B,SAAA,aAAyBS,SAAA,GAAY,cAAc,QAAQ;IAAA,IAAAoB,EAAA;IAAA,IAAAzB,CAAA,QAAAwB,EAAA;MAFlDC,EAAA,IACT,GAAA7B,SAAA,UAAsB,EACtB4B,EAA2D,EAAAJ,MAAA,CAAAN,OAEnD;MAAAd,CAAA,MAAAwB,EAAA;MAAAxB,CAAA,MAAAyB,EAAA;IAAA;MAAAA,EAAA,GAAAzB,CAAA;IAAA;IAJC,MAAA0B,EAAA,GAAAD,EAID,CAAAH,IAAA,CACF;IAEE,MAAAK,GAAA,IAACjB,OAAA,SAAe;IAAA,IAAAkB,GAAA;IAAA,IAAA5B,CAAA,QAAAI,KAAA,IAAAJ,CAAA,SAAAK,SAAA,IAAAL,CAAA,SAAA0B,EAAA,IAAA1B,CAAA,SAAAgB,eAAA,IAAAhB,CAAA,SAAA2B,GAAA,IAAA3B,CAAA,SAAAO,OAAA,IAAAP,CAAA,SAAAC,QAAA,IAAAD,CAAA,SAAAqB,EAAA,IAAArB,CAAA,SAAAuB,EAAA;MAd9BK,GAAA,GAAAC,KAAA,CAAC;QAAAC,SAAA,EACYT,EAEH;QAAAU,EAAA,EACJR,EAAoB;QAAAtB,QAAA,GAExB4B,KAAA,CAAC;UAAAC,SAAA,EACYJ,EAKH;UAAAM,OAAA,EACChB,eAAA;UAAAiB,QAAA,EACCN,GAAgB;UAAAO,IAAA,EACrB;UAAAjC,QAAA,GAELkC,IAAA,CAAC;YAAAL,SAAA,EAAe,GAAAlC,SAAA,SAAqB;YAAAK,QAAA,EAAGG;UAAA,C,GACxC+B,IAAA,CAAC;YAAAL,SAAA,EAAe,GAAAlC,SAAA,aAAyB;YAAAK,QAAA,EACvCkC,IAAA,CAAA5C,WAAA;cAAAuC,SAAA,EACa,GAAAlC,SAAA,aAAyB;cAAAwC,SAAA,EACzB,CAAC/B,SAAA,GAAY,OAAAgC;YAAO,C;;YAIrCF,IAAA,CAAAzC,aAAA;UAAA4C,QAAA,EAAyB/B,OAAA,UAAgB;UAAAgC,MAAA,EAAWlC,SAAA,OAAgB;UAAAJ,QAAA,EAClEkC,IAAA,CAAC;YAAAL,SAAA,EAAe,GAAAlC,SAAA,WAAuB;YAAAK;UAAA,C;;;;;;;;;;;;;;;;WA1B3C2B,G;;;;IAgCGjB,EAAA,GAAAwB,IAAA,CAAA/C,KAAA,CAAAoD,QAAA;MAAAvC;IAAA,C;;;;;;SAAAU,E;CACT","ignoreList":[]}

package/dist/elements/NavGroup/index.scss

@@ -1,56 +1,58 @@
 @import '../../scss/styles.scss';
 
-.nav-group {
-  width: 100%;
-  margin-bottom: base(0.5);
-
-  &__toggle {
-    cursor: pointer;
-    color: var(--theme-elevation-400);
-    background: transparent;
-    padding-left: 0;
-    border: 0;
-    margin-bottom: base(0.25);
+@layer payload-default {
+  .nav-group {
     width: 100%;
-    text-align: left;
-    display: flex;
-    align-items: flex-start;
-    padding: 0;
-    gap: base(0.5);
-    justify-content: space-between;
-
-    svg {
-      flex-shrink: 0;
-      margin-top: base(-0.2);
-    }
+    margin-bottom: base(0.5);
+
+    &__toggle {
+      cursor: pointer;
+      color: var(--theme-elevation-400);
+      background: transparent;
+      padding-left: 0;
+      border: 0;
+      margin-bottom: base(0.25);
+      width: 100%;
+      text-align: left;
+      display: flex;
+      align-items: flex-start;
+      padding: 0;
+      gap: base(0.5);
+      justify-content: space-between;
+
+      svg {
+        flex-shrink: 0;
+        margin-top: base(-0.2);
+      }
 
-    &:hover,
-    &:focus-visible {
-      color: var(--theme-elevation-1000);
+      &:hover,
+      &:focus-visible {
+        color: var(--theme-elevation-1000);
 
-      .stroke {
-        stroke: var(--theme-elevation-1000);
+        .stroke {
+          stroke: var(--theme-elevation-1000);
+        }
       }
-    }
 
-    &:focus-visible {
-      outline: none;
+      &:focus-visible {
+        outline: none;
+      }
     }
-  }
 
-  &__indicator {
-    position: relative;
-    flex-shrink: 0;
+    &__indicator {
+      position: relative;
+      flex-shrink: 0;
 
-    svg .stroke {
-      stroke: var(--theme-elevation-200);
+      svg .stroke {
+        stroke: var(--theme-elevation-200);
+      }
     }
-  }
 
-  &--collapsed {
-    .collapsible__toggle {
-      border-bottom-right-radius: $style-radius-m;
-      border-bottom-left-radius: $style-radius-m;
+    &--collapsed {
+      .collapsible__toggle {
+        border-bottom-right-radius: $style-radius-m;
+        border-bottom-left-radius: $style-radius-m;
+      }
     }
   }
 }

package/dist/elements/Pagination/ClickableArrow/index.scss

@@ -1,45 +1,47 @@
 @import '../../../scss/styles.scss';
 
-.clickable-arrow {
-  cursor: pointer;
-  @extend %btn-reset;
-  width: base(2);
-  height: base(2);
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  outline: 0;
-  padding: base(0.5);
-  color: var(--theme-elevation-800);
-  line-height: base(1);
+@layer payload-default {
+  .clickable-arrow {
+    cursor: pointer;
+    @extend %btn-reset;
+    width: base(2);
+    height: base(2);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    outline: 0;
+    padding: base(0.5);
+    color: var(--theme-elevation-800);
+    line-height: base(1);
 
-  &:not(.clickable-arrow--is-disabled) {
-    &:hover,
-    &:focus-visible {
-      background: var(--theme-elevation-100);
+    &:not(.clickable-arrow--is-disabled) {
+      &:hover,
+      &:focus-visible {
+        background: var(--theme-elevation-100);
+      }
     }
-  }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-  }
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
 
-  &--right {
-    .icon {
-      transform: rotate(-90deg);
+    &--right {
+      .icon {
+        transform: rotate(-90deg);
+      }
     }
-  }
 
-  &--left .icon {
-    transform: rotate(90deg);
-  }
+    &--left .icon {
+      transform: rotate(90deg);
+    }
 
-  &--is-disabled {
-    cursor: default;
+    &--is-disabled {
+      cursor: default;
 
-    .icon .stroke {
-      stroke: var(--theme-elevation-400);
+      .icon .stroke {
+        stroke: var(--theme-elevation-400);
+      }
     }
   }
 }

package/dist/elements/Pagination/index.scss

@@ -1,51 +1,53 @@
 @import '../../scss/styles.scss';
 
-.paginator {
-  display: flex;
-  margin-bottom: $baseline;
+@layer payload-default {
+  .paginator {
+    display: flex;
+    margin-bottom: $baseline;
 
-  &__page {
-    cursor: pointer;
+    &__page {
+      cursor: pointer;
 
-    &--is-current {
-      background: var(--theme-elevation-100);
-      color: var(--theme-elevation-400);
-      cursor: default;
-    }
+      &--is-current {
+        background: var(--theme-elevation-100);
+        color: var(--theme-elevation-400);
+        cursor: default;
+      }
 
-    &--is-last-page {
-      margin-right: 0;
+      &--is-last-page {
+        margin-right: 0;
+      }
     }
-  }
 
-  .clickable-arrow--right {
-    margin-right: base(0.25);
-  }
+    .clickable-arrow--right {
+      margin-right: base(0.25);
+    }
 
-  &__page {
-    @extend %btn-reset;
-    width: base(2);
-    height: base(2);
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    outline: 0;
-    padding: base(0.5);
-    color: var(--theme-elevation-800);
-    line-height: base(1);
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
+    &__page {
+      @extend %btn-reset;
+      width: base(2);
+      height: base(2);
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      outline: 0;
+      padding: base(0.5);
+      color: var(--theme-elevation-800);
+      line-height: base(1);
+
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+      }
     }
-  }
 
-  &__page,
-  &__separator {
-    margin-right: base(0.25);
-  }
+    &__page,
+    &__separator {
+      margin-right: base(0.25);
+    }
 
-  &__separator {
-    align-self: center;
-    color: var(--theme-elevation-400);
+    &__separator {
+      align-self: center;
+      color: var(--theme-elevation-400);
+    }
   }
 }

package/dist/elements/PerPage/index.scss

@@ -1,46 +1,48 @@
 @import '../../scss/styles.scss';
 
-.per-page {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-  }
+@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;
-  }
+    &__base-button {
+      display: flex;
+      align-items: center;
+      font-weight: bold;
+    }
 
-  &__button {
-    @extend %btn-reset;
-    cursor: pointer;
-    text-align: left;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    color: var(--theme-elevation-500);
+    &__button {
+      @extend %btn-reset;
+      cursor: pointer;
+      text-align: left;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      color: var(--theme-elevation-500);
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
 
-    svg .stroke {
-      stroke: currentColor;
+      svg .stroke {
+        stroke: currentColor;
+      }
     }
-  }
 
-  &__chevron {
-    padding-left: calc(var(--base) / 4);
-  }
+    &__chevron {
+      padding-left: calc(var(--base) / 4);
+    }
 
-  &__button-active {
-    font-weight: bold;
-    color: var(--theme-text);
+    &__button-active {
+      font-weight: bold;
+      color: var(--theme-text);
+    }
   }
 }

package/dist/elements/Pill/index.scss

@@ -1,134 +1,136 @@
 @import '../../scss/styles.scss';
 
-.pill {
-  font-size: 1rem;
-  line-height: base(1.2);
-  display: inline-flex;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-s;
-  cursor: default;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: 0;
-  padding: 0 base(0.4);
-  align-items: center;
-  flex-shrink: 0;
-  gap: base(0.2);
-
-  &--rounded {
-    border-radius: var(--style-radius-l);
-    line-height: 18px;
-    font-size: 12px;
-  }
-
-  &:active,
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
-
-  .icon {
-    flex-shrink: 0;
-    margin: base(0.1);
-  }
-
-  &__label {
+@layer payload-default {
+  .pill {
+    font-size: 1rem;
+    line-height: base(1.2);
+    display: inline-flex;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-s;
+    cursor: default;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
+    border: 0;
+    padding: 0 base(0.4);
+    align-items: center;
+    flex-shrink: 0;
+    gap: base(0.2);
 
-  &--has-action {
-    cursor: pointer;
-    text-decoration: none;
-  }
+    &--rounded {
+      border-radius: var(--style-radius-l);
+      line-height: 18px;
+      font-size: 12px;
+    }
 
-  &--is-dragging {
-    cursor: grabbing;
-  }
+    &:active,
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
 
-  &--has-icon {
-    padding-inline-start: base(0.4);
-    padding-inline-end: base(0.3);
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
 
-    svg {
-      display: block;
+    .icon {
+      flex-shrink: 0;
+      margin: base(0.1);
     }
-  }
 
-  &--align-icon-left {
-    flex-direction: row-reverse;
-    padding-inline-start: base(0.1);
-    padding-inline-end: base(0.4);
-  }
+    &__label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--has-action {
+      cursor: pointer;
+      text-decoration: none;
+    }
 
-  &--style-white {
-    background: var(--theme-elevation-0);
+    &--is-dragging {
+      cursor: grabbing;
+    }
 
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
+    &--has-icon {
+      padding-inline-start: base(0.4);
+      padding-inline-end: base(0.3);
 
-      &:active {
-        background: var(--theme-elevation-100);
+      svg {
+        display: block;
       }
     }
-  }
 
-  &--style-light {
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
+    &--align-icon-left {
+      flex-direction: row-reverse;
+      padding-inline-start: base(0.1);
+      padding-inline-end: base(0.4);
+    }
 
-      &:active {
-        background: var(--theme-elevation-100);
+    &--style-white {
+      background: var(--theme-elevation-0);
+
+      &.pill--has-action {
+        &:hover {
+          background: var(--theme-elevation-100);
+        }
+
+        &:active {
+          background: var(--theme-elevation-100);
+        }
       }
     }
-  }
 
-  &--style-light-gray {
-    background: var(--theme-elevation-100);
-    color: var(--theme-elevation-800);
-  }
+    &--style-light {
+      &.pill--has-action {
+        &:hover {
+          background: var(--theme-elevation-100);
+        }
 
-  &--style-warning {
-    background: var(--theme-warning-150);
-    color: var(--theme-warning-800);
-  }
+        &:active {
+          background: var(--theme-elevation-100);
+        }
+      }
+    }
 
-  &--style-success {
-    background: var(--theme-success-150);
-    color: var(--theme-success-800);
-  }
+    &--style-light-gray {
+      background: var(--theme-elevation-100);
+      color: var(--theme-elevation-800);
+    }
 
-  &--style-error {
-    background: var(--theme-error-150);
-    color: var(--theme-error-800);
-  }
+    &--style-warning {
+      background: var(--theme-warning-150);
+      color: var(--theme-warning-800);
+    }
 
-  &--style-dark {
-    background: var(--theme-elevation-800);
-    color: var(--theme-elevation-0);
+    &--style-success {
+      background: var(--theme-success-150);
+      color: var(--theme-success-800);
+    }
 
-    svg {
-      @include color-svg(var(--theme-elevation-0));
+    &--style-error {
+      background: var(--theme-error-150);
+      color: var(--theme-error-800);
     }
 
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-750);
+    &--style-dark {
+      background: var(--theme-elevation-800);
+      color: var(--theme-elevation-0);
+
+      svg {
+        @include color-svg(var(--theme-elevation-0));
       }
 
-      &:active {
-        background: var(--theme-elevation-700);
+      &.pill--has-action {
+        &:hover {
+          background: var(--theme-elevation-750);
+        }
+
+        &:active {
+          background: var(--theme-elevation-700);
+        }
       }
     }
   }

package/dist/elements/Popup/PopupButtonList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,cAAc,CAAA;AAMrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmD5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,cAAc,CAAA;AAMrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoD5C,CAAA"}

package/dist/elements/Popup/PopupButtonList/index.js

@@ -37,6 +37,7 @@ export const Button = ({
           onClick(e);
         }
       },
+      prefetch: false,
       children: children
     });
   }