@payloadcms/ui 3.0.0-canary.9de3ffd → 3.0.0-canary.9f64534

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","LinkWithDefault","Link","default","React","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","to","classes","Element","_jsxs","href","type","undefined","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport LinkWithDefault from 'next/link.js'\nconst Link = LinkWithDefault.default\nimport React from 'react' // TODO: abstract this out to support all routers\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: {\n    ref: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  pillStyle?: 'dark' | 'error' | 'light' | 'light-gray' | 'success' | 'warning' | 'white'\n  rounded?: boolean\n  to?: string\n}\n\nexport type RenderedTypeProps = {\n  children: React.ReactNode\n  className?: string\n  onClick?: () => void\n  to: string\n  type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    onClick,\n    pillStyle = 'light',\n    rounded,\n    to,\n  } = props\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n  if (onClick && !to) Element = 'button'\n  if (to) Element = Link\n\n  return (\n    <Element\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      href={to || null}\n      onClick={onClick}\n      type={Element === 'button' ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {icon && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </Element>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) return <DraggablePill {...props} />\n  return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","LinkWithDefault","Link","default","React","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","to","classes","Element","_jsxs","href","type","undefined","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport LinkWithDefault from 'next/link.js'\nconst Link = LinkWithDefault.default\nimport React from 'react' // TODO: abstract this out to support all routers\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: {\n    ref: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  pillStyle?: 'dark' | 'error' | 'light' | 'light-gray' | 'success' | 'warning' | 'white'\n  rounded?: boolean\n  to?: string\n}\n\nexport type RenderedTypeProps = {\n  children: React.ReactNode\n  className?: string\n  onClick?: () => void\n  to: string\n  type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    onClick,\n    pillStyle = 'light',\n    rounded,\n    to,\n  } = props\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n  if (onClick && !to) {\n    Element = 'button'\n  }\n  if (to) {\n    Element = Link\n  }\n\n  return (\n    <Element\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      href={to || null}\n      onClick={onClick}\n      type={Element === 'button' ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {icon && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </Element>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggablePill {...props} />\n  }\n  return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Pill/index.scss

@@ -1,132 +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;
-
-  &--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.1);
-    svg {
-      display: block;
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
     }
-  }
 
-  &--align-icon-left {
-    flex-direction: row-reverse;
-    padding-inline-start: base(0.1);
-    padding-inline-end: base(0.4);
-  }
+    .icon {
+      flex-shrink: 0;
+      margin: base(0.1);
+    }
 
-  &--style-white {
-    background: var(--theme-elevation-0);
+    &__label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
+    &--has-action {
+      cursor: pointer;
+      text-decoration: none;
+    }
 
-      &:active {
-        background: var(--theme-elevation-100);
-      }
+    &--is-dragging {
+      cursor: grabbing;
     }
-  }
 
-  &--style-light {
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-100);
+    &--has-icon {
+      padding-inline-start: base(0.4);
+      padding-inline-end: base(0.3);
+
+      svg {
+        display: block;
       }
+    }
+
+    &--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.d.ts

@@ -8,6 +8,7 @@ export type PopupTriggerProps = {
     disabled?: boolean;
     noBackground?: boolean;
     setActive: (active: boolean) => void;
+    size?: 'large' | 'medium' | 'small';
 };
 export declare const PopupTrigger: React.FC<PopupTriggerProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+CpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkDpD,CAAA"}

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

@@ -12,9 +12,10 @@ export const PopupTrigger = props => {
     className,
     disabled,
     noBackground,
-    setActive
+    setActive,
+    size
   } = props;
-  const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`].filter(Boolean).join(' ');
+  const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`, size && `${baseClass}--size-${size}`].filter(Boolean).join(' ');
   const handleClick = () => {
     setActive(!active);
   };
