@sk-web-gui/core 0.1.92 → 1.0.0

package/dist/cjs/components/list.js

@@ -0,0 +1,56 @@
+module.exports = Link = function Link() {
+  return {
+    '.sk-list': {
+      // General
+      li: {
+        '&:before': {
+          '@apply text-vattjom-surface-primary font-bold': {},
+          '@apply absolute inline-flex items-center justify-center text-center': {},
+          '@apply w-24 h-24': {}
+        }
+      },
+      '&[data-style="bullet"]': {
+        li: {
+          '&:before': {
+            "@apply content-['•'] my-[.5rem] text-[1.8rem]": {}
+          }
+        }
+      },
+      '&[data-style="numbered"]': {
+        li: {
+          counterIncrement: 'item',
+          '&:before': {
+            '@apply text-small border-vattjom-surface-primary rounded-full leading-8': {},
+            '@apply my-[.6rem] h-[2.2rem] w-[2.2rem] border-[.2rem]': {},
+            content: 'counter(item)'
+          }
+        }
+      },
+      '&[data-style="stroke"]': {
+        li: {
+          '&:before': {
+            "@apply content-['–'] my-[.4rem] text-[1.6rem]": {}
+          }
+        }
+      },
+      '.sk-link': {
+        '&-tertiary': {
+          '@apply text-dark-primary': {},
+          '&:hover': {
+            '@apply text-dark-secondary': {}
+          }
+        }
+      },
+      '&-item': {
+        '@apply pt-20': {}
+      },
+      '&-header': {
+        '@apply text-large font-bold ml-[3.2rem]': {}
+      },
+      '&-text': {
+        '@apply text-dark-secondary ml-[3.2rem]': {}
+      }
+    }
+  };
+};
+//# sourceMappingURL=list.js.map

