@payloadcms/ui 3.0.0-beta.11 → 3.0.0-beta.111

package/dist/elements/Pill/index.js

@@ -1,68 +1,128 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import LinkWithDefault from 'next/link.js';
 const Link = LinkWithDefault.default;
 import React from 'react'; // TODO: abstract this out to support all routers
 import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
+import './index.scss';
 const baseClass = 'pill';
-const DraggablePill = (props)=>{
-    const { id, className } = props;
-    const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
-        id
-    });
-    return /*#__PURE__*/ React.createElement(StaticPill, {
-        ...props,
-        className: [
-            isDragging && `${baseClass}--is-dragging`,
-            className
-        ].filter(Boolean).join(' '),
-        elementProps: {
-            ...listeners,
-            ...attributes,
-            ref: setNodeRef,
-            style: {
-                transform
-            }
+const DraggablePill = props => {
+  const $ = _c(12);
+  const {
+    id,
+    className
+  } = props;
+  let t0;
+  if ($[0] !== id) {
+    t0 = {
+      id
+    };
+    $[0] = id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform
+  } = useDraggableSortable(t0);
+  const t1 = isDragging && `${baseClass}--is-dragging`;
+  let t2;
+  if ($[2] !== t1 || $[3] !== className) {
+    t2 = [t1, className].filter(Boolean);
+    $[2] = t1;
+    $[3] = className;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const t3 = t2.join(" ");
+  let t4;
+  if ($[5] !== transform || $[6] !== listeners || $[7] !== attributes || $[8] !== setNodeRef || $[9] !== props || $[10] !== t3) {
+    t4 = _jsx(StaticPill, {
+      ...props,
+      className: t3,
+      elementProps: {
+        ...listeners,
+        ...attributes,
+        ref: setNodeRef,
+        style: {
+          transform
         }
+      }
     });
+    $[5] = transform;
+    $[6] = listeners;
+    $[7] = attributes;
+    $[8] = setNodeRef;
+    $[9] = props;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
 };
-const StaticPill = (props)=>{
-    const { alignIcon = 'right', 'aria-checked': ariaChecked, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, children, className, draggable, elementProps, icon, onClick, pillStyle = 'light', rounded, to } = props;
-    const classes = [
-        baseClass,
-        `${baseClass}--style-${pillStyle}`,
-        className && className,
-        to && `${baseClass}--has-link`,
-        (to || onClick) && `${baseClass}--has-action`,
-        icon && `${baseClass}--has-icon`,
-        icon && `${baseClass}--align-icon-${alignIcon}`,
-        draggable && `${baseClass}--draggable`,
-        rounded && `${baseClass}--rounded`
-    ].filter(Boolean).join(' ');
-    let Element = 'div';
-    if (onClick && !to) Element = 'button';
-    if (to) Element = Link;
-    return /*#__PURE__*/ React.createElement(Element, {
-        ...elementProps,
-        "aria-checked": ariaChecked,
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-label": ariaLabel,
-        className: classes,
-        href: to || '',
-        onClick: onClick,
-        type: Element === 'button' ? 'button' : undefined
-    }, icon && alignIcon === 'left' && /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__icon`
-    }, icon), /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__label`
-    }, children), icon && alignIcon === 'right' && /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__icon`
-    }, icon));
+const StaticPill = props => {
+  const {
+    alignIcon = 'right',
+    'aria-checked': ariaChecked,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
+    children,
+    className,
+    draggable,
+    elementProps,
+    icon,
+    onClick,
+    pillStyle = 'light',
+    rounded,
+    to
+  } = props;
+  const classes = [baseClass, `${baseClass}--style-${pillStyle}`, className && className, to && `${baseClass}--has-link`, (to || onClick) && `${baseClass}--has-action`, icon && `${baseClass}--has-icon`, icon && `${baseClass}--align-icon-${alignIcon}`, draggable && `${baseClass}--draggable`, rounded && `${baseClass}--rounded`].filter(Boolean).join(' ');
+  let Element = 'div';
+  if (onClick && !to) {
+    Element = 'button';
+  }
+  if (to) {
+    Element = Link;
+  }
+  return /*#__PURE__*/_jsxs(Element, {
+    ...elementProps,
+    "aria-checked": ariaChecked,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-label": ariaLabel,
+    className: classes,
+    href: to || null,
+    onClick: onClick,
+    type: Element === 'button' ? 'button' : undefined,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: `${baseClass}__label`,
+      children: children
+    }), icon && /*#__PURE__*/_jsx("span", {
+      className: `${baseClass}__icon`,
+      children: icon
+    })]
+  });
 };
-export const Pill = (props)=>{
-    const { draggable } = props;
-    if (draggable) return /*#__PURE__*/ React.createElement(DraggablePill, props);
-    return /*#__PURE__*/ React.createElement(StaticPill, props);
+export const Pill = props => {
+  const {
+    draggable
+  } = props;
+  if (draggable) {
+    return /*#__PURE__*/_jsx(DraggablePill, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(StaticPill, {
+    ...props
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType } 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\nimport type { HTMLAttributes } from 'react'\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?: HTMLAttributes<HTMLElement> & {\n    ref: React.RefCallback<HTMLElement>\n  }\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 || ''}\n      onClick={onClick}\n      type={Element === 'button' ? 'button' : undefined}\n    >\n      {icon && alignIcon === 'left' && <span className={`${baseClass}__icon`}>{icon}</span>}\n      <span className={`${baseClass}__label`}>{children}</span>\n      {icon && alignIcon === 'right' && <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"],"names":["LinkWithDefault","Link","default","React","useDraggableSortable","baseClass","DraggablePill","props","id","className","attributes","isDragging","listeners","setNodeRef","transform","StaticPill","filter","Boolean","join","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","to","classes","Element","aria-checked","aria-controls","aria-expanded","aria-label","href","type","undefined","span","Pill"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,OAAOA,qBAAqB,eAAc;AAC1C,MAAMC,OAAOD,gBAAgBE,OAAO;AACpC,OAAOC,WAAW,QAAO,CAAC,iDAAiD;AAgC3E,SAASC,oBAAoB,QAAQ,qDAAoD;AAGzF,MAAMC,YAAY;AAElB,MAAMC,gBAAqC,CAACC;IAC1C,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAE,GAAGF;IAE1B,MAAM,EAAEG,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGV,qBAAqB;QACxFI;IACF;IAEA,qBACE,oBAACO;QACE,GAAGR,KAAK;QACTE,WAAW;YAACE,cAAc,CAAC,EAAEN,UAAU,aAAa,CAAC;YAAEI;SAAU,CAACO,MAAM,CAACC,SAASC,IAAI,CAAC;QACvFC,cAAc;YACZ,GAAGP,SAAS;YACZ,GAAGF,UAAU;YACbU,KAAKP;YACLQ,OAAO;gBACLP;YACF;QACF;;AAGN;AAEA,MAAMC,aAAkC,CAACR;IACvC,MAAM,EACJe,YAAY,OAAO,EACnB,gBAAgBC,WAAW,EAC3B,iBAAiBC,YAAY,EAC7B,iBAAiBC,YAAY,EAC7B,cAAcC,SAAS,EACvBC,QAAQ,EACRlB,SAAS,EACTmB,SAAS,EACTT,YAAY,EACZU,IAAI,EACJC,OAAO,EACPC,YAAY,OAAO,EACnBC,OAAO,EACPC,EAAE,EACH,GAAG1B;IAEJ,MAAM2B,UAAU;QACd7B;QACA,CAAC,EAAEA,UAAU,QAAQ,EAAE0B,UAAU,CAAC;QAClCtB,aAAaA;QACbwB,MAAM,CAAC,EAAE5B,UAAU,UAAU,CAAC;QAC7B4B,CAAAA,MAAMH,OAAM,KAAM,CAAC,EAAEzB,UAAU,YAAY,CAAC;QAC7CwB,QAAQ,CAAC,EAAExB,UAAU,UAAU,CAAC;QAChCwB,QAAQ,CAAC,EAAExB,UAAU,aAAa,EAAEiB,UAAU,CAAC;QAC/CM,aAAa,CAAC,EAAEvB,UAAU,WAAW,CAAC;QACtC2B,WAAW,CAAC,EAAE3B,UAAU,SAAS,CAAC;KACnC,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIiB,UAAqD;IAEzD,IAAIL,WAAW,CAACG,IAAIE,UAAU;IAC9B,IAAIF,IAAIE,UAAUlC;IAElB,qBACE,oBAACkC;QACE,GAAGhB,YAAY;QAChBiB,gBAAcb;QACdc,iBAAeb;QACfc,iBAAeb;QACfc,cAAYb;QACZjB,WAAWyB;QACXM,MAAMP,MAAM;QACZH,SAASA;QACTW,MAAMN,YAAY,WAAW,WAAWO;OAEvCb,QAAQP,cAAc,wBAAU,oBAACqB;QAAKlC,WAAW,CAAC,EAAEJ,UAAU,MAAM,CAAC;OAAGwB,qBACzE,oBAACc;QAAKlC,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;OAAGsB,WACxCE,QAAQP,cAAc,yBAAW,oBAACqB;QAAKlC,WAAW,CAAC,EAAEJ,UAAU,MAAM,CAAC;OAAGwB;AAGhF;AAEA,OAAO,MAAMe,OAA4B,CAACrC;IACxC,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW,qBAAO,oBAACtB,eAAkBC;IACzC,qBAAO,oBAACQ,YAAeR;AACzB,EAAC"}
+{"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

@@ -2,7 +2,7 @@
 
 .pill {
   font-size: 1rem;
-  line-height: base(1);
+  line-height: base(1.2);
   display: inline-flex;
   background: var(--theme-elevation-150);
   color: var(--theme-elevation-800);
@@ -12,9 +12,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
   border: 0;
-  padding: 0 base(0.25);
+  padding: 0 base(0.4);
   align-items: center;
   flex-shrink: 0;
+  gap: base(0.2);
 
   &--rounded {
     border-radius: var(--style-radius-l);
@@ -34,6 +35,7 @@
 
   .icon {
     flex-shrink: 0;
+    margin: base(0.1);
   }
 
   &__label {
@@ -42,10 +44,6 @@
     text-overflow: ellipsis;
   }
 
-  &__icon {
-    padding: calc(var(--base) / 4);
-  }
-
   &--has-action {
     cursor: pointer;
     text-decoration: none;
@@ -56,27 +54,18 @@
   }
 
   &--has-icon {
+    padding-inline-start: base(0.4);
+    padding-inline-end: base(0.3);
+
     svg {
       display: block;
     }
   }
 
-  [dir='rtl'] &--align-icon-left {
-    padding-right: 0;
-    padding-left: 10px;
-  }
-
-  [dir='rtl'] &--align-icon-right {
-    padding-right: 10px;
-    padding-left: 0;
-  }
-
   &--align-icon-left {
-    padding-left: 0;
-  }
-
-  &--align-icon-right {
-    padding-right: 0;
+    flex-direction: row-reverse;
+    padding-inline-start: base(0.1);
+    padding-inline-end: base(0.4);
   }
 
   &--style-white {
@@ -111,12 +100,18 @@
   }
 
   &--style-warning {
-    background: var(--theme-warning-500);
+    background: var(--theme-warning-150);
+    color: var(--theme-warning-800);
   }
 
   &--style-success {
-    background: var(--theme-success-500);
-    color: var(--color-base-800);
+    background: var(--theme-success-150);
+    color: var(--theme-success-800);
+  }
+
+  &--style-error {
+    background: var(--theme-error-150);
+    color: var(--theme-error-800);
   }
 
   &--style-dark {
@@ -138,21 +133,3 @@
     }
   }
 }
-
-html[data-theme='dark'] {
-  .pill {
-    &--style-error {
-      background: var(--theme-error-500);
-      color: var(--color-base-1000);
-    }
-  }
-}
-
-html[data-theme='light'] {
-  .pill {
-    &--style-error {
-      background: var(--theme-error-250);
-      color: var(--theme-error-750);
-    }
-  }
-}

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

@@ -13,7 +13,7 @@ type MenuButtonProps = {
     className?: string;
     href?: LinkProps['href'];
     id?: string;
-    onClick?: () => void;
+    onClick?: (e?: React.MouseEvent) => void;
 };
 export declare const Button: React.FC<MenuButtonProps>;
 export {};

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,MAAM,IAAI,CAAA;CACrB,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,CAmD5C,CAAA"}

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

@@ -1,53 +1,62 @@
 'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import LinkImport from 'next/link.js';
 import * as React from 'react'; // TODO: abstract this out to support all routers
+import './index.scss';
 const Link = LinkImport.default || LinkImport;
 const baseClass = 'popup-button-list';
-export const ButtonGroup = ({ buttonSize = 'default', children, className, textAlign = 'left' })=>{
-    const classes = [
-        baseClass,
-        className,
-        `${baseClass}__text-align--${textAlign}`,
-        `${baseClass}__button-size--${buttonSize}`
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes
-    }, children);
+export const ButtonGroup = ({
+  buttonSize = 'default',
+  children,
+  className,
+  textAlign = 'left'
+}) => {
+  const classes = [baseClass, className, `${baseClass}__text-align--${textAlign}`, `${baseClass}__button-size--${buttonSize}`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    children: children
+  });
 };
-export const Button = ({ id, active, children, className, href, onClick })=>{
-    const classes = [
-        `${baseClass}__button`,
-        active && `${baseClass}__button--selected`,
-        className
-    ].filter(Boolean).join(' ');
-    if (href) {
-        return /*#__PURE__*/ React.createElement(Link, {
-            className: classes,
-            href: href,
-            id: id,
-            onClick: ()=>{
-                if (onClick) {
-                    onClick();
-                }
-            }
-        }, children);
-    }
-    if (onClick) {
-        return /*#__PURE__*/ React.createElement("button", {
-            className: classes,
-            id: id,
-            onClick: ()=>{
-                if (onClick) {
-                    onClick();
-                }
-            },
-            type: "button"
-        }, children);
-    }
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes,
-        id: id
-    }, children);
+export const Button = ({
+  id,
+  active,
+  children,
+  className,
+  href,
+  onClick
+}) => {
+  const classes = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className].filter(Boolean).join(' ');
+  if (href) {
+    return /*#__PURE__*/_jsx(Link, {
+      className: classes,
+      href: href,
+      id: id,
+      onClick: e => {
+        if (onClick) {
+          onClick(e);
+        }
+      },
+      children: children
+    });
+  }
+  if (onClick) {
+    return /*#__PURE__*/_jsx("button", {
+      className: classes,
+      id: id,
+      onClick: e => {
+        if (onClick) {
+          onClick(e);
+        }
+      },
+      type: "button",
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    id: id,
+    children: children
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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?: () => 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={() => {\n          if (onClick) {\n            onClick()\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={() => {\n          if (onClick) {\n            onClick()\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"],"names":["LinkImport","React","Link","default","baseClass","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","div","Button","id","active","href","onClick","button","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,OAAOA,gBAAgB,eAAc;AACrC,YAAYC,WAAW,QAAO,CAAC,iDAAiD;AAIhF,MAAMC,OAAQF,WAAWG,OAAO,IAAIH;AAEpC,MAAMI,YAAY;AAElB,OAAO,MAAMC,cAKR,CAAC,EAAEC,aAAa,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,MAAM,EAAE;IACvE,MAAMC,UAAU;QACdN;QACAI;QACA,CAAC,EAAEJ,UAAU,cAAc,EAAEK,UAAU,CAAC;QACxC,CAAC,EAAEL,UAAU,eAAe,EAAEE,WAAW,CAAC;KAC3C,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC;IACR,qBAAO,oBAACC;QAAIN,WAAWE;OAAUH;AACnC,EAAC;AAWD,OAAO,MAAMQ,SAAoC,CAAC,EAChDC,EAAE,EACFC,MAAM,EACNV,QAAQ,EACRC,SAAS,EACTU,IAAI,EACJC,OAAO,EACR;IACC,MAAMT,UAAU;QAAC,CAAC,EAAEN,UAAU,QAAQ,CAAC;QAAEa,UAAU,CAAC,EAAEb,UAAU,kBAAkB,CAAC;QAAEI;KAAU,CAC5FG,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIK,MAAM;QACR,qBACE,oBAAChB;YACCM,WAAWE;YACXQ,MAAMA;YACNF,IAAIA;YACJG,SAAS;gBACP,IAAIA,SAAS;oBACXA;gBACF;YACF;WAECZ;IAGP;IAEA,IAAIY,SAAS;QACX,qBACE,oBAACC;YACCZ,WAAWE;YACXM,IAAIA;YACJG,SAAS;gBACP,IAAIA,SAAS;oBACXA;gBACF;YACF;YACAE,MAAK;WAEJd;IAGP;IAEA,qBACE,oBAACO;QAAIN,WAAWE;QAASM,IAAIA;OAC1BT;AAGP,EAAC"}
+{"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":[]}

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

@@ -5,7 +5,10 @@ export type PopupTriggerProps = {
     button: React.ReactNode;
     buttonType: 'custom' | 'default' | 'none';
     className?: string;
+    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":"AAAA,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,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkCpD,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

@@ -1,35 +1,48 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import './index.scss';
 const baseClass = 'popup-button';
-export const PopupTrigger = (props)=>{
-    const { active, button, buttonType, className, setActive } = props;
-    const classes = [
-        baseClass,
-        className,
-        `${baseClass}--${buttonType}`
-    ].filter(Boolean).join(' ');
-    const handleClick = ()=>{
-        setActive(!active);
-    };
-    if (buttonType === 'none') {
-        return null;
-    }
-    if (buttonType === 'custom') {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: classes,
-            onClick: handleClick,
-            onKeyDown: (e)=>{
-                if (e.key === 'Enter') handleClick();
-            },
-            role: "button",
-            tabIndex: 0
-        }, button);
-    }
-    return /*#__PURE__*/ React.createElement("button", {
-        className: classes,
-        onClick: ()=>setActive(!active),
-        tabIndex: 0,
-        type: "button"
-    }, button);
+export const PopupTrigger = props => {
+  const {
+    active,
+    button,
+    buttonType,
+    className,
+    disabled,
+    noBackground,
+    setActive,
+    size
+  } = props;
+  const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`, size && `${baseClass}--size-${size}`].filter(Boolean).join(' ');
+  const handleClick = () => {
+    setActive(!active);
+  };
+  if (buttonType === 'none') {
+    return null;
+  }
+  if (buttonType === 'custom') {
+    return /*#__PURE__*/_jsx("div", {
+      className: classes,
+      onClick: handleClick,
+      onKeyDown: e => {
+        if (e.key === 'Enter') {
+          handleClick();
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      children: button
+    });
+  }
+  return /*#__PURE__*/_jsx("button", {
+    className: classes,
+    disabled: disabled,
+    onClick: handleClick,
+    tabIndex: 0,
+    type: "button",
+    children: button
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["import 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  setActive: (active: boolean) => void\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, setActive } = props\n\n  const classes = [baseClass, className, `${baseClass}--${buttonType}`].filter(Boolean).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 className={classes} onClick={() => setActive(!active)} tabIndex={0} type=\"button\">\n      {button}\n    </button>\n  )\n}\n"],"names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","setActive","classes","filter","Boolean","join","handleClick","div","onClick","onKeyDown","e","key","role","tabIndex","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAUlB,OAAO,MAAMC,eAA4C,CAACC;IACxD,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGL;IAE7D,MAAMM,UAAU;QAACR;QAAWM;QAAW,CAAC,EAAEN,UAAU,EAAE,EAAEK,WAAW,CAAC;KAAC,CAACI,MAAM,CAACC,SAASC,IAAI,CAAC;IAE3F,MAAMC,cAAc;QAClBL,UAAU,CAACJ;IACb;IAEA,IAAIE,eAAe,QAAQ;QACzB,OAAO;IACT;IAEA,IAAIA,eAAe,UAAU;QAC3B,qBACE,oBAACQ;YACCP,WAAWE;YACXM,SAASF;YACTG,WAAW,CAACC;gBACV,IAAIA,EAAEC,GAAG,KAAK,SAASL;YACzB;YACAM,MAAK;YACLC,UAAU;WAETf;IAGP;IAEA,qBACE,oBAACA;QAAOE,WAAWE;QAASM,SAAS,IAAMP,UAAU,CAACJ;QAASgB,UAAU;QAAGC,MAAK;OAC9EhB;AAGP,EAAC"}
+{"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

@@ -7,8 +7,23 @@
   font-size: inherit;
   line-height: inherit;
   font-family: inherit;
-  background: transparent;
   border: 0;
   cursor: pointer;
   display: inline-flex;
+
+  &--background {
+    background: transparent;
+  }
+
+  &--size-small {
+    padding: base(0.4);
+  }
+
+  &--size-medium {
+    padding: base(0.6);
+  }
+
+  &--size-large {
+    padding: base(0.8);
+  }
 }