@pup_roko/ui-kit 1.0.1 → 1.0.3

package/dist/index.css

@@ -0,0 +1,994 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222222;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Georgia", serif;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 8px;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+a {
+  color: #0099aa;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+.xs {
+  padding: 4px;
+}
+
+.sm {
+  padding: 8px;
+}
+
+.md {
+  padding: 16px;
+}
+
+.lg {
+  padding: 24px;
+}
+
+.xl {
+  padding: 32px;
+}
+
+.xxl {
+  padding: 48px;
+}
+
+.info {
+  color: #ffddff;
+  background-color: #770077;
+}
+
+.success {
+  color: #ddffdd;
+  background-color: #007700;
+}
+
+.warning {
+  color: #ffffdd;
+  background-color: #777700;
+}
+
+.alert {
+  color: #ffddaa;
+  background-color: #bb7700;
+}
+
+.error {
+  color: #ffdddd;
+  background-color: #770000;
+}
+
+.info-inverted {
+  color: #770077;
+  background-color: #ffddff;
+}
+
+.success-inverted {
+  color: #007700;
+  background-color: #ddffdd;
+}
+
+.warning-inverted {
+  color: #777700;
+  background-color: #ffffdd;
+}
+
+.alert-inverted {
+  color: #bb7700;
+  background-color: #ffddaa;
+}
+
+.error-inverted {
+  color: #770000;
+  background-color: #ffdddd;
+}
+
+.body-container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 8px;
+}
+@media screen and (max-width: 648px) {
+  .body-container {
+    max-width: 600px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 649px) and (max-width: 1024px) {
+  .body-container {
+    max-width: 900px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .body-container {
+    max-width: 1200px;
+    padding: 0 8px;
+  }
+}
+
+button {
+  border: none;
+  border-radius: 4px;
+  padding: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+button:hover:not(:disabled) {
+  opacity: 0.8;
+}
+button:disabled {
+  background-color: #dddddd;
+  color: #888888;
+  cursor: not-allowed;
+}
+button img {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  filter: brightness(100%) saturate(100%) invert(100%);
+  opacity: 0.8;
+}
+button :where(*) {
+  color: inherit;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222222;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Georgia", serif;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 8px;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+a {
+  color: #0099aa;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+.xs {
+  padding: 4px;
+}
+
+.sm {
+  padding: 8px;
+}
+
+.md {
+  padding: 16px;
+}
+
+.lg {
+  padding: 24px;
+}
+
+.xl {
+  padding: 32px;
+}
+
+.xxl {
+  padding: 48px;
+}
+
+.info {
+  color: #ffddff;
+  background-color: #770077;
+}
+
+.success {
+  color: #ddffdd;
+  background-color: #007700;
+}
+
+.warning {
+  color: #ffffdd;
+  background-color: #777700;
+}
+
+.alert {
+  color: #ffddaa;
+  background-color: #bb7700;
+}
+
+.error {
+  color: #ffdddd;
+  background-color: #770000;
+}
+
+.info-inverted {
+  color: #770077;
+  background-color: #ffddff;
+}
+
+.success-inverted {
+  color: #007700;
+  background-color: #ddffdd;
+}
+
+.warning-inverted {
+  color: #777700;
+  background-color: #ffffdd;
+}
+
+.alert-inverted {
+  color: #bb7700;
+  background-color: #ffddaa;
+}
+
+.error-inverted {
+  color: #770000;
+  background-color: #ffdddd;
+}
+
+.body-container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 8px;
+}
+@media screen and (max-width: 648px) {
+  .body-container {
+    max-width: 600px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 649px) and (max-width: 1024px) {
+  .body-container {
+    max-width: 900px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .body-container {
+    max-width: 1200px;
+    padding: 0 8px;
+  }
+}
+
+.filter {
+  border: 1px solid #888888;
+  background-color: #dddddd;
+  opacity: 0.8;
+  border-radius: 16px;
+  padding: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
+.filter:hover:not(:disabled) {
+  opacity: 1;
+}
+.filter:disabled {
+  cursor: not-allowed;
+}
+.filter img {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  filter: brightness(100%) saturate(100%) invert(100%);
+  opacity: 0.8;
+}
+.filter input {
+  border: none;
+  border-radius: 2px;
+  background-color: transparent;
+  padding: 4px;
+}
+.filter :where(*) {
+  color: inherit;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222222;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Georgia", serif;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 8px;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+a {
+  color: #0099aa;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+.xs {
+  padding: 4px;
+}
+
+.sm {
+  padding: 8px;
+}
+
+.md {
+  padding: 16px;
+}
+
+.lg {
+  padding: 24px;
+}
+
+.xl {
+  padding: 32px;
+}
+
+.xxl {
+  padding: 48px;
+}
+
+.info {
+  color: #ffddff;
+  background-color: #770077;
+}
+
+.success {
+  color: #ddffdd;
+  background-color: #007700;
+}
+
+.warning {
+  color: #ffffdd;
+  background-color: #777700;
+}
+
+.alert {
+  color: #ffddaa;
+  background-color: #bb7700;
+}
+
+.error {
+  color: #ffdddd;
+  background-color: #770000;
+}
+
+.info-inverted {
+  color: #770077;
+  background-color: #ffddff;
+}
+
+.success-inverted {
+  color: #007700;
+  background-color: #ddffdd;
+}
+
+.warning-inverted {
+  color: #777700;
+  background-color: #ffffdd;
+}
+
+.alert-inverted {
+  color: #bb7700;
+  background-color: #ffddaa;
+}
+
+.error-inverted {
+  color: #770000;
+  background-color: #ffdddd;
+}
+
+.body-container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 8px;
+}
+@media screen and (max-width: 648px) {
+  .body-container {
+    max-width: 600px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 649px) and (max-width: 1024px) {
+  .body-container {
+    max-width: 900px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .body-container {
+    max-width: 1200px;
+    padding: 0 8px;
+  }
+}
+
+.card {
+  border: none;
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+}
+.card :where(*) {
+  color: inherit;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222222;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Georgia", serif;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 8px;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+a {
+  color: #0099aa;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+.xs {
+  padding: 4px;
+}
+
+.sm {
+  padding: 8px;
+}
+
+.md {
+  padding: 16px;
+}
+
+.lg {
+  padding: 24px;
+}
+
+.xl {
+  padding: 32px;
+}
+
+.xxl {
+  padding: 48px;
+}
+
+.info {
+  color: #ffddff;
+  background-color: #770077;
+}
+
+.success {
+  color: #ddffdd;
+  background-color: #007700;
+}
+
+.warning {
+  color: #ffffdd;
+  background-color: #777700;
+}
+
+.alert {
+  color: #ffddaa;
+  background-color: #bb7700;
+}
+
+.error {
+  color: #ffdddd;
+  background-color: #770000;
+}
+
+.info-inverted {
+  color: #770077;
+  background-color: #ffddff;
+}
+
+.success-inverted {
+  color: #007700;
+  background-color: #ddffdd;
+}
+
+.warning-inverted {
+  color: #777700;
+  background-color: #ffffdd;
+}
+
+.alert-inverted {
+  color: #bb7700;
+  background-color: #ffddaa;
+}
+
+.error-inverted {
+  color: #770000;
+  background-color: #ffdddd;
+}
+
+.body-container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 8px;
+}
+@media screen and (max-width: 648px) {
+  .body-container {
+    max-width: 600px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 649px) and (max-width: 1024px) {
+  .body-container {
+    max-width: 900px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .body-container {
+    max-width: 1200px;
+    padding: 0 8px;
+  }
+}
+
+.pill {
+  display: flex;
+  width: fit-content;
+  font-size: 14px;
+  padding: 8px 16px;
+  border-radius: 24px;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222222;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Georgia", serif;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 8px;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+a {
+  color: #0099aa;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+.xs {
+  padding: 4px;
+}
+
+.sm {
+  padding: 8px;
+}
+
+.md {
+  padding: 16px;
+}
+
+.lg {
+  padding: 24px;
+}
+
+.xl {
+  padding: 32px;
+}
+
+.xxl {
+  padding: 48px;
+}
+
+.info {
+  color: #ffddff;
+  background-color: #770077;
+}
+
+.success {
+  color: #ddffdd;
+  background-color: #007700;
+}
+
+.warning {
+  color: #ffffdd;
+  background-color: #777700;
+}
+
+.alert {
+  color: #ffddaa;
+  background-color: #bb7700;
+}
+
+.error {
+  color: #ffdddd;
+  background-color: #770000;
+}
+
+.info-inverted {
+  color: #770077;
+  background-color: #ffddff;
+}
+
+.success-inverted {
+  color: #007700;
+  background-color: #ddffdd;
+}
+
+.warning-inverted {
+  color: #777700;
+  background-color: #ffffdd;
+}
+
+.alert-inverted {
+  color: #bb7700;
+  background-color: #ffddaa;
+}
+
+.error-inverted {
+  color: #770000;
+  background-color: #ffdddd;
+}
+
+.body-container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 8px;
+}
+@media screen and (max-width: 648px) {
+  .body-container {
+    max-width: 600px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 649px) and (max-width: 1024px) {
+  .body-container {
+    max-width: 900px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .body-container {
+    max-width: 1200px;
+    padding: 0 8px;
+  }
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+}
+.header section {
+  display: flex;
+  gap: 16px;
+  justify-content: left;
+  width: 100%;
+}
+.header :where(*) {
+  color: inherit;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222222;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Georgia", serif;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 8px;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+a {
+  color: #0099aa;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+.xs {
+  padding: 4px;
+}
+
+.sm {
+  padding: 8px;
+}
+
+.md {
+  padding: 16px;
+}
+
+.lg {
+  padding: 24px;
+}
+
+.xl {
+  padding: 32px;
+}
+
+.xxl {
+  padding: 48px;
+}
+
+.info {
+  color: #ffddff;
+  background-color: #770077;
+}
+
+.success {
+  color: #ddffdd;
+  background-color: #007700;
+}
+
+.warning {
+  color: #ffffdd;
+  background-color: #777700;
+}
+
+.alert {
+  color: #ffddaa;
+  background-color: #bb7700;
+}
+
+.error {
+  color: #ffdddd;
+  background-color: #770000;
+}
+
+.info-inverted {
+  color: #770077;
+  background-color: #ffddff;
+}
+
+.success-inverted {
+  color: #007700;
+  background-color: #ddffdd;
+}
+
+.warning-inverted {
+  color: #777700;
+  background-color: #ffffdd;
+}
+
+.alert-inverted {
+  color: #bb7700;
+  background-color: #ffddaa;
+}
+
+.error-inverted {
+  color: #770000;
+  background-color: #ffdddd;
+}
+
+.body-container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 8px;
+}
+@media screen and (max-width: 648px) {
+  .body-container {
+    max-width: 600px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 649px) and (max-width: 1024px) {
+  .body-container {
+    max-width: 900px;
+    padding: 0 8px;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .body-container {
+    max-width: 1200px;
+    padding: 0 8px;
+  }
+}
+
+.grey-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 20;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["button.scss","filter.scss","card.scss","pill.scss","header.scss","greyScreen.scss"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: \"Georgia\", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\nbutton {\n  border: none;\n  border-radius: 4px;\n  padding: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\nbutton:hover:not(:disabled) {\n  opacity: 0.8;\n}\nbutton:disabled {\n  background-color: #dddddd;\n  color: #888888;\n  cursor: not-allowed;\n}\nbutton img {\n  width: 20px;\n  height: 20px;\n  margin-right: 4px;\n  filter: brightness(100%) saturate(100%) invert(100%);\n  opacity: 0.8;\n}\nbutton :where(*) {\n  color: inherit;\n}","* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: \"Georgia\", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.filter {\n  border: 1px solid #888888;\n  background-color: #dddddd;\n  opacity: 0.8;\n  border-radius: 16px;\n  padding: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n}\n.filter:hover:not(:disabled) {\n  opacity: 1;\n}\n.filter:disabled {\n  cursor: not-allowed;\n}\n.filter img {\n  width: 20px;\n  height: 20px;\n  margin-right: 4px;\n  filter: brightness(100%) saturate(100%) invert(100%);\n  opacity: 0.8;\n}\n.filter input {\n  border: none;\n  border-radius: 2px;\n  background-color: transparent;\n  padding: 4px;\n}\n.filter :where(*) {\n  color: inherit;\n}","* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: \"Georgia\", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.card {\n  border: none;\n  border-radius: 16px;\n  padding: 16px;\n  display: flex;\n}\n.card :where(*) {\n  color: inherit;\n}","* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: \"Georgia\", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.pill {\n  display: flex;\n  width: fit-content;\n  font-size: 14px;\n  padding: 8px 16px;\n  border-radius: 24px;\n}","* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: \"Georgia\", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.header {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n}\n.header section {\n  display: flex;\n  gap: 16px;\n  justify-content: left;\n  width: 100%;\n}\n.header :where(*) {\n  color: inherit;\n}","* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: \"Georgia\", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.grey-screen {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 20;\n}"]}

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@pup_roko/ui-kit",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "style": "src/styles/main.scss",
+  "style": "dist/index.css",
+  "sass": "src/styles/main.scss",
   "files": [
     "dist",
     "src/styles/main.scss"
   ],
   "types": "dist/index.d.ts",
   "sideEffects": [
+    "dist/index.css",
     "src/styles/main.scss"
   ],
   "exports": {
@@ -19,7 +21,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles/main.scss": "./src/styles/main.scss"
+    "./styles/main.scss": "./src/styles/main.scss",
+    "./styles.css": "./dist/index.css"
   },
   "scripts": {
     "start": "rollup -c --bundleConfigAsCjs",