@@ -26,7 +27,9 @@ export const PopupTrigger = props => {
       className: classes,
       onClick: handleClick,
       onKeyDown: e => {
-        if (e.key === 'Enter') handleClick();
+        if (e.key === 'Enter') {
+          handleClick();
+        }
       },
       role: "button",
       tabIndex: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","classes","filter","Boolean","join","handleClick","_jsx","onClick","onKeyDown","e","key","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button: React.ReactNode\n  buttonType: 'custom' | 'default' | 'none'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  setActive: (active: boolean) => void\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, disabled, noBackground, setActive } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = () => {\n    setActive(!active)\n  }\n\n  if (buttonType === 'none') {\n    return null\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') handleClick()\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAYlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,YAAY;IAAEC;EAAS,CAAE,GAAGP,KAAA;EAErF,MAAMQ,OAAA,GAAU,CACdV,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,CAC5C,CACEW,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAcA,CAAA;IAClBL,SAAA,CAAU,CAACN,MAAA;EACb;EAEA,IAAIE,UAAA,KAAe,QAAQ;IACzB,OAAO;EACT;EAEA,IAAIA,UAAA,KAAe,UAAU;IAC3B,oBACEU,IAAA,CAAC;MACCT,SAAA,EAAWI,OAAA;MACXM,OAAA,EAASF,WAAA;MACTG,SAAA,EAAYC,CAAA;QACV,IAAIA,CAAA,CAAEC,GAAG,KAAK,SAASL,WAAA;MACzB;MACAM,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETjB;;EAGP;EAEA,oBACEW,IAAA,CAAC;IACCT,SAAA,EAAWI,OAAA;IACXH,QAAA,EAAUA,QAAA;IACVS,OAAA,EAASF,WAAA;IACTO,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJlB;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","size","classes","filter","Boolean","join","handleClick","_jsx","onClick","onKeyDown","e","key","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button: React.ReactNode\n  buttonType: 'custom' | 'default' | 'none'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  setActive: (active: boolean) => void\n  size?: 'large' | 'medium' | 'small'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, disabled, noBackground, setActive, size } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = () => {\n    setActive(!active)\n  }\n\n  if (buttonType === 'none') {\n    return null\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            handleClick()\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAalB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,SAAS;IAAEC;EAAI,CAAE,GAAGR,KAAA;EAE3F,MAAMS,OAAA,GAAU,CACdX,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,EAC3CU,IAAA,IAAQ,GAAGV,SAAA,UAAmBU,IAAA,EAAM,CACrC,CACEE,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAcA,CAAA;IAClBN,SAAA,CAAU,CAACN,MAAA;EACb;EAEA,IAAIE,UAAA,KAAe,QAAQ;IACzB,OAAO;EACT;EAEA,IAAIA,UAAA,KAAe,UAAU;IAC3B,oBACEW,IAAA,CAAC;MACCV,SAAA,EAAWK,OAAA;MACXM,OAAA,EAASF,WAAA;MACTG,SAAA,EAAYC,CAAA;QACV,IAAIA,CAAA,CAAEC,GAAG,KAAK,SAAS;UACrBL,WAAA;QACF;MACF;MACAM,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETlB;;EAGP;EAEA,oBACEY,IAAA,CAAC;IACCV,SAAA,EAAWK,OAAA;IACXJ,QAAA,EAAUA,QAAA;IACVU,OAAA,EAASF,WAAA;IACTO,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJnB;;AAGP","ignoreList":[]}

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

@@ -1,17 +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-medium {
+      padding: base(0.6);
+    }
+
+    &--size-large {
+      padding: base(0.8);
+    }
   }
 }

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

@@ -7,6 +7,7 @@ export type PopupProps = {
     boundingRef?: React.RefObject<HTMLElement>;
     button?: React.ReactNode;
     buttonClassName?: string;
+    buttonSize?: 'large' | 'medium' | 'small';
     buttonType?: 'custom' | 'default' | 'none';
     caret?: boolean;
     children?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAGvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,KAAK,CAAC,SAAS,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAkLtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAGvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,cAAc,CAAA;AAKrB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACzC,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,KAAK,CAAC,SAAS,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwLtC,CAAA"}

package/dist/elements/Popup/index.js

@@ -5,14 +5,15 @@ export * as PopupList from './PopupButtonList/index.js';
 import { useWindowInfo } from '@faceless-ui/window-info';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntersect } from '../../hooks/useIntersect.js';
-import { PopupTrigger } from './PopupTrigger/index.js';
 import './index.scss';
+import { PopupTrigger } from './PopupTrigger/index.js';
 const baseClass = 'popup';
 export const Popup = props => {
   const {
     boundingRef,
     button,
     buttonClassName,
+    buttonSize,
     buttonType = 'default',
     caret = true,
     children,
@@ -99,7 +100,9 @@ export const Popup = props => {
     });
   }, [intersectionEntry, setPosition, windowHeight]);
   useEffect(() => {
-    if (typeof onToggleOpen === 'function') onToggleOpen(active);
+    if (typeof onToggleOpen === 'function') {
+      onToggleOpen(active);
+    }
     if (active) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
@@ -112,7 +115,7 @@ export const Popup = props => {
   useEffect(() => {
     setActive(forceOpen);
   }, [forceOpen]);
-  const classes = [baseClass, className, `${baseClass}--size-${size}`, `${baseClass}--v-align-${verticalAlign}`, `${baseClass}--h-align-${horizontalAlign}`, active && `${baseClass}--active`, showScrollbar && `${baseClass}--show-scrollbar`].filter(Boolean).join(' ');
+  const classes = [baseClass, className, `${baseClass}--size-${size}`, buttonSize && `${baseClass}--button-size-${buttonSize}`, `${baseClass}--v-align-${verticalAlign}`, `${baseClass}--h-align-${horizontalAlign}`, active && `${baseClass}--active`, showScrollbar && `${baseClass}--show-scrollbar`].filter(Boolean).join(' ');
   return /*#__PURE__*/_jsxs("div", {
     className: classes,
     children: [/*#__PURE__*/_jsx("div", {
@@ -128,7 +131,8 @@ export const Popup = props => {
           className: buttonClassName,
           disabled,
           noBackground,
-          setActive
+          setActive,
+          size: buttonSize
         })
       }) : /*#__PURE__*/_jsx(PopupTrigger, {
         active,
@@ -137,7 +141,8 @@ export const Popup = props => {
         className: buttonClassName,
         disabled,
         noBackground,
-        setActive
+        setActive,
+        size: buttonSize
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__content`,