package/dist/cjs/components/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","names":["module","exports","Link","li","counterIncrement","content"],"sources":["../../../src/components/list.js"],"sourcesContent":["module.exports = Link = () => ({\r\n  '.sk-list': {\r\n    // General\r\n    li: {\r\n      '&:before': {\r\n        '@apply text-vattjom-surface-primary font-bold': {},\r\n        '@apply absolute inline-flex items-center justify-center text-center': {},\r\n        '@apply w-24 h-24': {},\r\n      },\r\n    },\r\n\r\n    '&[data-style=\"bullet\"]': {\r\n      li: {\r\n        '&:before': {\r\n          \"@apply content-['•'] my-[.5rem] text-[1.8rem]\": {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&[data-style=\"numbered\"]': {\r\n      li: {\r\n        counterIncrement: 'item',\r\n\r\n        '&:before': {\r\n          '@apply text-small border-vattjom-surface-primary rounded-full leading-8': {},\r\n          '@apply my-[.6rem] h-[2.2rem] w-[2.2rem] border-[.2rem]': {},\r\n          content: 'counter(item)',\r\n        },\r\n      },\r\n    },\r\n\r\n    '&[data-style=\"stroke\"]': {\r\n      li: {\r\n        '&:before': {\r\n          \"@apply content-['–'] my-[.4rem] text-[1.6rem]\": {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '.sk-link': {\r\n      '&-tertiary': {\r\n        '@apply text-dark-primary': {},\r\n        '&:hover': {\r\n          '@apply text-dark-secondary': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-item': {\r\n      '@apply pt-20': {},\r\n    },\r\n\r\n    '&-header': {\r\n      '@apply text-large font-bold ml-[3.2rem]': {},\r\n    },\r\n\r\n    '&-text': {\r\n      '@apply text-dark-secondary ml-[3.2rem]': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,IAAI,GAAG,SAAAA,KAAA;EAAA,OAAO;IAC7B,UAAU,EAAE;MACV;MACAC,EAAE,EAAE;QACF,UAAU,EAAE;UACV,+CAA+C,EAAE,CAAC,CAAC;UACnD,qEAAqE,EAAE,CAAC,CAAC;UACzE,kBAAkB,EAAE,CAAC;QACvB;MACF,CAAC;MAED,wBAAwB,EAAE;QACxBA,EAAE,EAAE;UACF,UAAU,EAAE;YACV,+CAA+C,EAAE,CAAC;UACpD;QACF;MACF,CAAC;MAED,0BAA0B,EAAE;QAC1BA,EAAE,EAAE;UACFC,gBAAgB,EAAE,MAAM;UAExB,UAAU,EAAE;YACV,yEAAyE,EAAE,CAAC,CAAC;YAC7E,wDAAwD,EAAE,CAAC,CAAC;YAC5DC,OAAO,EAAE;UACX;QACF;MACF,CAAC;MAED,wBAAwB,EAAE;QACxBF,EAAE,EAAE;UACF,UAAU,EAAE;YACV,+CAA+C,EAAE,CAAC;UACpD;QACF;MACF,CAAC;MAED,UAAU,EAAE;QACV,YAAY,EAAE;UACZ,0BAA0B,EAAE,CAAC,CAAC;UAC9B,SAAS,EAAE;YACT,4BAA4B,EAAE,CAAC;UACjC;QACF;MACF,CAAC;MAED,QAAQ,EAAE;QACR,cAAc,EAAE,CAAC;MACnB,CAAC;MAED,UAAU,EAAE;QACV,yCAAyC,EAAE,CAAC;MAC9C,CAAC;MAED,QAAQ,EAAE;QACR,wCAAwC,EAAE,CAAC;MAC7C;IACF;EACF,CAAC;AAAA,CAAC"}

package/dist/cjs/components/logo.js

@@ -0,0 +1,50 @@
+module.exports = Logo = function Logo() {
+  return {
+    '.sk-logo': {
+      '@apply flex w-auto h-auto': {},
+      '@apply items-center': {},
+      '@apply text-dark-primary': {},
+      '&[data-inverted="true"]': {
+        '@apply text-light-primary': {},
+        '.sk-logo-divider': {
+          '@apply border-inverted-divider': {}
+        }
+      },
+      '&-figure': {
+        '@apply w-full h-full': {}
+      },
+      '&[data-variant="service"]': {
+        '@apply flex-row gap-6': {},
+        '@apply w-auto h-[6rem]': {},
+        '@apply pb-4': {},
+        '.sk-logo-figure': {
+          '@apply w-auto h-[5.6rem]': {}
+        }
+      },
+      'a:focus-within &': {
+        '@apply outline outline-2 outline-ring': {}
+      },
+      'a &': {
+        '@apply no-underline': {}
+      },
+      'a:hover &': {
+        '@apply underline': {}
+      },
+      '&-service-content': {
+        '@apply h-full w-max': {},
+        '@apply flex flex-col justify-center': {},
+        '@apply pl-2 pt-2 pr-8 pb-0': {}
+      },
+      '&-title': {
+        '@apply text-[2.2rem] leading-[2.8rem] font-header font-bold': {}
+      },
+      '&-subtitle': {
+        '@apply text-small font-normal block': {}
+      },
+      '&-divider': {
+        '@apply pt-8 pb-4': {}
+      }
+    }
+  };
+};
+//# sourceMappingURL=logo.js.map

package/dist/cjs/components/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","names":["module","exports","Logo"],"sources":["../../../src/components/logo.js"],"sourcesContent":["module.exports = Logo = () => ({\r\n  '.sk-logo': {\r\n    '@apply flex w-auto h-auto': {},\r\n    '@apply items-center': {},\r\n    '@apply text-dark-primary': {},\r\n    '&[data-inverted=\"true\"]': {\r\n      '@apply text-light-primary': {},\r\n      '.sk-logo-divider': {\r\n        '@apply border-inverted-divider': {},\r\n      },\r\n    },\r\n\r\n    '&-figure': {\r\n      '@apply w-full h-full': {},\r\n    },\r\n    '&[data-variant=\"service\"]': {\r\n      '@apply flex-row gap-6': {},\r\n      '@apply w-auto h-[6rem]': {},\r\n      '@apply pb-4': {},\r\n      '.sk-logo-figure': {\r\n        '@apply w-auto h-[5.6rem]': {},\r\n      },\r\n    },\r\n    'a:focus-within &': {\r\n      '@apply outline outline-2 outline-ring': {},\r\n    },\r\n    'a &': {\r\n      '@apply no-underline': {},\r\n    },\r\n    'a:hover &': {\r\n      '@apply underline': {},\r\n    },\r\n    '&-service-content': {\r\n      '@apply h-full w-max': {},\r\n      '@apply flex flex-col justify-center': {},\r\n      '@apply pl-2 pt-2 pr-8 pb-0': {},\r\n    },\r\n    '&-title': {\r\n      '@apply text-[2.2rem] leading-[2.8rem] font-header font-bold': {},\r\n    },\r\n    '&-subtitle': {\r\n      '@apply text-small font-normal block': {},\r\n    },\r\n    '&-divider': {\r\n      '@apply pt-8 pb-4': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,IAAI,GAAG,SAAAA,KAAA;EAAA,OAAO;IAC7B,UAAU,EAAE;MACV,2BAA2B,EAAE,CAAC,CAAC;MAC/B,qBAAqB,EAAE,CAAC,CAAC;MACzB,0BAA0B,EAAE,CAAC,CAAC;MAC9B,yBAAyB,EAAE;QACzB,2BAA2B,EAAE,CAAC,CAAC;QAC/B,kBAAkB,EAAE;UAClB,gCAAgC,EAAE,CAAC;QACrC;MACF,CAAC;MAED,UAAU,EAAE;QACV,sBAAsB,EAAE,CAAC;MAC3B,CAAC;MACD,2BAA2B,EAAE;QAC3B,uBAAuB,EAAE,CAAC,CAAC;QAC3B,wBAAwB,EAAE,CAAC,CAAC;QAC5B,aAAa,EAAE,CAAC,CAAC;QACjB,iBAAiB,EAAE;UACjB,0BAA0B,EAAE,CAAC;QAC/B;MACF,CAAC;MACD,kBAAkB,EAAE;QAClB,uCAAuC,EAAE,CAAC;MAC5C,CAAC;MACD,KAAK,EAAE;QACL,qBAAqB,EAAE,CAAC;MAC1B,CAAC;MACD,WAAW,EAAE;QACX,kBAAkB,EAAE,CAAC;MACvB,CAAC;MACD,mBAAmB,EAAE;QACnB,qBAAqB,EAAE,CAAC,CAAC;QACzB,qCAAqC,EAAE,CAAC,CAAC;QACzC,4BAA4B,EAAE,CAAC;MACjC,CAAC;MACD,SAAS,EAAE;QACT,6DAA6D,EAAE,CAAC;MAClE,CAAC;MACD,YAAY,EAAE;QACZ,qCAAqC,EAAE,CAAC;MAC1C,CAAC;MACD,WAAW,EAAE;QACX,kBAAkB,EAAE,CAAC;MACvB;IACF;EACF,CAAC;AAAA,CAAC"}

package/dist/cjs/components/menu-vertical.js

@@ -0,0 +1,234 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var svgToDataUri = require('mini-svg-data-uri');
+var MenuVerticalNav = function MenuVerticalNav() {
+  return {
+    '.sk-menu-vertical-nav': {
+      '.sk-menu-vertical': {
+        '@apply gap-12': {},
+        '&.ul, & ul': {
+          '@apply pt-12 pr-[1.6rem] pb-16': {}
+        },
+        '&-item': {
+          '.sk-menu-vertical-item-submenu': {
+            '@apply font-bold': {},
+            '&-medium': {
+              'button, a': {
+                '@apply py-[0.6rem] px-[1.4rem]': {}
+              }
+            },
+            '&-large': {
+              'button, a': {
+                '@apply text-large': {},
+                '@apply py-[1rem] px-[1.4rem]': {}
+              }
+            }
+          },
+          '.sk-menu-vertical-item-submenu-button:not([aria-disabled="true"])': {
+            '@apply text-dark-secondary': {}
+          }
+        }
+      }
+    }
+  };
+};
+var MenuVerticalSidebar = function MenuVerticalSidebar() {
+  return {
+    '.sk-menu-vertical-sidebar': {
+      '@apply rounded-button': {},
+      '> ul > li > .sk-menu-vertical-item-submenu': {
+        '> .sk-menu-vertical-item-submenu-button': {
+          '@apply min-h-[5.2rem]': {}
+        }
+      },
+      '> ul': {
+        '@apply py-16 px-24': {}
+      },
+      '.sk-menu-vertical': {
+        '@apply gap-12': {},
+        '&-header': {
+          '@apply bg-primary-surface': {},
+          '@apply rounded-t-button': {},
+          '@apply py-20 px-32': {},
+          '&, a': {
+            '@apply text-light-primary': {}
+          },
+          '.sk-divider': {
+            '@apply border-inverted-divider': {}
+          },
+          '.sk-logo': {
+            '@apply text-light-secondary': {}
+          }
+        },
+        '&.ul, & ul': {
+          '@apply py-8 pl-[2rem] ml-[2rem]': {}
+        },
+        'li ul': {
+          '@apply gap-8': {},
+          ul: {
+            li: {
+              '@apply text-small leading-[1.8rem]': {},
+              '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {
+                '@apply py-[0.6rem] px-[1.4rem]': {}
+              }
+            }
+          },
+          li: {
+            '@apply relative -ml-[.4rem]': {},
+            // hook
+            '&:before': {
+              content: "\"\"",
+              position: 'absolute',
+              display: 'inline-flex',
+              width: '2rem',
+              height: '4.4rem',
+              top: '-.8rem',
+              left: '-1.6rem',
+              backgroundImage: "url(\"" + svgToDataUri("<svg width=\"16\" height=\"52\" viewBox=\"0 0 16 52\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M1 17V17C1 24.1797 6.8203 30 14 30H15\" stroke=\"#B7B7BA\" stroke-linecap=\"round\" />\n            </svg>") + "\")",
+              backgroundRepeat: 'no-repeat'
+            },
+            // line
+            '&:not(:last-child):after': {
+              content: "\"\"",
+              position: 'absolute',
+              display: 'inline-flex',
+              width: '2rem',
+              top: '-.8rem',
+              bottom: 0,
+              left: '-1.6rem',
+              backgroundImage: "url(\"" + svgToDataUri("<svg width=\"16\" viewBox=\"0 0 16 52\" xmlns=\"http://www.w3.org/2000/svg\"> \n              <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"52\" stroke=\"#B7B7BA\" stroke-linecap=\"round\" /> \n            </svg> ") + "\")",
+              backgroundRepeat: 'repeat-y'
+            },
+            // lastline
+            '&:last-child:after': {
+              content: "\"\"",
+              position: 'absolute',
+              display: 'inline-flex',
+              width: '2rem',
+              top: '-.8rem',
+              bottom: 0,
+              left: '-1.6rem',
+              backgroundImage: "url(\"" + svgToDataUri("<svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" xmlns=\"http://www.w3.org/2000/svg\"> \n              <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"17\" stroke=\"#B7B7BA\" stroke-linecap=\"round\" /> \n            </svg> ") + "\")",
+              backgroundRepeat: 'no-repeat'
+            }
+          }
+        },
+        '&-item': {
+          '.sk-menu-vertical-item-submenu': {
+            '&-button': {
+              '@apply gap-8': {},
+              '&[aria-current="page"], &[aria-current="page"] ~ button': {
+                '@apply font-bold': {}
+              }
+            }
+          },
+          '> a, > button': {
+            '&[aria-current="page"]': {
+              '@apply font-bold': {}
+            }
+          }
+        }
+      }
+    }
+  };
+};
+module.exports = MenuVertical = function MenuVertical() {
+  return _extends({
+    '.sk-menu-vertical': {
+      '@apply flex flex-col': {},
+      '&.hide': {
+        '@apply hidden': {}
+      },
+      '&-backbutton': {
+        '@apply flex items-center gap-[1.6rem] text-lead mb-40': {}
+      },
+      '&-label': {
+        '@apply mb-24': {}
+      },
+      '&-item': {
+        '@apply flex flex-col': {},
+        '&.hide': {
+          '@apply hidden': {}
+        },
+        '[aria-disabled="true"]': {
+          '@apply cursor-default bg-transparent text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-7': {}
+        },
+        'a, button': {
+          '@apply flex': {},
+          color: 'unset'
+        },
+        '& > a, > button': {
+          '@apply flex items-center min-h-[4.4rem]': {},
+          '&:focus-visible': {
+            '@apply outline outline-2 outline-ring': {}
+          },
+          '> *': {
+            '@apply flex w-full py-[.6rem] px-[1.4rem]': {},
+            '@apply rounded-button cursor-pointer': {}
+          },
+          '&:not([aria-disabled="true"]) > *': {
+            '@apply bg-transparent text-dark-secondary': {}
+          },
+          '&:hover:not([aria-disabled="true"]) > *': {
+            '@apply bg-primitives-overlay-darken-3': {}
+          },
+          '&[aria-current="page"]:not(:hover) > *': {
+            '@apply bg-primary-surface text-light-primary': {},
+            '@apply focus-visible:ring': {}
+          }
+        },
+        '.sk-menu-vertical-item-submenu': {
+          '@apply flex justify-between w-full': {},
+          '@apply rounded-button': {},
+          '&:hover': {
+            '> a:not([aria-disabled="true"]), > button:not([aria-disabled="true"]), > a[aria-expanded="true"]:not([aria-disabled="true"]), > button[aria-expanded="true"]:not([aria-disabled="true"])': {
+              '@apply text-dark-primary bg-primitives-overlay-darken-3': {}
+            }
+          },
+          '&:focus-within': {
+            '@apply outline outline-2 outline-ring': {},
+            '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {
+              '&:focus-visible': {
+                '@apply ring-0 ring-offset-0 outline-0': {}
+              }
+            }
+          },
+          '&-medium': {
+            'button, a': {
+              '@apply py-[0.6rem] px-[1.4rem]': {}
+            }
+          },
+          '&-large': {
+            'button, a': {
+              '@apply py-[1rem] px-[1.4rem]': {}
+            }
+          },
+          '&-button, &-button-expand': {
+            '@apply items-center': {},
+            '@apply py-[1rem] px-[1.4rem]': {}
+          },
+          '&-button-expand': {
+            '@apply rounded-r-button rounded-l-0': {}
+          },
+          '&-button': {
+            '@apply text-left grow rounded-l-button rounded-r-0': {},
+            '&[aria-current="page"]:not(:hover), &[aria-current="page"]:not(:hover) ~ button:not(:hover)': {
+              '@apply bg-primary-surface text-light-primary': {}
+            },
+            '&[aria-expanded="true"]': {
+              '&:not(:hover,[aria-current="page"],[aria-disabled="true"]), &:not(:hover,[aria-current="page"],[aria-disabled="true"]) ~ button:not(:hover)': {
+                '@apply bg-vattjom-surface-accent': {}
+              }
+            }
+          }
+        },
+        '.sk-menu-vertical-item-tool-item': {
+          '@apply flex items-center gap-10 p-[.6rem] rounded-groups': {},
+          '.sk-avatar': {
+            '@apply border-2 border-background-content': {}
+          }
+        }
+      }
+    }
+  }, MenuVerticalNav(), MenuVerticalSidebar());
+};
+//# sourceMappingURL=menu-vertical.js.map

package/dist/cjs/components/menu-vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-vertical.js","names":["svgToDataUri","require","MenuVerticalNav","MenuVerticalSidebar","ul","li","content","position","display","width","height","top","left","backgroundImage","backgroundRepeat","bottom","module","exports","MenuVertical","_extends","color"],"sources":["../../../src/components/menu-vertical.js"],"sourcesContent":["const svgToDataUri = require('mini-svg-data-uri');\r\n\r\nconst MenuVerticalNav = () => ({\r\n  '.sk-menu-vertical-nav': {\r\n    '.sk-menu-vertical': {\r\n      '@apply gap-12': {},\r\n\r\n      '&.ul, & ul': {\r\n        '@apply pt-12 pr-[1.6rem] pb-16': {},\r\n      },\r\n\r\n      '&-item': {\r\n        '.sk-menu-vertical-item-submenu': {\r\n          '@apply font-bold': {},\r\n\r\n          '&-medium': {\r\n            'button, a': {\r\n              '@apply py-[0.6rem] px-[1.4rem]': {},\r\n            },\r\n          },\r\n          '&-large': {\r\n            'button, a': {\r\n              '@apply text-large': {},\r\n              '@apply py-[1rem] px-[1.4rem]': {},\r\n            },\r\n          },\r\n        },\r\n        '.sk-menu-vertical-item-submenu-button:not([aria-disabled=\"true\"])': {\r\n          '@apply text-dark-secondary': {},\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n\r\nconst MenuVerticalSidebar = () => ({\r\n  '.sk-menu-vertical-sidebar': {\r\n    '@apply rounded-button': {},\r\n\r\n    '> ul > li > .sk-menu-vertical-item-submenu': {\r\n      '> .sk-menu-vertical-item-submenu-button': {\r\n        '@apply min-h-[5.2rem]': {},\r\n      },\r\n    },\r\n\r\n    '> ul': {\r\n      '@apply py-16 px-24': {},\r\n    },\r\n\r\n    '.sk-menu-vertical': {\r\n      '@apply gap-12': {},\r\n\r\n      '&-header': {\r\n        '@apply bg-primary-surface': {},\r\n\r\n        '@apply rounded-t-button': {},\r\n        '@apply py-20 px-32': {},\r\n\r\n        '&, a': {\r\n          '@apply text-light-primary': {},\r\n        },\r\n\r\n        '.sk-divider': {\r\n          '@apply border-inverted-divider': {},\r\n        },\r\n\r\n        '.sk-logo': {\r\n          '@apply text-light-secondary': {},\r\n        },\r\n      },\r\n\r\n      '&.ul, & ul': {\r\n        '@apply py-8 pl-[2rem] ml-[2rem]': {},\r\n      },\r\n\r\n      'li ul': {\r\n        '@apply gap-8': {},\r\n\r\n        ul: {\r\n          li: {\r\n            '@apply text-small leading-[1.8rem]': {},\r\n\r\n            '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {\r\n              '@apply py-[0.6rem] px-[1.4rem]': {},\r\n            },\r\n          },\r\n        },\r\n\r\n        li: {\r\n          '@apply relative -ml-[.4rem]': {},\r\n\r\n          // hook\r\n          '&:before': {\r\n            content: `\"\"`,\r\n            position: 'absolute',\r\n            display: 'inline-flex',\r\n            width: '2rem',\r\n            height: '4.4rem',\r\n            top: '-.8rem',\r\n            left: '-1.6rem',\r\n            backgroundImage: `url(\"${svgToDataUri(\r\n              `<svg width=\"16\" height=\"52\" viewBox=\"0 0 16 52\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M1 17V17C1 24.1797 6.8203 30 14 30H15\" stroke=\"#B7B7BA\" stroke-linecap=\"round\" />\r\n            </svg>`\r\n            )}\")`,\r\n            backgroundRepeat: 'no-repeat',\r\n          },\r\n\r\n          // line\r\n          '&:not(:last-child):after': {\r\n            content: `\"\"`,\r\n            position: 'absolute',\r\n            display: 'inline-flex',\r\n            width: '2rem',\r\n            top: '-.8rem',\r\n            bottom: 0,\r\n            left: '-1.6rem',\r\n            backgroundImage: `url(\"${svgToDataUri(\r\n              `<svg width=\"16\" viewBox=\"0 0 16 52\" xmlns=\"http://www.w3.org/2000/svg\"> \r\n              <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"52\" stroke=\"#B7B7BA\" stroke-linecap=\"round\" /> \r\n            </svg> `\r\n            )}\")`,\r\n            backgroundRepeat: 'repeat-y',\r\n          },\r\n\r\n          // lastline\r\n          '&:last-child:after': {\r\n            content: `\"\"`,\r\n            position: 'absolute',\r\n            display: 'inline-flex',\r\n            width: '2rem',\r\n            top: '-.8rem',\r\n            bottom: 0,\r\n            left: '-1.6rem',\r\n            backgroundImage: `url(\"${svgToDataUri(\r\n              `<svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" xmlns=\"http://www.w3.org/2000/svg\"> \r\n              <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"17\" stroke=\"#B7B7BA\" stroke-linecap=\"round\" /> \r\n            </svg> `\r\n            )}\")`,\r\n            backgroundRepeat: 'no-repeat',\r\n          },\r\n        },\r\n      },\r\n      '&-item': {\r\n        '.sk-menu-vertical-item-submenu': {\r\n          '&-button': {\r\n            '@apply gap-8': {},\r\n\r\n            '&[aria-current=\"page\"], &[aria-current=\"page\"] ~ button': {\r\n              '@apply font-bold': {},\r\n            },\r\n          },\r\n        },\r\n\r\n        '> a, > button': {\r\n          '&[aria-current=\"page\"]': {\r\n            '@apply font-bold': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n\r\nmodule.exports = MenuVertical = () => ({\r\n  '.sk-menu-vertical': {\r\n    '@apply flex flex-col': {},\r\n\r\n    '&.hide': {\r\n      '@apply hidden': {},\r\n    },\r\n\r\n    '&-backbutton': {\r\n      '@apply flex items-center gap-[1.6rem] text-lead mb-40': {},\r\n    },\r\n\r\n    '&-label': {\r\n      '@apply mb-24': {},\r\n    },\r\n\r\n    '&-item': {\r\n      '@apply flex flex-col': {},\r\n\r\n      '&.hide': {\r\n        '@apply hidden': {},\r\n      },\r\n\r\n      '[aria-disabled=\"true\"]': {\r\n        '@apply cursor-default bg-transparent text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-7':\r\n          {},\r\n      },\r\n\r\n      'a, button': {\r\n        '@apply flex': {},\r\n        color: 'unset',\r\n      },\r\n\r\n      '& > a, > button': {\r\n        '@apply flex items-center min-h-[4.4rem]': {},\r\n\r\n        '&:focus-visible': {\r\n          '@apply outline outline-2 outline-ring': {},\r\n        },\r\n\r\n        '> *': {\r\n          '@apply flex w-full py-[.6rem] px-[1.4rem]': {},\r\n          '@apply rounded-button cursor-pointer': {},\r\n        },\r\n\r\n        '&:not([aria-disabled=\"true\"]) > *': {\r\n          '@apply bg-transparent text-dark-secondary': {},\r\n        },\r\n\r\n        '&:hover:not([aria-disabled=\"true\"]) > *': {\r\n          '@apply bg-primitives-overlay-darken-3': {},\r\n        },\r\n\r\n        '&[aria-current=\"page\"]:not(:hover) > *': {\r\n          '@apply bg-primary-surface text-light-primary': {},\r\n          '@apply focus-visible:ring': {},\r\n        },\r\n      },\r\n\r\n      '.sk-menu-vertical-item-submenu': {\r\n        '@apply flex justify-between w-full': {},\r\n        '@apply rounded-button': {},\r\n\r\n        '&:hover': {\r\n          '> a:not([aria-disabled=\"true\"]), > button:not([aria-disabled=\"true\"]), > a[aria-expanded=\"true\"]:not([aria-disabled=\"true\"]), > button[aria-expanded=\"true\"]:not([aria-disabled=\"true\"])':\r\n            {\r\n              '@apply text-dark-primary bg-primitives-overlay-darken-3': {},\r\n            },\r\n        },\r\n\r\n        '&:focus-within': {\r\n          '@apply outline outline-2 outline-ring': {},\r\n\r\n          '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {\r\n            '&:focus-visible': {\r\n              '@apply ring-0 ring-offset-0 outline-0': {},\r\n            },\r\n          },\r\n        },\r\n\r\n        '&-medium': {\r\n          'button, a': {\r\n            '@apply py-[0.6rem] px-[1.4rem]': {},\r\n          },\r\n        },\r\n        '&-large': {\r\n          'button, a': {\r\n            '@apply py-[1rem] px-[1.4rem]': {},\r\n          },\r\n        },\r\n\r\n        '&-button, &-button-expand': {\r\n          '@apply items-center': {},\r\n          '@apply py-[1rem] px-[1.4rem]': {},\r\n        },\r\n\r\n        '&-button-expand': {\r\n          '@apply rounded-r-button rounded-l-0': {},\r\n        },\r\n\r\n        '&-button': {\r\n          '@apply text-left grow rounded-l-button rounded-r-0': {},\r\n\r\n          '&[aria-current=\"page\"]:not(:hover), &[aria-current=\"page\"]:not(:hover) ~ button:not(:hover)': {\r\n            '@apply bg-primary-surface text-light-primary': {},\r\n          },\r\n\r\n          '&[aria-expanded=\"true\"]': {\r\n            '&:not(:hover,[aria-current=\"page\"],[aria-disabled=\"true\"]), &:not(:hover,[aria-current=\"page\"],[aria-disabled=\"true\"]) ~ button:not(:hover)':\r\n              {\r\n                '@apply bg-vattjom-surface-accent': {},\r\n              },\r\n          },\r\n        },\r\n      },\r\n\r\n      '.sk-menu-vertical-item-tool-item': {\r\n        '@apply flex items-center gap-10 p-[.6rem] rounded-groups': {},\r\n\r\n        '.sk-avatar': {\r\n          '@apply border-2 border-background-content': {},\r\n        },\r\n      },\r\n    },\r\n  },\r\n\r\n  ...MenuVerticalNav(),\r\n  ...MenuVerticalSidebar(),\r\n});\r\n"],"mappings":"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"}

package/dist/cjs/components/menubar.js

@@ -0,0 +1,44 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+module.exports = MenuBar = function MenuBar(colors) {
+  return {
+    '.sk-menubar': {
+      '@apply flex flex-row': {},
+      '@apply p-8 gap-16': {},
+      '@apply rounded-cards': {},
+      '&[data-background="true"]': {
+        '@apply bg-background-color-mixin-1': {}
+      },
+      '&-item': _extends({
+        '@apply inline-block': {},
+        '@apply relative': {},
+        '@apply h-40': {},
+        'a, button': {
+          color: 'unset'
+        },
+        '> *:first-child': {
+          '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {},
+          '@apply cursor-pointer': {},
+          '@apply bg-transparent text-dark-primary': {},
+          '@apply hover:bg-tertiary-surface': {},
+          '@apply font-bold': {},
+          '@apply gap-2 px-14 py-8': {},
+          '@apply h-full min-h-full': {},
+          '@apply text-base leading-base': {},
+          '@apply inline-flex shrink-0 flex-nowrap': {},
+          '@apply border-0': {},
+          '@apply focus-visible:bg-background-content focus-visible:ring': {},
+          '&[aria-current="page"]:not(:hover)': {
+            '@apply bg-primary-surface text-light-primary': {},
+            '@apply focus-visible:ring': {}
+          }
+        }
+      }, colors.reduce(function (styles, color) {
+        var _ariaCurrentPage, _firstChild, _extends2;
+        return _extends({}, styles, (_extends2 = {}, _extends2["&[data-color=\"" + color + "\"]"] = {
+          '> *:first-child': (_firstChild = {}, _firstChild["@apply hover:bg-" + color + "-surface-accent"] = {}, _firstChild["@apply hover:text-" + color + "-text-primary"] = {}, _firstChild['@apply focus-visible:bg-background-content focus-visible:ring'] = {}, _firstChild['&[aria-current="page"]:not(:hover)'] = (_ariaCurrentPage = {}, _ariaCurrentPage["@apply bg-" + color + "-surface-primary"] = {}, _ariaCurrentPage['@apply focus-visible:ring'] = {}, _ariaCurrentPage), _firstChild)
+        }, _extends2));
+      }, {}))
+    }
+  };
+};
+//# sourceMappingURL=menubar.js.map

package/dist/cjs/components/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":["module","exports","MenuBar","colors","_extends","color","reduce","styles","_ariaCurrentPage","_firstChild","_extends2"],"sources":["../../../src/components/menubar.js"],"sourcesContent":["module.exports = MenuBar = (colors) => ({\r\n  '.sk-menubar': {\r\n    '@apply flex flex-row': {},\r\n    '@apply p-8 gap-16': {},\r\n    '@apply rounded-cards': {},\r\n\r\n    '&[data-background=\"true\"]': {\r\n      '@apply bg-background-color-mixin-1': {},\r\n    },\r\n\r\n    '&-item': {\r\n      '@apply inline-block': {},\r\n      '@apply relative': {},\r\n      '@apply h-40': {},\r\n      'a, button': {\r\n        color: 'unset',\r\n      },\r\n\r\n      '> *:first-child': {\r\n        '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {},\r\n        '@apply cursor-pointer': {},\r\n        '@apply bg-transparent text-dark-primary': {},\r\n        '@apply hover:bg-tertiary-surface': {},\r\n        '@apply font-bold': {},\r\n        '@apply gap-2 px-14 py-8': {},\r\n        '@apply h-full min-h-full': {},\r\n        '@apply text-base leading-base': {},\r\n        '@apply inline-flex shrink-0 flex-nowrap': {},\r\n\r\n        '@apply border-0': {},\r\n        '@apply focus-visible:bg-background-content focus-visible:ring': {},\r\n        '&[aria-current=\"page\"]:not(:hover)': {\r\n          '@apply bg-primary-surface text-light-primary': {},\r\n          '@apply focus-visible:ring': {},\r\n        },\r\n      },\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            '> *:first-child': {\r\n              [`@apply hover:bg-${color}-surface-accent`]: {},\r\n              [`@apply hover:text-${color}-text-primary`]: {},\r\n              '@apply focus-visible:bg-background-content focus-visible:ring': {},\r\n              '&[aria-current=\"page\"]:not(:hover)': {\r\n                [`@apply bg-${color}-surface-primary`]: {},\r\n                '@apply focus-visible:ring': {},\r\n              },\r\n            },\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  },\r\n});\r\n"],"mappings":";AAAAA,MAAM,CAACC,OAAO,GAAGC,OAAO,GAAG,SAAAA,QAACC,MAAM;EAAA,OAAM;IACtC,aAAa,EAAE;MACb,sBAAsB,EAAE,CAAC,CAAC;MAC1B,mBAAmB,EAAE,CAAC,CAAC;MACvB,sBAAsB,EAAE,CAAC,CAAC;MAE1B,2BAA2B,EAAE;QAC3B,oCAAoC,EAAE,CAAC;MACzC,CAAC;MAED,QAAQ,EAAAC,QAAA;QACN,qBAAqB,EAAE,CAAC,CAAC;QACzB,iBAAiB,EAAE,CAAC,CAAC;QACrB,aAAa,EAAE,CAAC,CAAC;QACjB,WAAW,EAAE;UACXC,KAAK,EAAE;QACT,CAAC;QAED,iBAAiB,EAAE;UACjB,oEAAoE,EAAE,CAAC,CAAC;UACxE,uBAAuB,EAAE,CAAC,CAAC;UAC3B,yCAAyC,EAAE,CAAC,CAAC;UAC7C,kCAAkC,EAAE,CAAC,CAAC;UACtC,kBAAkB,EAAE,CAAC,CAAC;UACtB,yBAAyB,EAAE,CAAC,CAAC;UAC7B,0BAA0B,EAAE,CAAC,CAAC;UAC9B,+BAA+B,EAAE,CAAC,CAAC;UACnC,yCAAyC,EAAE,CAAC,CAAC;UAE7C,iBAAiB,EAAE,CAAC,CAAC;UACrB,+DAA+D,EAAE,CAAC,CAAC;UACnE,oCAAoC,EAAE;YACpC,8CAA8C,EAAE,CAAC,CAAC;YAClD,2BAA2B,EAAE,CAAC;UAChC;QACF;MAAC,GACEF,MAAM,CAACG,MAAM,CACd,UAACC,MAAM,EAAEF,KAAK;QAAA,IAAAG,gBAAA,EAAAC,WAAA,EAAAC,SAAA;QAAA,OAAAN,QAAA,KACTG,MAAM,GAAAG,SAAA,OAAAA,SAAA,qBACSL,KAAK,YAAO;UAC5B,iBAAiB,GAAAI,WAAA,OAAAA,WAAA,sBACKJ,KAAK,wBAAoB,CAAC,CAAC,EAAAI,WAAA,wBACzBJ,KAAK,sBAAkB,CAAC,CAAC,EAAAI,WAAA,CAC/C,+DAA+D,IAAE,CAAC,CAAC,EAAAA,WAAA,CACnE,oCAAoC,KAAAD,gBAAA,OAAAA,gBAAA,gBACpBH,KAAK,yBAAqB,CAAC,CAAC,EAAAG,gBAAA,CAC1C,2BAA2B,IAAE,CAAC,CAAC,EAAAA,gBAAA,GAAAC,WAAA;QAGrC,CAAC,EAAAC,SAAA;MAAA,CACD,EACF,CAAC,CACH,CAAC;IAEL;EACF,CAAC;AAAA,CAAC"}

package/dist/cjs/components/modal.js

@@ -1,24 +1,44 @@
 module.exports = Modal = function Modal() {
   return {
-    '.modal': {
-      '@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},
-      '&-backdrop': {
-        '@apply bg-black bg-opacity-30': {}
-      },
+    '.sk-modal': {
+      // '@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},
+
       '&-wrapper': {
-        '@apply flex flex-col container py-8 px-4 text-center bg-white max-w-screen-sm relative': {}
+        '@apply fixed inset-0 z-20 overflow-y-auto': {},
+        '@apply bg-primitives-overlay-darken-6': {},
+        '@apply dark:bg-primitives-overlay-darken-8': {},
+        '&-inner': {
+          '@apply min-h-screen px-4 text-center': {}
+        }
       },
-      '&-close-btn': {
-        '@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center': {}
+      '&-overlay': {
+        '@apply fixed inset-0': {}
       },
-      '&-title': {
-        '@apply text-3xl p-4': {}
+      '&-dialog': {
+        '@apply inline-flex flex-col': {},
+        '@apply text-left': {},
+        '@apply align-middle': {},
+        '@apply transition-all transform': {},
+        '@apply rounded-cards': {},
+        '@apply bg-background-content': {},
+        '@apply dark:bg-background-100': {},
+        '@apply px-24 pt-24 pb-40': {},
+        '@apply gap-16': {},
+        '&-header': {
+          '@apply flex justify-between items-center w-full': {},
+          '&-title': {
+            '@apply grow': {},
+            '@apply text-label-medium': {}
+          }
+        }
       },
-      '&-description': {
-        '@apply text-base p-4': {}
+      '&-content': {
+        '@apply flex flex-col': {},
+        '@apply py-8 pb-16 gap-12': {}
       },
-      '&-content-wrapper': {
-        '@apply p-4 space-y-10': {}
+      '&-footer': {
+        '@apply flex flex-row justify-start': {},
+        '@apply p-0 gap-12': {}
       }
     }
   };

package/dist/cjs/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["module","exports","Modal"],"sources":["../../../src/components/modal.js"],"sourcesContent":["module.exports = Modal = () => ({\r\n  '.modal': {\r\n    '@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},\r\n\r\n    '&-backdrop': {\r\n      '@apply bg-black bg-opacity-30': {},\r\n    },\r\n\r\n    '&-wrapper': {\r\n      '@apply flex flex-col container py-8 px-4 text-center bg-white max-w-screen-sm relative': {},\r\n    },\r\n\r\n    '&-close-btn': {\r\n      '@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center':\r\n        {},\r\n    },\r\n\r\n    '&-title': {\r\n      '@apply text-3xl p-4': {},\r\n    },\r\n\r\n    '&-description': {\r\n      '@apply text-base p-4': {},\r\n    },\r\n\r\n    '&-content-wrapper': {\r\n      '@apply p-4 space-y-10': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,KAAK,GAAG,SAAAA,MAAA;EAAA,OAAO;IAC9B,QAAQ,EAAE;MACR,4EAA4E,EAAE,CAAC,CAAC;MAEhF,YAAY,EAAE;QACZ,+BAA+B,EAAE,CAAC;MACpC,CAAC;MAED,WAAW,EAAE;QACX,wFAAwF,EAAE,CAAC;MAC7F,CAAC;MAED,aAAa,EAAE;QACb,8IAA8I,EAC5I,CAAC;MACL,CAAC;MAED,SAAS,EAAE;QACT,qBAAqB,EAAE,CAAC;MAC1B,CAAC;MAED,eAAe,EAAE;QACf,sBAAsB,EAAE,CAAC;MAC3B,CAAC;MAED,mBAAmB,EAAE;QACnB,uBAAuB,EAAE,CAAC;MAC5B;IACF;EACF,CAAC;AAAA,CAAC"}
+{"version":3,"file":"modal.js","names":["module","exports","Modal"],"sources":["../../../src/components/modal.js"],"sourcesContent":["module.exports = Modal = () => ({\r\n  '.sk-modal': {\r\n    // '@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},\r\n\r\n    '&-wrapper': {\r\n      '@apply fixed inset-0 z-20 overflow-y-auto': {},\r\n      '@apply bg-primitives-overlay-darken-6': {},\r\n      '@apply dark:bg-primitives-overlay-darken-8': {},\r\n\r\n      '&-inner': {\r\n        '@apply min-h-screen px-4 text-center': {},\r\n      },\r\n    },\r\n\r\n    '&-overlay': {\r\n      '@apply fixed inset-0': {},\r\n    },\r\n\r\n    '&-dialog': {\r\n      '@apply inline-flex flex-col': {},\r\n      '@apply text-left': {},\r\n      '@apply align-middle': {},\r\n      '@apply transition-all transform': {},\r\n      '@apply rounded-cards': {},\r\n      '@apply bg-background-content': {},\r\n      '@apply dark:bg-background-100': {},\r\n      '@apply px-24 pt-24 pb-40': {},\r\n      '@apply gap-16': {},\r\n\r\n      '&-header': {\r\n        '@apply flex justify-between items-center w-full': {},\r\n        '&-title': {\r\n          '@apply grow': {},\r\n          '@apply text-label-medium': {},\r\n        },\r\n      },\r\n    },\r\n    '&-content': {\r\n      '@apply flex flex-col': {},\r\n      '@apply py-8 pb-16 gap-12': {},\r\n    },\r\n    '&-footer': {\r\n      '@apply flex flex-row justify-start': {},\r\n      '@apply p-0 gap-12': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,KAAK,GAAG,SAAAA,MAAA;EAAA,OAAO;IAC9B,WAAW,EAAE;MACX;;MAEA,WAAW,EAAE;QACX,2CAA2C,EAAE,CAAC,CAAC;QAC/C,uCAAuC,EAAE,CAAC,CAAC;QAC3C,4CAA4C,EAAE,CAAC,CAAC;QAEhD,SAAS,EAAE;UACT,sCAAsC,EAAE,CAAC;QAC3C;MACF,CAAC;MAED,WAAW,EAAE;QACX,sBAAsB,EAAE,CAAC;MAC3B,CAAC;MAED,UAAU,EAAE;QACV,6BAA6B,EAAE,CAAC,CAAC;QACjC,kBAAkB,EAAE,CAAC,CAAC;QACtB,qBAAqB,EAAE,CAAC,CAAC;QACzB,iCAAiC,EAAE,CAAC,CAAC;QACrC,sBAAsB,EAAE,CAAC,CAAC;QAC1B,8BAA8B,EAAE,CAAC,CAAC;QAClC,+BAA+B,EAAE,CAAC,CAAC;QACnC,0BAA0B,EAAE,CAAC,CAAC;QAC9B,eAAe,EAAE,CAAC,CAAC;QAEnB,UAAU,EAAE;UACV,iDAAiD,EAAE,CAAC,CAAC;UACrD,SAAS,EAAE;YACT,aAAa,EAAE,CAAC,CAAC;YACjB,0BAA0B,EAAE,CAAC;UAC/B;QACF;MACF,CAAC;MACD,WAAW,EAAE;QACX,sBAAsB,EAAE,CAAC,CAAC;QAC1B,0BAA0B,EAAE,CAAC;MAC/B,CAAC;MACD,UAAU,EAAE;QACV,oCAAoC,EAAE,CAAC,CAAC;QACxC,mBAAmB,EAAE,CAAC;MACxB;IACF;EACF,CAAC;AAAA,CAAC"}

package/dist/cjs/components/notification.js

@@ -1,7 +1,7 @@
 module.exports = Notification = function Notification() {
   return {
     '.notification': {
-      '@apply relative flex p-4 text-sm w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md': {},
+      '@apply relative flex p-4 text-small w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md': {},
       '@apply text-body bg-white border border-neutral-200': {},
       // dark
       '@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {}
@@ -39,7 +39,7 @@ module.exports = Notification = function Notification() {
       right: 16,
       top: 16,
       '&-undo': {
-        '@apply h-auto p-0 text-sm': {}
+        '@apply h-auto p-0 text-small': {}
       },
       '&-close-button': {
         '@apply cursor-base text-neutral-700 hover:text-body': {},

package/dist/cjs/components/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":["module","exports","Notification","color","right","top"],"sources":["../../../src/components/notification.js"],"sourcesContent":["module.exports = Notification = () => ({\r\n  '.notification': {\r\n    '@apply relative flex p-4 text-sm w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md': {},\r\n    '@apply text-body bg-white border border-neutral-200': {},\r\n    // dark\r\n    '@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {},\r\n  },\r\n\r\n  '.notification-icon': {\r\n    '@apply flex-shrink-0 w-5 h-5 mr-3': {},\r\n\r\n    '&-info': {\r\n      '--tw-text-opacity': '1',\r\n      color: 'rgba(59, 130, 246, var(--tw-text-opacity))',\r\n    },\r\n    '&-success': {\r\n      '--tw-text-opacity': '1',\r\n      color: 'rgba(34, 197, 94, var(--tw-text-opacity))',\r\n    },\r\n    '&-error': {\r\n      '--tw-text-opacity': '1',\r\n      color: 'rgba(239, 68, 68, var(--tw-text-opacity))',\r\n    },\r\n    '&-warning': {\r\n      '--tw-text-opacity': '1',\r\n      color: 'rgba(234, 179, 8, var(--tw-text-opacity))',\r\n    },\r\n  },\r\n\r\n  '.notification-content': {\r\n    '@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left': {},\r\n\r\n    '&-title': {\r\n      '@apply font-semibold': {},\r\n    },\r\n\r\n    '&-description': {\r\n      '@apply text-neutral-500 dark:text-neutral-400': {},\r\n    },\r\n  },\r\n\r\n  '.notification-action': {\r\n    '@apply absolute space-x-2': {},\r\n    right: 16,\r\n    top: 16,\r\n\r\n    '&-undo': {\r\n      '@apply h-auto p-0 text-sm': {},\r\n    },\r\n\r\n    '&-close-button': {\r\n      '@apply cursor-base text-neutral-700 hover:text-body': {},\r\n      '@apply dark:text-neutral-400 dark:hover:text-neutral-100': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,YAAY,GAAG,SAAAA,aAAA;EAAA,OAAO;IACrC,eAAe,EAAE;MACf,yFAAyF,EAAE,CAAC,CAAC;MAC7F,qDAAqD,EAAE,CAAC,CAAC;MACzD;MACA,0EAA0E,EAAE,CAAC;IAC/E,CAAC;IAED,oBAAoB,EAAE;MACpB,mCAAmC,EAAE,CAAC,CAAC;MAEvC,QAAQ,EAAE;QACR,mBAAmB,EAAE,GAAG;QACxBC,KAAK,EAAE;MACT,CAAC;MACD,WAAW,EAAE;QACX,mBAAmB,EAAE,GAAG;QACxBA,KAAK,EAAE;MACT,CAAC;MACD,SAAS,EAAE;QACT,mBAAmB,EAAE,GAAG;QACxBA,KAAK,EAAE;MACT,CAAC;MACD,WAAW,EAAE;QACX,mBAAmB,EAAE,GAAG;QACxBA,KAAK,EAAE;MACT;IACF,CAAC;IAED,uBAAuB,EAAE;MACvB,+DAA+D,EAAE,CAAC,CAAC;MAEnE,SAAS,EAAE;QACT,sBAAsB,EAAE,CAAC;MAC3B,CAAC;MAED,eAAe,EAAE;QACf,+CAA+C,EAAE,CAAC;MACpD;IACF,CAAC;IAED,sBAAsB,EAAE;MACtB,2BAA2B,EAAE,CAAC,CAAC;MAC/BC,KAAK,EAAE,EAAE;MACTC,GAAG,EAAE,EAAE;MAEP,QAAQ,EAAE;QACR,2BAA2B,EAAE,CAAC;MAChC,CAAC;MAED,gBAAgB,EAAE;QAChB,qDAAqD,EAAE,CAAC,CAAC;QACzD,0DAA0D,EAAE,CAAC;MAC/D;IACF;EACF,CAAC;AAAA,CAAC"}
+{"version":3,"file":"notification.js","names":["module","exports","Notification","color","right","top"],"sources":["../../../src/components/notification.js"],"sourcesContent":["module.exports = Notification = () => ({\r\n  '.notification': {\r\n    '@apply relative flex p-4 text-small w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md': {},\r\n    '@apply text-body bg-white border border-neutral-200': {},\r\n    // dark\r\n    '@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {},\r\n  },\r\n\r\n  '.notification-icon': {\r\n    '@apply flex-shrink-0 w-5 h-5 mr-3': {},\r\n\r\n    '&-info': {\r\n      '--tw-text-opacity': '1',\r\n      color: 'rgba(59, 130, 246, var(--tw-text-opacity))',\r\n    },\r\n    '&-success': {\r\n      '--tw-text-opacity': '1',\r\n      color: 'rgba(34, 197, 94, var(--tw-text-opacity))',\r\n    },\r\n    '&-error': {\r\n      '--tw-text-opacity': '1',\r\n      color: 'rgba(239, 68, 68, var(--tw-text-opacity))',\r\n    },\r\n    '&-warning': {\r\n      '--tw-text-opacity': '1',\r\n      color: 'rgba(234, 179, 8, var(--tw-text-opacity))',\r\n    },\r\n  },\r\n\r\n  '.notification-content': {\r\n    '@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left': {},\r\n\r\n    '&-title': {\r\n      '@apply font-semibold': {},\r\n    },\r\n\r\n    '&-description': {\r\n      '@apply text-neutral-500 dark:text-neutral-400': {},\r\n    },\r\n  },\r\n\r\n  '.notification-action': {\r\n    '@apply absolute space-x-2': {},\r\n    right: 16,\r\n    top: 16,\r\n\r\n    '&-undo': {\r\n      '@apply h-auto p-0 text-small': {},\r\n    },\r\n\r\n    '&-close-button': {\r\n      '@apply cursor-base text-neutral-700 hover:text-body': {},\r\n      '@apply dark:text-neutral-400 dark:hover:text-neutral-100': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,YAAY,GAAG,SAAAA,aAAA;EAAA,OAAO;IACrC,eAAe,EAAE;MACf,4FAA4F,EAAE,CAAC,CAAC;MAChG,qDAAqD,EAAE,CAAC,CAAC;MACzD;MACA,0EAA0E,EAAE,CAAC;IAC/E,CAAC;IAED,oBAAoB,EAAE;MACpB,mCAAmC,EAAE,CAAC,CAAC;MAEvC,QAAQ,EAAE;QACR,mBAAmB,EAAE,GAAG;QACxBC,KAAK,EAAE;MACT,CAAC;MACD,WAAW,EAAE;QACX,mBAAmB,EAAE,GAAG;QACxBA,KAAK,EAAE;MACT,CAAC;MACD,SAAS,EAAE;QACT,mBAAmB,EAAE,GAAG;QACxBA,KAAK,EAAE;MACT,CAAC;MACD,WAAW,EAAE;QACX,mBAAmB,EAAE,GAAG;QACxBA,KAAK,EAAE;MACT;IACF,CAAC;IAED,uBAAuB,EAAE;MACvB,+DAA+D,EAAE,CAAC,CAAC;MAEnE,SAAS,EAAE;QACT,sBAAsB,EAAE,CAAC;MAC3B,CAAC;MAED,eAAe,EAAE;QACf,+CAA+C,EAAE,CAAC;MACpD;IACF,CAAC;IAED,sBAAsB,EAAE;MACtB,2BAA2B,EAAE,CAAC,CAAC;MAC/BC,KAAK,EAAE,EAAE;MACTC,GAAG,EAAE,EAAE;MAEP,QAAQ,EAAE;QACR,8BAA8B,EAAE,CAAC;MACnC,CAAC;MAED,gBAAgB,EAAE;QAChB,qDAAqD,EAAE,CAAC,CAAC;QACzD,0DAA0D,EAAE,CAAC;MAC/D;IACF;EACF,CAAC;AAAA,CAAC"}