@payloadcms/ui 3.0.0-canary.852f9fc → 3.0.0-canary.8789b0b

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","collectionDefaults","isNumber","React","ChevronIcon","useTranslation","Popup","PopupList","baseClass","defaultLimits","admin","pagination","limits","PerPage","t0","$","defaultLimit","t1","handleChange","limit","t2","undefined","t","limitToUse","t3","t4","t5","close","_jsx","ButtonGroup","children","map","limitNumber","i","_jsxs","Button","className","filter","Boolean","join","onClick","direction","button","render"],"sources":["../../../src/elements/PerPage/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { collectionDefaults, isNumber } from 'payload/shared'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'per-page'\n\nconst defaultLimits = collectionDefaults.admin.pagination.limits\n\nexport type PerPageProps = {\n  defaultLimit?: number\n  handleChange?: (limit: number) => void\n  limit: number\n  limits: number[]\n  resetPage?: boolean\n}\n\nexport const PerPage: React.FC<PerPageProps> = ({\n  defaultLimit = 10,\n  handleChange,\n  limit,\n  limits = defaultLimits,\n}) => {\n  const { t } = useTranslation()\n\n  const limitToUse = isNumber(limit) ? limit : defaultLimit\n\n  return (\n    <div className={baseClass}>\n      <Popup\n        button={\n          <div className={`${baseClass}__base-button`}>\n            <span>{t('general:perPage', { limit: limitToUse })}</span>\n            &nbsp;\n            <ChevronIcon className={`${baseClass}__icon`} />\n          </div>\n        }\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            {limits.map((limitNumber, i) => (\n              <PopupList.Button\n                className={[\n                  `${baseClass}__button`,\n                  limitNumber === limitToUse && `${baseClass}__button-active`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                key={i}\n                onClick={() => {\n                  close()\n                  if (handleChange) {\n                    handleChange(limitNumber)\n                  }\n                }}\n              >\n                {limitNumber === limitToUse && (\n                  <div className={`${baseClass}__chevron`}>\n                    <ChevronIcon direction=\"right\" />\n                  </div>\n                )}\n                &nbsp;\n                <span>{limitNumber}</span>\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n        )}\n        size=\"small\"\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA;AACA,SAASC,kBAAkB,EAAEC,QAAQ,QAAQ;AAC7C,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,aAAA,GAAgBR,kBAAA,CAAmBS,KAAK,CAACC,UAAU,CAACC,MAAM;AAUhE,OAAO,MAAMC,OAAA,GAAkCC,EAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAAC;IAAAgB,YAAA,EAAAC,EAAA;IAAAC,YAAA;IAAAC,KAAA;IAAAP,MAAA,EAAAQ;EAAA,IAAAN,EAK/C;EAJC,MAAAE,YAAA,GAAAC,EAAiB,KAAAI,SAAA,QAAjBJ,EAAiB;EAGjB,MAAAL,MAAA,GAAAQ,EAAsB,KAAAC,SAAA,GAAAZ,aAAA,GAAtBW,EAAsB;EAEtB;IAAAE;EAAA,IAAcjB,cAAA;EAEd,MAAAkB,UAAA,GAAmBrB,QAAA,CAASiB,KAAA,IAASA,KAAA,GAAQH,YAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAT,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAO,CAAA,IAAAP,CAAA,QAAAH,MAAA,IAAAG,CAAA,QAAAG,YAAA;IAAA,IAAAO,EAAA;IAAA,IAAAV,CAAA,QAAAH,MAAA,IAAAG,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAG,YAAA;MAa/BO,EAAA,GAAAC,EAAA;QAAC;UAAAC;QAAA,IAAAD,EAAS;QAAA,OAChBE,IAAA,CAAArB,SAAA,CAAAsB,WAAA;UAAAC,QAAA,EACGlB,MAAA,CAAAmB,GAAA,EAAAC,WAAA,EAAAC,CAAA,KACCC,KAAA,CAAA3B,SAAA,CAAA4B,MAAA;YAAAC,SAAA,EACa,CACT,GAAA5B,SAAA,UAAsB,EACtBwB,WAAA,KAAgBT,UAAA,IAAc,GAAAf,SAAA,iBAA6B,EAAA6B,MAAA,CAAAC,OAEnD,EAAAC,IAAA,CACF;YAAAC,OAAA,EAAAA,CAAA;cAGNb,KAAA;cAAA,IACIT,YAAA;gBACFA,YAAA,CAAac,WAAA;cAAA;YAAA;YAAAF,QAAA,GAIhBE,WAAA,KAAgBT,UAAA,IACfK,IAAA,CAAC;cAAAQ,SAAA,EAAe,GAAA5B,SAAA,WAAuB;cAAAsB,QAAA,EACrCF,IAAA,CAAAxB,WAAA;gBAAAqC,SAAA,EAAuB;cAAA,C;gBAEzB,QAEFb,IAAA,CAAC;cAAAE,QAAA,EAAME;YAAA,C;aAdFC,CAAA;QAAA,C;;;;;;;;;IApBjBT,EAAA,GAAAI,IAAA,CAAC;MAAAQ,SAAA,EAAA5B,SAAA;MAAAsB,QAAA,EACCF,IAAA,CAAAtB,KAAA;QAAAoC,MAAA,EAEIR,KAAA,CAAC;UAAAE,SAAA,EAAe,GAAA5B,SAAA,eAA2B;UAAAsB,QAAA,GACzCF,IAAA,CAAC;YAAAE,QAAA,EAAMR,CAAA,CAAE;cAAAH,KAAA,EAA4BI;YAAA,CAAW;UAAA,C,GAAU,QAE1DK,IAAA,CAAAxB,WAAA;YAAAgC,SAAA,EAAwB,GAAA5B,SAAA;UAAoB,C;;yBAGhC;QAAAmC,MAAA,EACRlB,E;cA6BH;MAAA,C;;;;;;;;;;SAvCTD,E;CA2CJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","collectionDefaults","isNumber","React","ChevronIcon","useTranslation","Popup","PopupList","baseClass","defaultLimits","admin","pagination","limits","PerPage","t0","$","defaultLimit","t1","handleChange","limit","t2","undefined","t","limitToUse","t3","t4","t5","close","_jsx","ButtonGroup","children","map","limitNumber","i","_jsxs","Button","className","filter","Boolean","join","onClick","direction","size","button","render"],"sources":["../../../src/elements/PerPage/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { collectionDefaults, isNumber } from 'payload/shared'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'per-page'\n\nconst defaultLimits = collectionDefaults.admin.pagination.limits\n\nexport type PerPageProps = {\n  readonly defaultLimit?: number\n  readonly handleChange?: (limit: number) => void\n  readonly limit: number\n  readonly limits: number[]\n  readonly resetPage?: boolean\n}\n\nexport const PerPage: React.FC<PerPageProps> = ({\n  defaultLimit = 10,\n  handleChange,\n  limit,\n  limits = defaultLimits,\n}) => {\n  const { t } = useTranslation()\n\n  const limitToUse = isNumber(limit) ? limit : defaultLimit\n\n  return (\n    <div className={baseClass}>\n      <Popup\n        button={\n          <div className={`${baseClass}__base-button`}>\n            <span>{t('general:perPage', { limit: limitToUse })}</span>\n            &nbsp;\n            <ChevronIcon className={`${baseClass}__icon`} />\n          </div>\n        }\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            {limits.map((limitNumber, i) => (\n              <PopupList.Button\n                className={[\n                  `${baseClass}__button`,\n                  limitNumber === limitToUse && `${baseClass}__button-active`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                key={i}\n                onClick={() => {\n                  close()\n                  if (handleChange) {\n                    handleChange(limitNumber)\n                  }\n                }}\n              >\n                {limitNumber === limitToUse && (\n                  <div className={`${baseClass}__chevron`}>\n                    <ChevronIcon direction=\"right\" size=\"small\" />\n                  </div>\n                )}\n                &nbsp;\n                <span>{limitNumber}</span>\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n        )}\n        size=\"small\"\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA;AACA,SAASC,kBAAkB,EAAEC,QAAQ,QAAQ;AAC7C,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,aAAA,GAAgBR,kBAAA,CAAmBS,KAAK,CAACC,UAAU,CAACC,MAAM;AAUhE,OAAO,MAAMC,OAAA,GAAkCC,EAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAAC;IAAAgB,YAAA,EAAAC,EAAA;IAAAC,YAAA;IAAAC,KAAA;IAAAP,MAAA,EAAAQ;EAAA,IAAAN,EAK/C;EAJC,MAAAE,YAAA,GAAAC,EAAiB,KAAAI,SAAA,QAAjBJ,EAAiB;EAGjB,MAAAL,MAAA,GAAAQ,EAAsB,KAAAC,SAAA,GAAAZ,aAAA,GAAtBW,EAAsB;EAEtB;IAAAE;EAAA,IAAcjB,cAAA;EAEd,MAAAkB,UAAA,GAAmBrB,QAAA,CAASiB,KAAA,IAASA,KAAA,GAAQH,YAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAT,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAO,CAAA,IAAAP,CAAA,QAAAH,MAAA,IAAAG,CAAA,QAAAG,YAAA;IAAA,IAAAO,EAAA;IAAA,IAAAV,CAAA,QAAAH,MAAA,IAAAG,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAG,YAAA;MAa/BO,EAAA,GAAAC,EAAA;QAAC;UAAAC;QAAA,IAAAD,EAAS;QAAA,OAChBE,IAAA,CAAArB,SAAA,CAAAsB,WAAA;UAAAC,QAAA,EACGlB,MAAA,CAAAmB,GAAA,EAAAC,WAAA,EAAAC,CAAA,KACCC,KAAA,CAAA3B,SAAA,CAAA4B,MAAA;YAAAC,SAAA,EACa,CACT,GAAA5B,SAAA,UAAsB,EACtBwB,WAAA,KAAgBT,UAAA,IAAc,GAAAf,SAAA,iBAA6B,EAAA6B,MAAA,CAAAC,OAEnD,EAAAC,IAAA,CACF;YAAAC,OAAA,EAAAA,CAAA;cAGNb,KAAA;cAAA,IACIT,YAAA;gBACFA,YAAA,CAAac,WAAA;cAAA;YAAA;YAAAF,QAAA,GAIhBE,WAAA,KAAgBT,UAAA,IACfK,IAAA,CAAC;cAAAQ,SAAA,EAAe,GAAA5B,SAAA,WAAuB;cAAAsB,QAAA,EACrCF,IAAA,CAAAxB,WAAA;gBAAAqC,SAAA,EAAuB;gBAAAC,IAAA,EAAa;cAAA,C;gBAEtC,QAEFd,IAAA,CAAC;cAAAE,QAAA,EAAME;YAAA,C;aAdFC,CAAA;QAAA,C;;;;;;;;;IApBjBT,EAAA,GAAAI,IAAA,CAAC;MAAAQ,SAAA,EAAA5B,SAAA;MAAAsB,QAAA,EACCF,IAAA,CAAAtB,KAAA;QAAAqC,MAAA,EAEIT,KAAA,CAAC;UAAAE,SAAA,EAAe,GAAA5B,SAAA,eAA2B;UAAAsB,QAAA,GACzCF,IAAA,CAAC;YAAAE,QAAA,EAAMR,CAAA,CAAE;cAAAH,KAAA,EAA4BI;YAAA,CAAW;UAAA,C,GAAU,QAE1DK,IAAA,CAAAxB,WAAA;YAAAgC,SAAA,EAAwB,GAAA5B,SAAA;UAAoB,C;;yBAGhC;QAAAoC,MAAA,EACRnB,E;cA6BH;MAAA,C;;;;;;;;;;SAvCTD,E;CA2CJ","ignoreList":[]}

package/dist/elements/Pill/index.scss

@@ -15,6 +15,7 @@
   padding: 0 base(0.4);
   align-items: center;
   flex-shrink: 0;
+  gap: base(0.2);
 
   &--rounded {
     border-radius: var(--style-radius-l);
@@ -54,7 +55,8 @@
 
   &--has-icon {
     padding-inline-start: base(0.4);
-    padding-inline-end: base(0.1);
+    padding-inline-end: base(0.3);
+
     svg {
       display: block;
     }

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

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') {\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;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,SAAS;UACrBL,WAAA;QACF;MACF;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

@@ -14,4 +14,16 @@
   &--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;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,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,CAoLtC,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

@@ -13,6 +13,7 @@ export const Popup = props => {
     boundingRef,
     button,
     buttonClassName,
+    buttonSize,
     buttonType = 'default',
     caret = true,
     children,
@@ -114,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", {
@@ -130,7 +131,8 @@ export const Popup = props => {
           className: buttonClassName,
           disabled,
           noBackground,
-          setActive
+          setActive,
+          size: buttonSize
         })
       }) : /*#__PURE__*/_jsx(PopupTrigger, {
         active,
@@ -139,7 +141,8 @@ export const Popup = props => {
         className: buttonClassName,
         disabled,
         noBackground,
-        setActive
+        setActive,
+        size: buttonSize
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__content`,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","boundingRef","button","buttonClassName","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","active","setActive","setVerticalAlign","setHorizontalAlign","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","_jsxs","_jsx","onMouseEnter","onMouseLeave","ref","close"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  buttonClassName?: string\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  forceOpen?: boolean\n  horizontalAlign?: 'center' | 'left' | 'right'\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleOpen?: (active: boolean) => void\n  render?: (any) => React.ReactNode\n  showOnHover?: boolean\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    noBackground,\n    onToggleOpen,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign: verticalAlignFromProps = 'top',\n  } = props\n  const { height: windowHeight, width: windowWidth } = useWindowInfo()\n  const [intersectionRef, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-100px 0px 0px 0px',\n    threshold: 1,\n  })\n\n  const contentRef = useRef(null)\n  const [active, setActive] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setPosition = useCallback(\n    ({ horizontal = false, vertical = false }) => {\n      if (contentRef.current) {\n        const bounds = contentRef.current.getBoundingClientRect()\n\n        const {\n          bottom: contentBottomPos,\n          left: contentLeftPos,\n          right: contentRightPos,\n          top: contentTopPos,\n        } = bounds\n\n        let boundingTopPos = 100\n        let boundingRightPos = document.documentElement.clientWidth\n        let boundingBottomPos = document.documentElement.clientHeight\n        let boundingLeftPos = 0\n\n        if (boundingRef?.current) {\n          ;({\n            bottom: boundingBottomPos,\n            left: boundingLeftPos,\n            right: boundingRightPos,\n            top: boundingTopPos,\n          } = boundingRef.current.getBoundingClientRect())\n        }\n\n        if (horizontal) {\n          if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n            setHorizontalAlign('right')\n          } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n            setHorizontalAlign('left')\n          }\n        }\n\n        if (vertical) {\n          if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n            setVerticalAlign('bottom')\n          } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n            setVerticalAlign('top')\n          }\n        }\n      }\n    },\n    [boundingRef],\n  )\n\n  const handleClickOutside = useCallback(\n    (e) => {\n      if (contentRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef],\n  )\n\n  useEffect(() => {\n    setPosition({ horizontal: true })\n  }, [intersectionEntry, setPosition, windowWidth])\n\n  useEffect(() => {\n    setPosition({ vertical: true })\n  }, [intersectionEntry, setPosition, windowHeight])\n\n  useEffect(() => {\n    if (typeof onToggleOpen === 'function') {\n      onToggleOpen(active)\n    }\n\n    if (active) {\n      document.addEventListener('mousedown', handleClickOutside)\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [active, handleClickOutside, onToggleOpen])\n\n  useEffect(() => {\n    setActive(forceOpen)\n  }, [forceOpen])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    `${baseClass}--v-align-${verticalAlign}`,\n    `${baseClass}--h-align-${horizontalAlign}`,\n    active && `${baseClass}--active`,\n    showScrollbar && `${baseClass}--show-scrollbar`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__trigger-wrap`}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n          >\n            <PopupTrigger\n              {...{\n                active,\n                button,\n                buttonType,\n                className: buttonClassName,\n                disabled,\n                noBackground,\n                setActive,\n              }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{\n              active,\n              button,\n              buttonType,\n              className: buttonClassName,\n              disabled,\n              noBackground,\n              setActive,\n            }}\n          />\n        )}\n      </div>\n\n      <div className={`${baseClass}__content`} ref={contentRef}>\n        <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n          <div className={`${baseClass}__scroll-container`}>\n            <div className={`${baseClass}__scroll-content`}>\n              {render && render({ close: () => setActive(false) })}\n              {children && children}\n            </div>\n          </div>\n        </div>\n\n        {caret && <div className={`${baseClass}__caret`} />}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","boundingRef","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","active","setActive","setVerticalAlign","setHorizontalAlign","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","_jsxs","_jsx","onMouseEnter","onMouseLeave","ref","close"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  buttonClassName?: string\n  buttonSize?: 'large' | 'medium' | 'small'\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  forceOpen?: boolean\n  horizontalAlign?: 'center' | 'left' | 'right'\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleOpen?: (active: boolean) => void\n  render?: (any) => React.ReactNode\n  showOnHover?: boolean\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    noBackground,\n    onToggleOpen,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign: verticalAlignFromProps = 'top',\n  } = props\n  const { height: windowHeight, width: windowWidth } = useWindowInfo()\n  const [intersectionRef, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-100px 0px 0px 0px',\n    threshold: 1,\n  })\n\n  const contentRef = useRef(null)\n  const [active, setActive] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setPosition = useCallback(\n    ({ horizontal = false, vertical = false }) => {\n      if (contentRef.current) {\n        const bounds = contentRef.current.getBoundingClientRect()\n\n        const {\n          bottom: contentBottomPos,\n          left: contentLeftPos,\n          right: contentRightPos,\n          top: contentTopPos,\n        } = bounds\n\n        let boundingTopPos = 100\n        let boundingRightPos = document.documentElement.clientWidth\n        let boundingBottomPos = document.documentElement.clientHeight\n        let boundingLeftPos = 0\n\n        if (boundingRef?.current) {\n          ;({\n            bottom: boundingBottomPos,\n            left: boundingLeftPos,\n            right: boundingRightPos,\n            top: boundingTopPos,\n          } = boundingRef.current.getBoundingClientRect())\n        }\n\n        if (horizontal) {\n          if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n            setHorizontalAlign('right')\n          } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n            setHorizontalAlign('left')\n          }\n        }\n\n        if (vertical) {\n          if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n            setVerticalAlign('bottom')\n          } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n            setVerticalAlign('top')\n          }\n        }\n      }\n    },\n    [boundingRef],\n  )\n\n  const handleClickOutside = useCallback(\n    (e) => {\n      if (contentRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef],\n  )\n\n  useEffect(() => {\n    setPosition({ horizontal: true })\n  }, [intersectionEntry, setPosition, windowWidth])\n\n  useEffect(() => {\n    setPosition({ vertical: true })\n  }, [intersectionEntry, setPosition, windowHeight])\n\n  useEffect(() => {\n    if (typeof onToggleOpen === 'function') {\n      onToggleOpen(active)\n    }\n\n    if (active) {\n      document.addEventListener('mousedown', handleClickOutside)\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [active, handleClickOutside, onToggleOpen])\n\n  useEffect(() => {\n    setActive(forceOpen)\n  }, [forceOpen])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    buttonSize && `${baseClass}--button-size-${buttonSize}`,\n    `${baseClass}--v-align-${verticalAlign}`,\n    `${baseClass}--h-align-${horizontalAlign}`,\n    active && `${baseClass}--active`,\n    showScrollbar && `${baseClass}--show-scrollbar`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__trigger-wrap`}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n          >\n            <PopupTrigger\n              {...{\n                active,\n                button,\n                buttonType,\n                className: buttonClassName,\n                disabled,\n                noBackground,\n                setActive,\n                size: buttonSize,\n              }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{\n              active,\n              button,\n              buttonType,\n              className: buttonClassName,\n              disabled,\n              noBackground,\n              setActive,\n              size: buttonSize,\n            }}\n          />\n        )}\n      </div>\n\n      <div className={`${baseClass}__content`} ref={contentRef}>\n        <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n          <div className={`${baseClass}__scroll-container`}>\n            <div className={`${baseClass}__scroll-content`}>\n              {render && render({ close: () => setActive(false) })}\n              {children && children}\n            </div>\n          </div>\n        </div>\n\n        {caret && <div className={`${baseClass}__caret`} />}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Popup/index.scss

@@ -7,6 +7,7 @@
   --popup-caret-size: 10px;
   --popup-x-padding: calc(var(--base) * 0.33);
   --popup-padding: calc(var(--base) * 0.5);
+  --button-size-offset: -8px;
   position: relative;
 
   &__trigger-wrap {
@@ -83,6 +84,22 @@
     }
   }
 
+  ////////////////////////////////
+  /// BUTTON SIZE
+  ////////////////////////////////
+
+  &--button-size-small {
+    --button-size-offset: -8px;
+  }
+
+  &--button-size-medium {
+    --button-size-offset: -4px;
+  }
+
+  &--button-size-large {
+    --button-size-offset: 0px;
+  }
+
   ////////////////////////////////
   // HORIZONTAL ALIGNMENT
   ////////////////////////////////
@@ -123,7 +140,7 @@
 
   &--h-align-right {
     .popup__content {
-      right: 0;
+      right: var(--button-size-offset);
     }
 
     .popup__caret {

package/dist/elements/PreviewButton/usePreviewURL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CAsEnB,CAAA"}
+{"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CA8EnB,CAAA"}

package/dist/elements/PreviewButton/usePreviewURL.js

@@ -1,5 +1,6 @@
 'use client';
 
+import * as qs from 'qs-esm';
 import { useCallback, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { useConfig } from '../../providers/Config/index.js';
@@ -10,13 +11,15 @@ export const usePreviewURL = () => {
   const {
     id,
     collectionSlug,
-    globalSlug
+    globalSlug,
+    versions
   } = useDocumentInfo();
   const [isLoading, setIsLoading] = useState(false);
   const [previewURL, setPreviewURL] = useState('');
   const {
     code: locale
   } = useLocale();
+  const hasVersions = versions?.totalDocs > 0;
   const {
     config: {
       routes: {
@@ -48,7 +51,11 @@ export const usePreviewURL = () => {
       if (globalSlug) {
         url = `${url}/globals/${globalSlug}/preview`;
       }
-      const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`);
+      const params = {
+        draft: hasVersions ? 'true' : 'false',
+        locale: locale || undefined
+      };
+      const res = await fetch(`${url}?${qs.stringify(params)}`);
       if (!res.ok) {
         throw new Error();
       }
@@ -67,8 +74,9 @@ export const usePreviewURL = () => {
       isGeneratingPreviewURL.current = false;
       toast.error(t('error:previewing'));
     }
-  }, [serverURL, api, collectionSlug, globalSlug, id, locale, t]);
+  }, [serverURL, api, collectionSlug, globalSlug, hasVersions, locale, id, t]);
   return {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     generatePreviewURL,
     isLoading,
     label: isLoading ? t('general:loading') : t('version:preview'),

package/dist/elements/PreviewButton/usePreviewURL.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePreviewURL.js","names":["useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","config","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","res","fetch","ok","Error","newPreviewURL","json","window","open","err","error","label"],"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n  generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n  isLoading: boolean\n  label: string\n  previewURL: string\n} => {\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const isGeneratingPreviewURL = useRef(false)\n\n  // we need to regenerate the preview URL every time the button is clicked\n  // to do this we need to fetch the document data fresh from the API\n  // this will ensure the latest data is used when generating the preview URL\n  const generatePreviewURL = useCallback(\n    async ({ openPreviewWindow = false }) => {\n      if (isGeneratingPreviewURL.current) {\n        return\n      }\n      isGeneratingPreviewURL.current = true\n\n      try {\n        setIsLoading(true)\n\n        let url = `${serverURL}${api}`\n        if (collectionSlug) {\n          url = `${url}/${collectionSlug}/${id}/preview`\n        }\n        if (globalSlug) {\n          url = `${url}/globals/${globalSlug}/preview`\n        }\n\n        const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`)\n\n        if (!res.ok) {\n          throw new Error()\n        }\n        const newPreviewURL = await res.json()\n        if (!newPreviewURL) {\n          throw new Error()\n        }\n        setPreviewURL(newPreviewURL)\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        if (openPreviewWindow) {\n          window.open(newPreviewURL, '_blank')\n        }\n      } catch (err) {\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        toast.error(t('error:previewing'))\n      }\n    },\n    [serverURL, api, collectionSlug, globalSlug, id, locale, t],\n  )\n\n  return {\n    generatePreviewURL,\n    isLoading,\n    label: isLoading ? t('general:loading') : t('version:preview'),\n    previewURL,\n  }\n}\n"],"mappings":"AAAA;;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAQ;AAEtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,aAAA,GAAgBA,CAAA;EAM3B,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC;EAAU,CAAE,GAAGN,eAAA;EAE3C,MAAM,CAACO,SAAA,EAAWC,YAAA,CAAa,GAAGX,QAAA,CAAS;EAC3C,MAAM,CAACY,UAAA,EAAYC,aAAA,CAAc,GAAGb,QAAA,CAAS;EAC7C,MAAM;IAAEc,IAAA,EAAMC;EAAM,CAAE,GAAGX,SAAA;EAEzB,MAAM;IACJY,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGjB,SAAA;EAEJ,MAAM;IAAEkB;EAAC,CAAE,GAAGf,cAAA;EAEd,MAAMgB,sBAAA,GAAyBtB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAMuB,kBAAA,GAAqBxB,WAAA,CACzB,OAAO;IAAEyB,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;MAClC;IACF;IACAH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFb,YAAA,CAAa;MAEb,IAAIc,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIV,cAAA,EAAgB;QAClBiB,GAAA,GAAM,GAAGA,GAAA,IAAOjB,cAAA,IAAkBD,EAAA,UAAY;MAChD;MACA,IAAIE,UAAA,EAAY;QACdgB,GAAA,GAAM,GAAGA,GAAA,YAAehB,UAAA,UAAoB;MAC9C;MAEA,MAAMiB,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGF,GAAA,GAAMV,MAAA,GAAS,WAAWA,MAAA,EAAQ,GAAG,IAAI;MAEpE,IAAI,CAACW,GAAA,CAAIE,EAAE,EAAE;QACX,MAAM,IAAIC,KAAA;MACZ;MACA,MAAMC,aAAA,GAAgB,MAAMJ,GAAA,CAAIK,IAAI;MACpC,IAAI,CAACD,aAAA,EAAe;QAClB,MAAM,IAAID,KAAA;MACZ;MACAhB,aAAA,CAAciB,aAAA;MACdnB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmB;QACrBS,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;MAC7B;IACF,EAAE,OAAOI,GAAA,EAAK;MACZvB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjCvB,KAAA,CAAMkC,KAAK,CAACf,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKV,cAAA,EAAgBC,UAAA,EAAYF,EAAA,EAAIQ,MAAA,EAAQK,CAAA,CAAE;EAG7D,OAAO;IACLE,kBAAA;IACAZ,SAAA;IACA0B,KAAA,EAAO1B,SAAA,GAAYU,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CR;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"usePreviewURL.js","names":["qs","useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","versions","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","hasVersions","totalDocs","config","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","params","draft","undefined","res","fetch","stringify","ok","Error","newPreviewURL","json","window","open","err","error","label"],"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport * as qs from 'qs-esm'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n  generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n  isLoading: boolean\n  label: string\n  previewURL: string\n} => {\n  const { id, collectionSlug, globalSlug, versions } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const hasVersions = versions?.totalDocs > 0\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const isGeneratingPreviewURL = useRef(false)\n\n  // we need to regenerate the preview URL every time the button is clicked\n  // to do this we need to fetch the document data fresh from the API\n  // this will ensure the latest data is used when generating the preview URL\n  const generatePreviewURL = useCallback(\n    async ({ openPreviewWindow = false }) => {\n      if (isGeneratingPreviewURL.current) {\n        return\n      }\n      isGeneratingPreviewURL.current = true\n\n      try {\n        setIsLoading(true)\n\n        let url = `${serverURL}${api}`\n        if (collectionSlug) {\n          url = `${url}/${collectionSlug}/${id}/preview`\n        }\n        if (globalSlug) {\n          url = `${url}/globals/${globalSlug}/preview`\n        }\n\n        const params = {\n          draft: hasVersions ? 'true' : 'false',\n          locale: locale || undefined,\n        }\n\n        const res = await fetch(`${url}?${qs.stringify(params)}`)\n\n        if (!res.ok) {\n          throw new Error()\n        }\n        const newPreviewURL = await res.json()\n        if (!newPreviewURL) {\n          throw new Error()\n        }\n        setPreviewURL(newPreviewURL)\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        if (openPreviewWindow) {\n          window.open(newPreviewURL, '_blank')\n        }\n      } catch (err) {\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        toast.error(t('error:previewing'))\n      }\n    },\n    [serverURL, api, collectionSlug, globalSlug, hasVersions, locale, id, t],\n  )\n\n  return {\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    generatePreviewURL,\n    isLoading,\n    label: isLoading ? t('general:loading') : t('version:preview'),\n    previewURL,\n  }\n}\n"],"mappings":"AAAA;;AACA,YAAYA,EAAA,MAAQ;AACpB,SAASC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAQ;AAEtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,aAAA,GAAgBA,CAAA;EAM3B,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC,UAAU;IAAEC;EAAQ,CAAE,GAAGP,eAAA;EAErD,MAAM,CAACQ,SAAA,EAAWC,YAAA,CAAa,GAAGZ,QAAA,CAAS;EAC3C,MAAM,CAACa,UAAA,EAAYC,aAAA,CAAc,GAAGd,QAAA,CAAS;EAC7C,MAAM;IAAEe,IAAA,EAAMC;EAAM,CAAE,GAAGZ,SAAA;EAEzB,MAAMa,WAAA,GAAcP,QAAA,EAAUQ,SAAA,GAAY;EAE1C,MAAM;IACJC,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGpB,SAAA;EAEJ,MAAM;IAAEqB;EAAC,CAAE,GAAGlB,cAAA;EAEd,MAAMmB,sBAAA,GAAyBzB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAM0B,kBAAA,GAAqB3B,WAAA,CACzB,OAAO;IAAE4B,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;MAClC;IACF;IACAH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFf,YAAA,CAAa;MAEb,IAAIgB,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIb,cAAA,EAAgB;QAClBoB,GAAA,GAAM,GAAGA,GAAA,IAAOpB,cAAA,IAAkBD,EAAA,UAAY;MAChD;MACA,IAAIE,UAAA,EAAY;QACdmB,GAAA,GAAM,GAAGA,GAAA,YAAenB,UAAA,UAAoB;MAC9C;MAEA,MAAMoB,MAAA,GAAS;QACbC,KAAA,EAAOb,WAAA,GAAc,SAAS;QAC9BD,MAAA,EAAQA,MAAA,IAAUe;MACpB;MAEA,MAAMC,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGL,GAAA,IAAO/B,EAAA,CAAGqC,SAAS,CAACL,MAAA,GAAS;MAExD,IAAI,CAACG,GAAA,CAAIG,EAAE,EAAE;QACX,MAAM,IAAIC,KAAA;MACZ;MACA,MAAMC,aAAA,GAAgB,MAAML,GAAA,CAAIM,IAAI;MACpC,IAAI,CAACD,aAAA,EAAe;QAClB,MAAM,IAAID,KAAA;MACZ;MACAtB,aAAA,CAAcuB,aAAA;MACdzB,YAAA,CAAa;MACbY,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmB;QACrBa,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;MAC7B;IACF,EAAE,OAAOI,GAAA,EAAK;MACZ7B,YAAA,CAAa;MACbY,sBAAA,CAAuBG,OAAO,GAAG;MACjC1B,KAAA,CAAMyC,KAAK,CAACnB,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKb,cAAA,EAAgBC,UAAA,EAAYQ,WAAA,EAAaD,MAAA,EAAQT,EAAA,EAAIgB,CAAA,CAAE;EAG1E,OAAO;IACL;IACAE,kBAAA;IACAd,SAAA;IACAgC,KAAA,EAAOhC,SAAA,GAAYY,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CV;EACF;AACF","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CA8F7D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAyI7D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKzC,CAAA"}

package/dist/elements/PublishButton/index.js

@@ -2,6 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as qs from 'qs-esm';
 import React, { useCallback } from 'react';
 import { useForm, useFormModified } from '../../forms/Form/context.js';
 import { FormSubmit } from '../../forms/Submit/index.js';
@@ -13,21 +14,12 @@ import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useOperation } from '../../providers/Operation/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { PopupList } from '../Popup/index.js';
 export const DefaultPublishButton = t0 => {
-  const $ = _c(24);
+  const $ = _c(36);
   const {
     label: labelProp
   } = t0;
-  const {
-    config: t1
-  } = useConfig();
-  const {
-    routes: t2,
-    serverURL
-  } = t1;
-  const {
-    api
-  } = t2;
   const {
     id,
     collectionSlug,
@@ -37,6 +29,9 @@ export const DefaultPublishButton = t0 => {
     publishedDoc,
     unpublishedVersions
   } = useDocumentInfo();
+  const {
+    config
+  } = useConfig();
   const {
     submit
   } = useForm();
@@ -46,25 +41,37 @@ export const DefaultPublishButton = t0 => {
     code: locale
   } = useLocale();
   const {
+    localization,
+    routes: t1,
+    serverURL
+  } = config;
+  const {
+    api
+  } = t1;
+  const {
+    i18n,
     t
   } = useTranslation();
-  let t3;
+  const {
+    code
+  } = useLocale();
+  let t2;
   if ($[0] !== labelProp || $[1] !== t) {
-    t3 = labelProp || t("version:publishChanges");
+    t2 = labelProp || t("version:publishChanges");
     $[0] = labelProp;
     $[1] = t;
-    $[2] = t3;
+    $[2] = t2;
   } else {
-    t3 = $[2];
+    t2 = $[2];
   }
-  const label = t3;
+  const label = t2;
   const hasNewerVersions = unpublishedVersions?.totalDocs > 0;
   const canPublish = hasPublishPermission && (modified || hasNewerVersions || !publishedDoc);
   const operation = useOperation();
   const forceDisable = operation === "update" && !modified;
-  let t4;
+  let t3;
   if ($[3] !== forceDisable || $[4] !== locale || $[5] !== collectionSlug || $[6] !== serverURL || $[7] !== api || $[8] !== id || $[9] !== globalSlug || $[10] !== submit) {
-    t4 = async () => {
+    t3 = async () => {
       if (forceDisable) {
         return;
       }
@@ -97,33 +104,33 @@ export const DefaultPublishButton = t0 => {
     $[8] = id;
     $[9] = globalSlug;
     $[10] = submit;
-    $[11] = t4;
+    $[11] = t3;
   } else {
-    t4 = $[11];
+    t3 = $[11];
   }
-  const saveDraft = t4;
-  let t5;
+  const saveDraft = t3;
+  let t4;
   if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = ["s"];
-    $[12] = t5;
+    t4 = ["s"];
+    $[12] = t4;
   } else {
-    t5 = $[12];
+    t4 = $[12];
   }
-  let t6;
+  let t5;
   if ($[13] !== editDepth) {
-    t6 = {
+    t5 = {
       cmdCtrlKey: true,
       editDepth,
-      keyCodes: t5
+      keyCodes: t4
     };
     $[13] = editDepth;
-    $[14] = t6;
+    $[14] = t5;
   } else {
-    t6 = $[14];
+    t5 = $[14];
   }
-  let t7;
+  let t6;
   if ($[15] !== saveDraft || $[16] !== docConfig.versions) {
-    t7 = e => {
+    t6 = e => {
       e.preventDefault();
       e.stopPropagation();
       if (saveDraft && docConfig.versions?.drafts && docConfig.versions?.drafts?.autosave) {
@@ -132,14 +139,14 @@ export const DefaultPublishButton = t0 => {
     };
     $[15] = saveDraft;
     $[16] = docConfig.versions;
-    $[17] = t7;
+    $[17] = t6;
   } else {
-    t7 = $[17];
+    t6 = $[17];
   }
-  useHotkey(t6, t7);
-  let t8;
+  useHotkey(t5, t6);
+  let t7;
   if ($[18] !== submit) {
-    t8 = () => {
+    t7 = () => {
       submit({
         overrides: {
           _status: "published"
@@ -147,31 +154,75 @@ export const DefaultPublishButton = t0 => {
       });
     };
     $[18] = submit;
-    $[19] = t8;
+    $[19] = t7;
   } else {
-    t8 = $[19];
+    t7 = $[19];
   }
-  const publish = t8;
+  const publish = t7;
+  let t8;
+  if ($[20] !== serverURL || $[21] !== api || $[22] !== globalSlug || $[23] !== collectionSlug || $[24] !== id || $[25] !== submit) {
+    t8 = locale_0 => {
+      const params = qs.stringify({
+        publishSpecificLocale: locale_0
+      });
+      const action_0 = `${serverURL}${api}${globalSlug ? `/globals/${globalSlug}` : `/${collectionSlug}/${id ? `${"/" + id}` : ""}`}${params ? "?" + params : ""}`;
+      submit({
+        action: action_0,
+        overrides: {
+          _status: "published"
+        }
+      });
+    };
+    $[20] = serverURL;
+    $[21] = api;
+    $[22] = globalSlug;
+    $[23] = collectionSlug;
+    $[24] = id;
+    $[25] = submit;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  const publishSpecificLocale = t8;
   if (!hasPublishPermission) {
     return null;
   }
   const t9 = !canPublish;
   let t10;
-  if ($[20] !== t9 || $[21] !== publish || $[22] !== label) {
+  if ($[27] !== localization || $[28] !== i18n || $[29] !== code || $[30] !== publishSpecificLocale || $[31] !== t || $[32] !== t9 || $[33] !== publish || $[34] !== label) {
     t10 = _jsx(FormSubmit, {
       buttonId: "action-save",
       disabled: t9,
       onClick: publish,
       size: "medium",
+      SubMenuPopupContent: localization ? localization.locales.map(locale_1 => {
+        const formattedLabel = typeof locale_1.label === "string" ? locale_1.label : locale_1.label && locale_1.label[i18n?.language];
+        const isActive = typeof locale_1 === "string" ? locale_1 === code : locale_1.code === code;
+        if (isActive) {
+          return _jsx(PopupList.ButtonGroup, {
+            children: _jsx(PopupList.Button, {
+              onClick: () => publishSpecificLocale(locale_1.code),
+              children: t("version:publishIn", {
+                locale: formattedLabel || locale_1.code
+              })
+            })
+          }, locale_1.code);
+        }
+      }) : null,
       type: "button",
       children: label
     });
-    $[20] = t9;
-    $[21] = publish;
-    $[22] = label;
-    $[23] = t10;
+    $[27] = localization;
+    $[28] = i18n;
+    $[29] = code;
+    $[30] = publishSpecificLocale;
+    $[31] = t;
+    $[32] = t9;
+    $[33] = publish;
+    $[34] = label;
+    $[35] = t10;
   } else {
-    t10 = $[23];
+    t10 = $[35];
   }
   return t10;
 };