@paperless/core 0.1.0-alpha.33 → 0.1.0-alpha.330

package/dist/collection/index.js

@@ -1 +1,2 @@
-export {};
+export * from './types';
+export * from './utils';

package/dist/collection/tailwind/animation.js

@@ -0,0 +1,87 @@
+module.exports = {
+    animation: {
+        'fade-in': 'forwards fadeIn .2s ease',
+        'fade-out': 'forwards fadeOut .2s ease',
+        'slide-in-right': 'forwards slideInRight .5s ease',
+        'slide-in-left': 'forwards slideInLeft .5s ease',
+        'slide-in-top': 'forwards slideInTop .25 ease',
+        'slide-in-bottom': 'forwards slideInBottom .5s ease',
+        'slide-in-right-small': 'forwards slideInRightSmall .5s ease',
+        'slide-in-left-small': 'forwards slideInLeftSmall .5s ease',
+        'slide-in-top-small': 'forwards slideInTopSmall .5s ease',
+        'slide-in-bottom-small': 'forwards slideInBottomSmall .5s ease',
+        'slide-out-right': 'forwards slideOutRight .2s ease',
+        'slide-out-left': 'forwards slideOutLeft .2s ease',
+        'slide-out-top': 'forwards slideOutTop .2s ease',
+        'slide-out-bottom': 'forwards slideOutBottom .5s ease',
+        'slide-out-top-small': 'forwards slideOutTopSmall .5s ease',
+        'slide-out-bottom-small': 'forwards slideOutBottomSmall .5s ease',
+    },
+
+    keyframes: {
+        fadeIn: {
+            '0%': { opacity: 0 },
+            '100%': { opacity: 100 },
+        },
+        fadeOut: {
+            '0%': { opacity: 100 },
+            '100%': { opacity: 0 },
+        },
+        slideInRight: {
+            '0%': { transform: 'translateX(100%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInLeft: {
+            '0%': { transform: 'translateX(-100%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInTop: {
+            '0%': { transform: 'translateY(-100%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideInBottom: {
+            '0%': { transform: 'translateY(100%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideInRightSmall: {
+            '0%': { transform: 'translateX(20%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInLeftSmall: {
+            '0%': { transform: 'translateX(-20%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInTopSmall: {
+            '0%': { transform: 'translateY(-20%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideInBottomSmall: {
+            '0%': { transform: 'translateY(20%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideOutRight: {
+            '0%': { transform: 'translateX(0)' },
+            '100%': { transform: 'translateX(100%)' },
+        },
+        slideOutLeft: {
+            '0%': { transform: 'translateX(0)' },
+            '100%': { transform: 'translateX(-100%)' },
+        },
+        slideOutTop: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(-100%)' },
+        },
+        slideOutBottom: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(100%)' },
+        },
+        slideOutTopSmall: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(-20%)' },
+        },
+        slideOutBottomSmall: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(20%)' },
+        },
+    },
+};

package/dist/collection/tailwind/backdrop-blur.js

@@ -0,0 +1,3 @@
+module.exports = {
+    xs: '2px',
+};

package/dist/collection/tailwind/border-radius.js

@@ -1,4 +1,5 @@
 module.exports = {
+    xxxlarge: '1.5625rem',
     xxlarge: '0.75rem',
     xlarge: '0.5625rem',
     large: '0.375rem',

package/dist/collection/tailwind/height.js

@@ -0,0 +1,5 @@
+module.exports = {
+    height: {
+        unset: 'unset',
+    },
+};

package/dist/collection/tailwind/screens.js

@@ -0,0 +1,8 @@
+module.exports = {
+    tablet: '40rem', // 640 px
+    'desktop-xs': '64rem', // 1024 px
+    'desktop-sm': '80rem', // 1360 px
+    desktop: '85.375rem', // 1366
+    'desktop-lg': '90rem', // 1440
+    'desktop-xl': '120rem', // 1920
+};

package/dist/collection/tailwind/shadows.js

@@ -1,7 +1,13 @@
 module.exports = {
-  1: '0px 0.0625rem 0.05rem rgba(0,0,0, 0.5)',
-  2: '0px 0.0625rem 0.1125rem rgba(0,0,0, 0.65)',
-  3: '0px 0.0625rem 0.125rem rgba(0,0,0, 0.65)',
-  4: ['0px 0.3125rem 1rem rgba(0,24,98, 0.08)', '0px 0.0625rem 0.1875rem rgba(0,24,98, 0.13)'],
-  5: '0px 0.1875rem 1rem rgba(0,24,98, 0.3)',
+    1: '0px 0.0625rem 0.05rem rgba(0,0,0, 0.5)',
+    2: '0px 0.0625rem 0.1125rem rgba(0,0,0, 0.65)',
+    3: '0px 0.0625rem 0.125rem rgba(0,0,0, 0.65)',
+    4: [
+        '0px 0.3125rem 1rem rgba(0,24,98, 0.08)',
+        '0px 0.0625rem 0.1875rem rgba(0,24,98, 0.13)',
+    ],
+    5: '0px 0.1875rem 1rem rgba(0,24,98, 0.3)',
+    transparent: 'transparent',
+    'button-primary-hover': '0px 2px 4px rgba(44,75,169, 0.4)',
+    'button-secondary-hover': '0px 2px 4px rgba(176,178,203, 0.4)',
 };

package/dist/collection/tailwind/spacing.js

@@ -0,0 +1,10 @@
+module.exports = {
+    // default variant layout
+    'content-mobile-x': '1rem',
+    'content-mobile-y': '1.5rem',
+
+    'content-desktop-x': '2rem',
+    'content-desktop-y': '2rem',
+
+    18: '4.5rem',
+};

package/dist/collection/tailwind/typography.js

@@ -0,0 +1,21 @@
+module.exports = {
+    fontSize: {
+        'h1': '2.5rem',
+        'h2': '2rem',
+        'h3': '1.5rem',
+        'h4': '1.25rem',
+        'h5': '1.125rem',
+        'body': '1rem',
+        'body-2': '1.125rem',
+        'xxs': '0.6875rem'
+    },
+    lineHeight: {
+        'h1': '3rem',
+        'h2': '2.5rem',
+        'h3': '1.875rem',
+        'h4': '1.625rem',
+        'h5': '1.375rem',
+        'body': '1.75rem',
+        'body-2': '1.875rem',
+    }
+}

package/dist/collection/tailwind/width.js

@@ -0,0 +1,23 @@
+module.exports = {
+    width: {
+        unset: 'unset',
+
+        // default variant
+        'sidebar-mobile': '100%',
+        'sidebar-desktop': '15rem',
+
+        'content-mobile': '100%',
+        'content-desktop-xs': '100%',
+        'content-desktop-sm': '100%',
+        'content-desktop': '69rem',
+        'content-desktop-lg': '69rem',
+        'content-desktop-xl': '69rem',
+
+        // login variant
+        'sidebar-desktop-login': '100%',
+        'content-desktop-login': '30rem',
+    },
+    maxWidth: {
+        screen: '100vw',
+    },
+};

package/dist/collection/tailwind/z-index.js

@@ -0,0 +1,17 @@
+module.exports = {
+    dropdown: 200,
+
+    'navbar-backdrop': 290,
+    navbar: 300,
+
+    backdrop: 490,
+
+    drawer: 500,
+    'drawer-header': 501,
+
+    modal: 600,
+
+    tooltip: 601,
+
+    toast: 700,
+};

package/dist/collection/tailwind.config.js

@@ -1,23 +1,38 @@
 const colors = require('./tailwind/colors');
 const shadows = require('./tailwind/shadows');
 const borderRadius = require('./tailwind/border-radius');
-const grid = require('./tailwind/grid');
 const scale = require('./tailwind/scale');
 const rotate = require('./tailwind/rotate');
+const typeograhpy = require('./tailwind/typography');
+const backdropBlur = require('./tailwind/backdrop-blur');
+const zIndex = require('./tailwind/z-index');
+const animation = require('./tailwind/animation');
+const screens = require('./tailwind/screens');
+const width = require('./tailwind/width');
+const height = require('./tailwind/height');
+const spacing = require('./tailwind/spacing');
 
 module.exports = {
-  important: true,
-  theme: {
-    colors,
-    boxShadow: shadows,
-    dropShadow: shadows,
-    borderRadius,
-    extend: {
-      ...grid,
-      scale,
-      rotate,
+    important: true,
+    theme: {
+        colors,
+        boxShadow: shadows,
+        dropShadow: shadows,
+        borderRadius,
+        extend: {
+            ...animation,
+            scale,
+            rotate,
+            fontSize: typeograhpy.fontSize,
+            lineHeight: typeograhpy.lineHeight,
+            backdropBlur,
+            zIndex,
+            screens,
+            width: width.width,
+            maxWidth: width.maxWidth,
+            height: height.height,
+            spacing,
+        },
     },
-  },
-  variants: {},
-  plugins: [require('@tailwindcss/aspect-ratio')],
+    plugins: [require('@tailwindcss/aspect-ratio')],
 };

package/dist/collection/types/index.js

@@ -0,0 +1,2 @@
+export * from './table';
+export * from './tailwind';

package/dist/collection/types/table.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/tailwind.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/icons.js

@@ -2,6 +2,7 @@ import arrow from '../assets/icons/arrow.svg';
 import attachment from '../assets/icons/attachment.svg';
 import bread from '../assets/icons/bread.svg';
 import calendar from '../assets/icons/calendar.svg';
+import camera from '../assets/icons/camera.svg';
 import car from '../assets/icons/car.svg';
 import checklist from '../assets/icons/checklist.svg';
 import checkmark from '../assets/icons/checkmark.svg';
@@ -22,8 +23,11 @@ import integration from '../assets/icons/integration.svg';
 import list from '../assets/icons/list.svg';
 import location from '../assets/icons/location.svg';
 import megaphone from '../assets/icons/megaphone.svg';
+import menu from '../assets/icons/menu.svg';
 import minus from '../assets/icons/minus.svg';
+import more from '../assets/icons/more.svg';
 import negative from '../assets/icons/negative.svg';
+import notification from '../assets/icons/notification.svg';
 import pagination from '../assets/icons/pagination.svg';
 import payment from '../assets/icons/payment.svg';
 import pencil from '../assets/icons/pencil.svg';
@@ -31,10 +35,13 @@ import person from '../assets/icons/person.svg';
 import plus from '../assets/icons/plus.svg';
 import question from '../assets/icons/question.svg';
 import receipt from '../assets/icons/receipt.svg';
+import reload from '../assets/icons/reload.svg';
 import report from '../assets/icons/report.svg';
 import search from '../assets/icons/search.svg';
 import settings from '../assets/icons/settings.svg';
 import sick from '../assets/icons/sick.svg';
+import signout from '../assets/icons/signout.svg';
+import switchIcon from '../assets/icons/switch.svg';
 import tachometer from '../assets/icons/tachometer.svg';
 import task from '../assets/icons/task.svg';
 import template from '../assets/icons/template.svg';
@@ -48,6 +55,7 @@ export default {
   attachment,
   bread,
   calendar,
+  camera,
   car,
   checklist,
   checkmark,
@@ -68,19 +76,25 @@ export default {
   list,
   location,
   megaphone,
+  menu,
   minus,
+  more,
   negative,
+  notification,
   pagination,
   payment,
   pencil,
   person,
   plus,
   question,
+  reload,
   receipt,
   report,
   search,
   settings,
   sick,
+  signout,
+  switch: switchIcon,
   tachometer,
   task,
   template,

package/dist/collection/utils/illustrations.js

@@ -1,5 +1,8 @@
 import emptyState from '../assets/illustrations/default-empty-state.svg';
 import departments from '../assets/illustrations/departments.svg';
+import email from '../assets/illustrations/e-mail.svg';
+import emptyStateOverview from '../assets/illustrations/empty-state-overview.svg';
+import emptyStateSearch from '../assets/illustrations/empty-state-search.svg';
 import expenses from '../assets/illustrations/expenses.svg';
 import functions from '../assets/illustrations/functions.svg';
 import questions from '../assets/illustrations/questions.svg';
@@ -8,6 +11,8 @@ import timeOff from '../assets/illustrations/time-off.svg';
 import upgradeToHr from '../assets/illustrations/upgrade-to-hr.svg';
 export default {
   'empty-state': emptyState,
+  'empty-state-search': emptyStateSearch,
+  'empty-state-overview': emptyStateOverview,
   departments,
   expenses,
   functions,
@@ -15,4 +20,5 @@ export default {
   'sick-leave': sickLeave,
   'time-off': timeOff,
   'upgrade-to-hr': upgradeToHr,
+  'e-mail': email,
 };

package/dist/collection/utils/index.js

@@ -0,0 +1,6 @@
+export * from './child-of';
+export * from './icons';
+export * from './illustrations';
+export * from './localization';
+export * from './object-get-by-path';
+export * from './transformers';

package/dist/collection/utils/localization.js

@@ -0,0 +1,55 @@
+const getComponentClosestLanguage = (element) => {
+  const closestElement = element.closest('[lang]');
+  const htmlElement = document.documentElement;
+  return closestElement
+    ? closestElement.lang
+    : (htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.lang)
+      ? htmlElement.lang
+      : 'en';
+};
+const fetchLocaleStringsForComponent = (componentName, locale) => {
+  return new Promise((resolve, reject) => {
+    fetch(`/assets/i18n/${componentName}.i18n.${locale}.json`).then((result) => {
+      if (result.ok) {
+        resolve(result.json());
+        return;
+      }
+      reject();
+    }, () => reject());
+  });
+};
+const cache = {};
+export const getLocaleComponentStrings = async (element) => {
+  var _a;
+  let componentName = element.tagName.toLowerCase().replace('p-', '');
+  let componentLanguage = getComponentClosestLanguage(element);
+  let strings;
+  if ((_a = cache[componentName]) === null || _a === void 0 ? void 0 : _a[componentLanguage]) {
+    return cache[componentName][componentLanguage];
+  }
+  try {
+    strings = await fetchLocaleStringsForComponent(componentName, componentLanguage);
+  }
+  catch (e) {
+    console.warn(`no locale for ${componentName} (${componentLanguage}) loading default locale en.`);
+    strings = await fetchLocaleStringsForComponent(componentName, 'en');
+  }
+  if (!cache[componentName]) {
+    cache[componentName] = {};
+  }
+  if (!cache[componentName][componentLanguage]) {
+    cache[componentName][componentLanguage] = {};
+  }
+  cache[componentName][componentLanguage] = strings;
+  return strings;
+};
+export const formatTranslation = (str, data) => {
+  if (!str || !data) {
+    return str;
+  }
+  for (const key of Object.keys(data)) {
+    const regex = `{${key}}`;
+    str = str.replace(new RegExp(regex, 'g'), data[key]);
+  }
+  return str;
+};

package/dist/collection/utils/object-get-by-path.js

@@ -0,0 +1,8 @@
+export const objectGetByPath = (obj, path, defaultValue = undefined) => {
+  const travel = (regexp) => String.prototype.split
+    .call(path, regexp)
+    .filter(Boolean)
+    .reduce((res, key) => res !== null && res !== undefined ? res[key] : res, obj);
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/);
+  return result === undefined || result === obj ? defaultValue : result;
+};

package/dist/collection/utils/transformers.js

@@ -0,0 +1,4 @@
+export const camelToSnakeCase = (str) => str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+export const snakeToCamelCase = (str) => str
+  .toLowerCase()
+  .replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''));

package/dist/components/backdrop.component.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const backdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.h-full{height:100%!important}.max-h-screen{max-height:100vh!important}.w-full{width:100%!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-end{align-items:flex-end!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.overflow-y-auto{overflow-y:auto!important}.overflow-x-hidden{overflow-x:hidden!important}.rounded{border-radius:.25rem!important}.bg-storm-dark{--tw-bg-opacity:1!important;background-color:rgb(39 40 56/var(--tw-bg-opacity))!important}.p-0{padding:0!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}.bg-storm-dark\\/50{background-color:rgba(39,40,56,.5)!important}:host{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:100vh;max-width:100vw;overflow:hidden;position:fixed;top:0;width:100%;z-index:490}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host .content-container{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:100vh;max-width:100vw;overflow-x:hidden;overflow-y:auto;width:100%}@media (min-width:40rem){:host .content-container{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host .content-container{align-items:center;padding:4rem}}:host(.blurred){--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}:host(.closing){animation:fadeOut .2s ease forwards}:host(.closing) .content-container{overflow:hidden}:host(.variant-drawer) .content-container{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:64rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:40rem){.tablet\\:p-0{padding:0!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}";
+
+const Backdrop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.clicked = createEvent(this, "clicked", 7);
+    this.variant = 'modal';
+    this.applyBlur = false;
+    this.closing = false;
+    this.scrollLock = true;
+  }
+  componentWillLoad() {
+    if (this.scrollLock) {
+      document.querySelector(':root').classList.add('scroll-lock');
+    }
+  }
+  disconnectedCallback() {
+    if (this.scrollLock) {
+      document.querySelector(':root').classList.remove('scroll-lock');
+    }
+  }
+  render() {
+    return (h(Host, { class: `p-backdrop variant-${this.variant} ${this.applyBlur && 'blurred'} ${this.closing && 'closing'}` }, h("div", { class: "content-container" }, h("slot", null))));
+  }
+  handleClick(ev) {
+    if (ev.target !== this._el) {
+      return;
+    }
+    this.clicked.emit(ev);
+  }
+  get _el() { return this; }
+  static get style() { return backdropComponentCss; }
+}, [1, "p-backdrop", {
+    "variant": [1],
+    "applyBlur": [4, "apply-blur"],
+    "closing": [4],
+    "scrollLock": [4, "scroll-lock"]
+  }, [[2, "click", "handleClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-backdrop"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-backdrop":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Backdrop);
+      }
+      break;
+  } });
+}
+
+export { Backdrop as B, defineCustomElement as d };