@payloadcms/ui 3.0.0-canary.c696728 → 3.0.0-canary.c96fa61

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
     });
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LinkImport","React","Link","default","baseClass","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","_jsx","Button","id","active","href","onClick","e","type"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/link` dependency out from this component\nimport type { LinkProps } from 'next/link.js'\n\nimport LinkImport from 'next/link.js'\nimport * as React from 'react' // TODO: abstract this out to support all routers\n\nimport './index.scss'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nconst baseClass = 'popup-button-list'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'small'\n  children: React.ReactNode\n  className?: string\n  textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}__text-align--${textAlign}`,\n    `${baseClass}__button-size--${buttonSize}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <div className={classes}>{children}</div>\n}\n\ntype MenuButtonProps = {\n  active?: boolean\n  children: React.ReactNode\n  className?: string\n  href?: LinkProps['href']\n  id?: string\n  onClick?: (e?: React.MouseEvent) => void\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n  id,\n  active,\n  children,\n  className,\n  href,\n  onClick,\n}) => {\n  const classes = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (href) {\n    return (\n      <Link\n        className={classes}\n        href={href}\n        id={id}\n        onClick={(e) => {\n          if (onClick) {\n            onClick(e)\n          }\n        }}\n      >\n        {children}\n      </Link>\n    )\n  }\n\n  if (onClick) {\n    return (\n      <button\n        className={classes}\n        id={id}\n        onClick={(e) => {\n          if (onClick) {\n            onClick(e)\n          }\n        }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    )\n  }\n\n  return (\n    <div className={classes} id={id}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,UAAA,MAAgB;AACvB,YAAYC,KAAA,MAAW,QAAO,CAAC;AAE/B,OAAO;AAEP,MAAMC,IAAA,GAAQF,UAAA,CAAWG,OAAO,IAAIH,UAAA;AAEpC,MAAMI,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAKRA,CAAC;EAAEC,UAAA,GAAa,SAAS;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,SAAA,GAAY;AAAM,CAAE;EACvE,MAAMC,OAAA,GAAU,CACdN,SAAA,EACAI,SAAA,EACA,GAAGJ,SAAA,iBAA0BK,SAAA,EAAW,EACxC,GAAGL,SAAA,kBAA2BE,UAAA,EAAY,CAC3C,CACEK,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EACR,oBAAOC,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;cAAUH;;AACnC;AAWA,OAAO,MAAMQ,MAAA,GAAoCA,CAAC;EAChDC,EAAE;EACFC,MAAM;EACNV,QAAQ;EACRC,SAAS;EACTU,IAAI;EACJC;AAAO,CACR;EACC,MAAMT,OAAA,GAAU,CAAC,GAAGN,SAAA,UAAmB,EAAEa,MAAA,IAAU,GAAGb,SAAA,oBAA6B,EAAEI,SAAA,CAAU,CAC5FG,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIK,IAAA,EAAM;IACR,oBACEJ,IAAA,CAACZ,IAAA;MACCM,SAAA,EAAWE,OAAA;MACXQ,IAAA,EAAMA,IAAA;MACNF,EAAA,EAAIA,EAAA;MACJG,OAAA,EAAUC,CAAA;QACR,IAAID,OAAA,EAAS;UACXA,OAAA,CAAQC,CAAA;QACV;MACF;gBAECb;;EAGP;EAEA,IAAIY,OAAA,EAAS;IACX,oBACEL,IAAA,CAAC;MACCN,SAAA,EAAWE,OAAA;MACXM,EAAA,EAAIA,EAAA;MACJG,OAAA,EAAUC,CAAA;QACR,IAAID,OAAA,EAAS;UACXA,OAAA,CAAQC,CAAA;QACV;MACF;MACAC,IAAA,EAAK;gBAEJd;;EAGP;EAEA,oBACEO,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;IAASM,EAAA,EAAIA,EAAA;cAC1BT;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["LinkImport","React","Link","default","baseClass","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","_jsx","Button","id","active","href","onClick","e","prefetch","type"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/link` dependency out from this component\nimport type { LinkProps } from 'next/link.js'\n\nimport LinkImport from 'next/link.js'\nimport * as React from 'react' // TODO: abstract this out to support all routers\n\nimport './index.scss'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nconst baseClass = 'popup-button-list'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'small'\n  children: React.ReactNode\n  className?: string\n  textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}__text-align--${textAlign}`,\n    `${baseClass}__button-size--${buttonSize}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <div className={classes}>{children}</div>\n}\n\ntype MenuButtonProps = {\n  active?: boolean\n  children: React.ReactNode\n  className?: string\n  href?: LinkProps['href']\n  id?: string\n  onClick?: (e?: React.MouseEvent) => void\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n  id,\n  active,\n  children,\n  className,\n  href,\n  onClick,\n}) => {\n  const classes = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (href) {\n    return (\n      <Link\n        className={classes}\n        href={href}\n        id={id}\n        onClick={(e) => {\n          if (onClick) {\n            onClick(e)\n          }\n        }}\n        prefetch={false}\n      >\n        {children}\n      </Link>\n    )\n  }\n\n  if (onClick) {\n    return (\n      <button\n        className={classes}\n        id={id}\n        onClick={(e) => {\n          if (onClick) {\n            onClick(e)\n          }\n        }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    )\n  }\n\n  return (\n    <div className={classes} id={id}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,UAAA,MAAgB;AACvB,YAAYC,KAAA,MAAW,QAAO,CAAC;AAE/B,OAAO;AAEP,MAAMC,IAAA,GAAQF,UAAA,CAAWG,OAAO,IAAIH,UAAA;AAEpC,MAAMI,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAKRA,CAAC;EAAEC,UAAA,GAAa,SAAS;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,SAAA,GAAY;AAAM,CAAE;EACvE,MAAMC,OAAA,GAAU,CACdN,SAAA,EACAI,SAAA,EACA,GAAGJ,SAAA,iBAA0BK,SAAA,EAAW,EACxC,GAAGL,SAAA,kBAA2BE,UAAA,EAAY,CAC3C,CACEK,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EACR,oBAAOC,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;cAAUH;;AACnC;AAWA,OAAO,MAAMQ,MAAA,GAAoCA,CAAC;EAChDC,EAAE;EACFC,MAAM;EACNV,QAAQ;EACRC,SAAS;EACTU,IAAI;EACJC;AAAO,CACR;EACC,MAAMT,OAAA,GAAU,CAAC,GAAGN,SAAA,UAAmB,EAAEa,MAAA,IAAU,GAAGb,SAAA,oBAA6B,EAAEI,SAAA,CAAU,CAC5FG,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIK,IAAA,EAAM;IACR,oBACEJ,IAAA,CAACZ,IAAA;MACCM,SAAA,EAAWE,OAAA;MACXQ,IAAA,EAAMA,IAAA;MACNF,EAAA,EAAIA,EAAA;MACJG,OAAA,EAAUC,CAAA;QACR,IAAID,OAAA,EAAS;UACXA,OAAA,CAAQC,CAAA;QACV;MACF;MACAC,QAAA,EAAU;gBAETd;;EAGP;EAEA,IAAIY,OAAA,EAAS;IACX,oBACEL,IAAA,CAAC;MACCN,SAAA,EAAWE,OAAA;MACXM,EAAA,EAAIA,EAAA;MACJG,OAAA,EAAUC,CAAA;QACR,IAAID,OAAA,EAAS;UACXA,OAAA,CAAQC,CAAA;QACV;MACF;MACAE,IAAA,EAAK;gBAEJf;;EAGP;EAEA,oBACEO,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;IAASM,EAAA,EAAIA,EAAA;cAC1BT;;AAGP","ignoreList":[]}

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

