@payloadcms/ui 3.0.0-canary.294ea5c → 3.0.0-canary.3926e86

package/dist/elements/FileDetails/StaticFileDetails/index.scss

@@ -1,131 +1,134 @@
 @import '../../../scss/styles.scss';
 
-.file-details {
-  background: var(--theme-elevation-50);
-  border: 1px solid var(--theme-border-color);
-  border-radius: var(--style-radius-m);
-  @include inputShadow;
-
-  header {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  &__remove {
-    position: absolute;
-    margin: 0;
-    top: $baseline;
-    right: $baseline;
+@layer payload-default {
+  .file-details {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    @include inputShadow;
 
-    & .btn__icon {
-      border: 1px solid var(--theme-border-color);
-      background: var(--theme-input-bg);
-      @include inputShadow;
-      transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+    header {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      position: relative;
+    }
 
-      &:hover {
-        border: 1px solid var(--theme-elevation-400);
+    &__remove {
+      position: absolute;
+      margin: 0;
+      top: $baseline;
+      right: $baseline;
+
+      & .btn__icon {
+        border: 1px solid var(--theme-border-color);
+        background: var(--theme-input-bg);
+        @include inputShadow;
+        transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+
+        &:hover {
+          border: 1px solid var(--theme-elevation-400);
+        }
       }
     }
-  }
-
-  &__main-detail {
-    padding: base(0.8) base(1.2);
-    width: auto;
-    flex-grow: 1;
-    min-width: 280px;
-    max-width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-self: stretch;
-    gap: base(0.2);
-  }
-
-  &__toggle-more-info {
-    font-weight: 600;
-    text-decoration: none;
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
+    &__main-detail {
+      padding: base(0.8) base(1.2);
+      width: auto;
+      flex-grow: 1;
+      min-width: 280px;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: stretch;
+      gap: base(0.2);
     }
-  }
 
-  &__toggle-icon {
-    padding: calc(var(--base) / 4);
-  }
+    &__toggle-more-info {
+      font-weight: 600;
+      text-decoration: none;
 
-  &__sizes {
-    margin: 0;
-    padding: base(1.5) $baseline 0;
-    list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-
-    li {
-      width: 50%;
-      padding: 0 base(0.5);
-      margin-bottom: $baseline;
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
     }
-  }
 
-  &__size-label {
-    color: var(--theme-elevation-400);
-  }
+    &__toggle-icon {
+      padding: calc(var(--base) / 4);
+    }
 
-  &__file-mutation {
-    display: flex;
-    margin-top: base(0.25);
-    gap: calc(var(--base) / 2);
-  }
+    &__sizes {
+      margin: 0;
+      padding: base(1.5) $baseline 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
 
-  &__edit {
-    cursor: pointer;
-    background-color: var(--theme-elevation-150);
-    border: none;
-    border-radius: $style-radius-m;
-    padding: base(0.25) base(0.5);
+      li {
+        width: 50%;
+        padding: 0 base(0.5);
+        margin-bottom: $baseline;
+      }
+    }
 
-    &:hover {
-      background-color: var(--theme-elevation-100);
+    &__size-label {
+      color: var(--theme-elevation-400);
     }
-  }
 
-  @include large-break {
-    &__main-detail {
-      padding: $baseline;
+    &__file-mutation {
+      display: flex;
+      margin-top: base(0.25);
+      gap: calc(var(--base) / 2);
     }
 
-    &__sizes {
-      display: block;
-      padding: $baseline $baseline base(0.5);
+    &__edit {
+      cursor: pointer;
+      background-color: var(--theme-elevation-150);
+      border: none;
+      border-radius: $style-radius-m;
+      padding: base(0.25) base(0.5);
 
-      li {
-        padding: 0;
-        width: 100%;
+      &:hover {
+        background-color: var(--theme-elevation-100);
       }
     }
-  }
 
-  @include mid-break {
-    header {
-      flex-wrap: wrap;
-    }
+    @include large-break {
+      &__main-detail {
+        padding: $baseline;
+      }
 
-    .thumbnail {
-      width: 50%;
-      order: 1;
-    }
+      &__sizes {
+        display: block;
+        padding: $baseline $baseline base(0.5);
 
-    &__remove {
-      order: 2;
+        li {
+          padding: 0;
+          width: 100%;
+        }
+      }
     }
 
-    &__main-detail {
-      order: 3;
-      width: 100%;
+    @include mid-break {
+      header {
+        flex-wrap: wrap;
+      }
+
+      .thumbnail {
+        width: 50%;
+        order: 1;
+      }
+
+      &__remove {
+        order: 2;
+      }
+
+      &__main-detail {
+        order: 3;
+        width: 100%;
+      }
     }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAsDpE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA0DpE,CAAA"}

package/dist/elements/GenerateConfirmation/index.js

@@ -43,31 +43,38 @@ export const GenerateConfirmation = props => {
       className: baseClass,
       slug: modalSlug,
       children: /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__template`,
-        children: [/*#__PURE__*/_jsx("h1", {
-          children: t('authentication:confirmGeneration')
-        }), /*#__PURE__*/_jsx("p", {
-          children: /*#__PURE__*/_jsx(Translation, {
-            elements: {
-              1: ({
-                children
-              }) => /*#__PURE__*/_jsx("strong", {
-                children: children
-              })
+        className: `${baseClass}__wrapper`,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__content`,
+          children: [/*#__PURE__*/_jsx("h1", {
+            children: t('authentication:confirmGeneration')
+          }), /*#__PURE__*/_jsx("p", {
+            children: /*#__PURE__*/_jsx(Translation, {
+              elements: {
+                1: ({
+                  children
+                }) => /*#__PURE__*/_jsx("strong", {
+                  children: children
+                })
+              },
+              i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
+              t: t
+            })
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__controls`,
+          children: [/*#__PURE__*/_jsx(Button, {
+            buttonStyle: "secondary",
+            onClick: () => {
+              toggleModal(modalSlug);
             },
-            i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
-            t: t
-          })
-        }), /*#__PURE__*/_jsx(Button, {
-          buttonStyle: "secondary",
-          onClick: () => {
-            toggleModal(modalSlug);
-          },
-          type: "button",
-          children: t('general:cancel')
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleGenerate,
-          children: t('authentication:generate')
+            size: "large",
+            type: "button",
+            children: t('general:cancel')
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: handleGenerate,
+            children: t('authentication:generate')
+          })]
         })]
       })
     })]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","useModal","React","toast","useDocumentInfo","useTranslation","Button","Translation","baseClass","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","_jsxs","Fragment","_jsx","buttonStyle","onClick","size","className","slug","elements","children","i18nKey","type"],"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'))\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <div className={`${baseClass}__template`}>\n          <h1>{t('authentication:confirmGeneration')}</h1>\n          <p>\n            <Translation\n              elements={{\n                1: ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n              t={t}\n            />\n          </p>\n\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              toggleModal(modalSlug)\n            }}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n        </div>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAClB,SAASC,KAAK,QAAQ;AAEtB,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,oBAAA,GAA6DC,KAAA;EACxE,MAAM;IAAEC,cAAc;IAAEC;EAAM,CAAE,GAAGF,KAAA;EAEnC,MAAM;IAAEG;EAAE,CAAE,GAAGT,eAAA;EACf,MAAM;IAAEU;EAAW,CAAE,GAAGb,QAAA;EACxB,MAAM;IAAEc;EAAC,CAAE,GAAGV,cAAA;EAEd,MAAMW,SAAA,GAAY,yBAAyBH,EAAA,EAAI;EAE/C,MAAMI,cAAA,GAAiBA,CAAA;IACrBL,MAAA;IACAE,WAAA,CAAYE,SAAA;IACZb,KAAA,CAAMe,OAAO,CAACH,CAAA,CAAE;IAChBJ,cAAA,CAAe;EACjB;EAEA,oBACEQ,KAAA,CAACjB,KAAA,CAAMkB,QAAQ;4BACbC,IAAA,CAACf,MAAA;MACCgB,WAAA,EAAY;MACZC,OAAA,EAASA,CAAA;QACPT,WAAA,CAAYE,SAAA;MACd;MACAQ,IAAA,EAAK;gBAEJT,CAAA,CAAE;qBAELM,IAAA,CAACrB,KAAA;MAAMyB,SAAA,EAAWjB,SAAA;MAAWkB,IAAA,EAAMV,SAAA;gBACjC,aAAAG,KAAA,CAAC;QAAIM,SAAA,EAAW,GAAGjB,SAAA,YAAqB;gCACtCa,IAAA,CAAC;oBAAIN,CAAA,CAAE;yBACPM,IAAA,CAAC;oBACC,aAAAA,IAAA,CAACd,WAAA;YACCoB,QAAA,EAAU;cACR,GAAG,CAAC;gBAAEC;cAAQ,CAAE,kBAAKP,IAAA,CAAC;0BAAQO;;YAChC;YACAC,OAAA,EAAQ;YACRd,CAAA,EAAGA;;yBAIPM,IAAA,CAACf,MAAA;UACCgB,WAAA,EAAY;UACZC,OAAA,EAASA,CAAA;YACPT,WAAA,CAAYE,SAAA;UACd;UACAc,IAAA,EAAK;oBAEJf,CAAA,CAAE;yBAELM,IAAA,CAACf,MAAA;UAAOiB,OAAA,EAASN,cAAA;oBAAiBF,CAAA,CAAE;;;;;AAK9C","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Modal","useModal","React","toast","useDocumentInfo","useTranslation","Button","Translation","baseClass","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","_jsxs","Fragment","_jsx","buttonStyle","onClick","size","className","slug","elements","children","i18nKey","type"],"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'))\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <div className={`${baseClass}__wrapper`}>\n          <div className={`${baseClass}__content`}>\n            <h1>{t('authentication:confirmGeneration')}</h1>\n            <p>\n              <Translation\n                elements={{\n                  1: ({ children }) => <strong>{children}</strong>,\n                }}\n                i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n                t={t}\n              />\n            </p>\n          </div>\n          <div className={`${baseClass}__controls`}>\n            <Button\n              buttonStyle=\"secondary\"\n              onClick={() => {\n                toggleModal(modalSlug)\n              }}\n              size=\"large\"\n              type=\"button\"\n            >\n              {t('general:cancel')}\n            </Button>\n            <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n          </div>\n        </div>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAClB,SAASC,KAAK,QAAQ;AAEtB,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,oBAAA,GAA6DC,KAAA;EACxE,MAAM;IAAEC,cAAc;IAAEC;EAAM,CAAE,GAAGF,KAAA;EAEnC,MAAM;IAAEG;EAAE,CAAE,GAAGT,eAAA;EACf,MAAM;IAAEU;EAAW,CAAE,GAAGb,QAAA;EACxB,MAAM;IAAEc;EAAC,CAAE,GAAGV,cAAA;EAEd,MAAMW,SAAA,GAAY,yBAAyBH,EAAA,EAAI;EAE/C,MAAMI,cAAA,GAAiBA,CAAA;IACrBL,MAAA;IACAE,WAAA,CAAYE,SAAA;IACZb,KAAA,CAAMe,OAAO,CAACH,CAAA,CAAE;IAChBJ,cAAA,CAAe;EACjB;EAEA,oBACEQ,KAAA,CAACjB,KAAA,CAAMkB,QAAQ;4BACbC,IAAA,CAACf,MAAA;MACCgB,WAAA,EAAY;MACZC,OAAA,EAASA,CAAA;QACPT,WAAA,CAAYE,SAAA;MACd;MACAQ,IAAA,EAAK;gBAEJT,CAAA,CAAE;qBAELM,IAAA,CAACrB,KAAA;MAAMyB,SAAA,EAAWjB,SAAA;MAAWkB,IAAA,EAAMV,SAAA;gBACjC,aAAAG,KAAA,CAAC;QAAIM,SAAA,EAAW,GAAGjB,SAAA,WAAoB;gCACrCW,KAAA,CAAC;UAAIM,SAAA,EAAW,GAAGjB,SAAA,WAAoB;kCACrCa,IAAA,CAAC;sBAAIN,CAAA,CAAE;2BACPM,IAAA,CAAC;sBACC,aAAAA,IAAA,CAACd,WAAA;cACCoB,QAAA,EAAU;gBACR,GAAG,CAAC;kBAAEC;gBAAQ,CAAE,kBAAKP,IAAA,CAAC;4BAAQO;;cAChC;cACAC,OAAA,EAAQ;cACRd,CAAA,EAAGA;;;yBAITI,KAAA,CAAC;UAAIM,SAAA,EAAW,GAAGjB,SAAA,YAAqB;kCACtCa,IAAA,CAACf,MAAA;YACCgB,WAAA,EAAY;YACZC,OAAA,EAASA,CAAA;cACPT,WAAA,CAAYE,SAAA;YACd;YACAQ,IAAA,EAAK;YACLM,IAAA,EAAK;sBAEJf,CAAA,CAAE;2BAELM,IAAA,CAACf,MAAA;YAAOiB,OAAA,EAASN,cAAA;sBAAiBF,CAAA,CAAE;;;;;;AAMhD","ignoreList":[]}

package/dist/elements/GenerateConfirmation/index.scss

@@ -1,19 +1,40 @@
 @import '../../scss/styles.scss';
 
-.generate-confirmation {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: base(2);
+@layer payload-default {
+  .generate-confirmation {
+    @include blur-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__template {
-    position: relative;
-    z-index: 1;
-  }
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
+
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
 
-  .btn {
-    margin-right: $baseline;
+      .btn {
+        margin: 0;
+      }
+    }
   }
 }

package/dist/elements/Gutter/index.scss

@@ -1,19 +1,21 @@
 @import '../../scss/styles.scss';
 
-.gutter {
-  &--left {
-    padding-left: var(--gutter-h);
-  }
+@layer payload-default {
+  .gutter {
+    &--left {
+      padding-left: var(--gutter-h);
+    }
 
-  &--right {
-    padding-right: var(--gutter-h);
-  }
+    &--right {
+      padding-right: var(--gutter-h);
+    }
 
-  &--negative-left {
-    margin-left: calc(-1 * var(--gutter-h));
-  }
+    &--negative-left {
+      margin-left: calc(-1 * var(--gutter-h));
+    }
 
-  &--negative-right {
-    margin-right: calc(-1 * var(--gutter-h));
+    &--negative-right {
+      margin-right: calc(-1 * var(--gutter-h));
+    }
   }
 }

package/dist/elements/Hamburger/index.scss

@@ -1,40 +1,46 @@
 @import '../../scss/styles';
 
-.hamburger {
-  padding: 0;
-  border: 0;
-  cursor: pointer;
-  background-color: var(--theme-bg);
-  outline: none;
-  position: relative;
-  color: var(--theme-text);
-  box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
-  padding: base(0.1);
-  border-radius: 3px;
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  width: 100%;
-  transition-property: box-shadow, background-color;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+@layer payload-default {
+  .hamburger {
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+    background-color: var(--theme-bg);
+    outline: none;
+    position: relative;
+    color: var(--theme-text);
+    box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
+    padding: base(0.1);
+    border-radius: 3px;
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    transition-property: box-shadow, background-color;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    --hamburger-size: var(--base);
 
-  &:hover {
-    background-color: var(--theme-elevation-100);
-    box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
-  }
+    &:hover {
+      background-color: var(--theme-elevation-100);
+      box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
+    }
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &::after {
-    z-index: -1;
-  }
+    &::after {
+      z-index: -1;
+    }
 
-  &__open-icon,
-  &__close-icon {
-    width: var(--hamburger-size);
-    height: var(--hamburger-size);
+    &__open-icon,
+    &__close-icon {
+      width: var(--hamburger-size);
+      height: var(--hamburger-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

package/dist/elements/IDLabel/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.id-label {
-  font-size: base(0.8);
-  line-height: base(1.2);
-  font-weight: normal;
-  color: var(--theme-elevation-600);
-  background: var(--theme-elevation-100);
-  padding: base(0.2) base(0.4);
-  border-radius: $style-radius-m;
-  display: inline-flex;
+@layer payload-default {
+  .id-label {
+    font-size: base(0.8);
+    line-height: base(1.2);
+    font-weight: normal;
+    color: var(--theme-elevation-600);
+    background: var(--theme-elevation-100);
+    padding: base(0.2) base(0.4);
+    border-radius: $style-radius-m;
+    display: inline-flex;
+  }
 }

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+export declare const LeaveWithoutSaving: React.FC;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAOrD,OAAO,cAAc,CAAA;AAkDrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EA8BtC,CAAA"}