@@ -1,56 +1,58 @@
 @import '../../../scss/styles.scss';
 
-.popup-button-list {
-  --list-button-padding: calc(var(--base) * 0.5);
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  gap: 3px;
-  [dir='rtl'] &__text-align--left {
-    text-align: right;
-  }
-  &__text-align--left {
-    text-align: left;
-  }
-
-  &__text-align--center {
-    text-align: center;
-  }
-  [dir='rtl'] &__text-align--right {
+@layer payload-default {
+  .popup-button-list {
+    --list-button-padding: calc(var(--base) * 0.5);
+    display: flex;
+    flex-direction: column;
     text-align: left;
-  }
-  &__text-align--right {
-    text-align: right;
-  }
+    gap: 3px;
+    [dir='rtl'] &__text-align--left {
+      text-align: right;
+    }
+    &__text-align--left {
+      text-align: left;
+    }
 
-  &__button {
-    @extend %btn-reset;
-    padding-left: var(--list-button-padding);
-    padding-right: var(--list-button-padding);
-    padding-top: 2px;
-    padding-bottom: 2px;
-    cursor: pointer;
-    text-align: inherit;
-    line-height: var(--base);
-    text-decoration: none;
-    border-radius: 3px;
+    &__text-align--center {
+      text-align: center;
+    }
+    [dir='rtl'] &__text-align--right {
+      text-align: left;
+    }
+    &__text-align--right {
+      text-align: right;
+    }
 
-    button {
+    &__button {
       @extend %btn-reset;
+      padding-left: var(--list-button-padding);
+      padding-right: var(--list-button-padding);
+      padding-top: 2px;
+      padding-bottom: 2px;
+      cursor: pointer;
+      text-align: inherit;
+      line-height: var(--base);
+      text-decoration: none;
+      border-radius: 3px;
+
+      button {
+        @extend %btn-reset;
 
-      &:focus-visible {
-        outline: none;
+        &:focus-visible {
+          outline: none;
+        }
       }
-    }
 
-    &:hover,
-    &:focus-visible,
-    &:focus-within {
-      background-color: var(--popup-button-highlight);
+      &:hover,
+      &:focus-visible,
+      &:focus-within {
+        background-color: var(--popup-button-highlight);
+      }
     }
-  }
 
-  &__button--selected {
-    background-color: var(--theme-elevation-150);
+    &__button--selected {
+      background-color: var(--theme-elevation-150);
+    }
   }
 }

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

@@ -1,29 +1,31 @@
 @import '../../../scss/styles.scss';
 
-.popup-button {
-  height: 100%;
-  color: currentColor;
-  padding: 0;
-  font-size: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  border: 0;
-  cursor: pointer;
-  display: inline-flex;
+@layer payload-default {
+  .popup-button {
+    height: 100%;
+    color: currentColor;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    border: 0;
+    cursor: pointer;
+    display: inline-flex;
 
-  &--background {
-    background: transparent;
-  }
+    &--background {
+      background: transparent;
+    }
 
-  &--size-small {
-    padding: base(0.4);
-  }
+    &--size-small {
+      padding: base(0.4);
+    }
 
-  &--size-medium {
-    padding: base(0.6);
-  }
+    &--size-medium {
+      padding: base(0.6);
+    }
 
-  &--size-large {
-    padding: base(0.8);
+    &--size-large {
+      padding: base(0.8);
+    }
   }
 }