@bagelink/vue 0.0.378 → 0.0.390

package/dist/plugins/modal.d.ts

@@ -5,6 +5,7 @@ export interface ModalOptions {
     title?: string;
     dismissable?: boolean;
     side?: boolean;
+    width?: string;
     actions?: BtnOptions[];
     class?: string;
     visible?: boolean;
@@ -13,6 +14,7 @@ export interface ModalFormOptions {
     side?: boolean;
     title?: string;
     visible?: boolean;
+    width?: string;
     dismissable?: boolean;
     schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT;
     onSubmit?: (formData: any) => any;

package/dist/plugins/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACf,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,cAAc,CAAA;IACrE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,WAAW,CAAC;IACjC,YAAY,EAAE,YAAY,GAAG,gBAAgB,CAAA;CAC7C;AACD,MAAM,WAAW,uBAAuB;IACvC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAA;CAC9B;AACD,MAAM,WAAW,QAAQ;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,uBAAuB,GAAG,SAAS,CAAC;IAC/G,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAC;AAEnE,eAAO,MAAM,QAAQ,QAAO,QAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAyCzB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACf,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,cAAc,CAAA;IACrE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,WAAW,CAAC;IACjC,YAAY,EAAE,YAAY,GAAG,gBAAgB,CAAA;CAC7C;AACD,MAAM,WAAW,uBAAuB;IACvC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAA;CAC9B;AACD,MAAM,WAAW,QAAQ;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,uBAAuB,GAAG,SAAS,CAAC;IAC/G,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAC;AAEnE,eAAO,MAAM,QAAQ,QAAO,QAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAyCzB,CAAC"}

package/dist/style.css

@@ -376,161 +376,161 @@ a[data-v-d09a83c5] {
   filter: brightness(80%);
 }
 .bg-dark {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 999;
-  pointer-events: none;
-  opacity: 0;
-  transition: all ease-in-out 0.3s;
-  max-height: 100vh;
-  overflow: auto;
-  margin: 0 auto;
-  width: 100%;
-  text-align: center;
-  display: grid;
-  align-items: center;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 999;
+	pointer-events: none;
+	opacity: 0;
+	transition: all ease-in-out 0.3s;
+	max-height: 100vh;
+	overflow: auto;
+	margin: 0 auto;
+	width: 100%;
+	text-align: center;
+	display: grid;
+	align-items: center;
 }
 
 .bg-lignt {
-  background-color: var(--bgl-white);
+	background-color: var(--bgl-white);
 }
 
 .modal {
-  width: 96%;
-  max-width: 680px;
-  transform: scale(0.5);
-  opacity: 0;
-  transition: all ease-in-out 0.15s;
-  margin-left: auto;
-  margin-right: auto;
-  height: fit-content;
+	width: 96%;
+	max-width: 720px;
+	/* transform: scale(0.5); */
+	/* opacity: 0; */
+	transition: all ease-in-out 0.18s;
+	margin-left: auto;
+	margin-right: auto;
+	height: fit-content;
 }
 
 .small-modal .modal {
-  max-width: 300px;
-  text-align: center;
+	max-width: 300px;
+	text-align: center;
 }
 
 .tool-bar {
-  margin: -2rem -1rem 1rem;
-  display: flex;
-  justify-content: space-between;
-  position: -webkit-sticky;
-  position: sticky;
-  padding-top: 1rem;
-  top: 0rem;
-  z-index: 3;
-  background: var(--bgl-white);
+	margin: -2rem -1rem 1rem;
+	display: flex;
+	justify-content: space-between;
+	position: -webkit-sticky;
+	position: sticky;
+	padding-top: 1rem;
+	top: 0rem;
+	z-index: 3;
+	background: var(--bgl-white);
 }
 
 .modal-size {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .is-side .modal {
-  inset-inline-end: -600px;
-  transform: scale(1);
-  opacity: 1;
-  /* position: fixed; */
-  /* top: 20px; */
-  /* bottom: 20px; */
-  max-width: 600px;
-  width: 90%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-inline-start: auto;
-  margin-inline-end: 20px;
-  min-height: calc(100vh - 40px);
-  transform: translateX(100%);
+	inset-inline-end: -1720px;
+	transform: scale(1);
+	opacity: 1;
+	/* position: fixed; */
+	/* top: 20px; */
+	/* bottom: 20px; */
+	max-width: 600px;
+	width: 90%;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	margin-inline-start: auto;
+	margin-inline-end: 20px;
+	min-height: calc(100vh - 40px);
+	transform: translateX(100%);
 }
 
 .is-active .modal {
-  transform: scale(1);
-  opacity: 1;
-  box-shadow: 6px 6px 20px 20px #0000001c;
+	transform: scale(1);
+	opacity: 1;
+	box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .bg-lignt .modal {
-  transform: scale(1);
-  border: 1px solid var(--border-color);
+	transform: scale(1);
+	border: 1px solid var(--border-color);
 }
 
 .bg-lignt.is-active .modal {
-  box-shadow: none;
+	box-shadow: none;
 }
 
 .is-active.is-side .modal {
-  inset-inline-end: 20px;
-  transform: translateX(0%);
+	inset-inline-end: 0px;
+	transform: translateX(0%);
 }
 
 .bg-dark.is-active {
-  opacity: 1;
-  pointer-events: all;
+	opacity: 1;
+	pointer-events: all;
 }
 
 .is-side.bg-dark.is-active {
-  opacity: 1;
-  align-items: stretch;
+	opacity: 1;
+	align-items: stretch;
 }
 
 .is-side.is-active .modal {
-  pointer-events: all;
+	pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-  .tool-bar {
-    margin: -1rem 0rem 1rem;
-    padding-bottom: 1rem;
-    align-items: center;
-  }
+	.tool-bar {
+		margin: -1rem 0rem 1rem;
+		padding-bottom: 1rem;
+		align-items: center;
+	}
 
-  .is-active.is-side .modal {
-    margin-inline-end: 5%;
-    margin-inline-start: 5%;
-  }
+	.is-active.is-side .modal {
+		margin-inline-end: 5%;
+		margin-inline-start: 5%;
+	}
 }
 
 .modal-title {
-  text-align: center;
-  font-weight: 600;
-  font-size: 20px;
-  margin-top: 0.5rem;
-  margin-bottom: 0 !important;
-  width: 100%;
-  -webkit-padding-end: 40px;
-  padding-inline-end: 40px;
-  line-height: 2;
-  display: -webkit-box;
-  max-width: 100%;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	text-align: center;
+	font-weight: 600;
+	font-size: 20px;
+	margin-top: 0.5rem;
+	margin-bottom: 0 !important;
+	width: 100%;
+	-webkit-padding-end: 40px;
+	padding-inline-end: 40px;
+	line-height: 2;
+	display: -webkit-box;
+	max-width: 100%;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .modal-footer {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+	gap: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
-.modal-footer>div {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0;
+.modal-footer > div {
+	gap: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0;
 }
 
-.modal-title[data-v-7e6899c7] {
+.modal-title[data-v-204f5236] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-7e6899c7] {
+.modal-title[data-v-204f5236] {
 		margin-top: 1rem;
 }
 }
@@ -838,52 +838,60 @@ display: block;
   width: calc(100% - 5rem);
 }
 
-.inline[data-v-10743b06] {
-  display: inline;
+.inline[data-v-561f7a72] {
+	display: inline;
 }
 
 .pill {
-    border-radius: 10px;
-    padding: 4px 8px;
-    font-size: 10px;
-    background: var(--bgl-gray-light);
-    white-space: nowrap;
-    display: inline;
+	border-radius: 10px;
+	padding: 4px 8px;
+	font-size: 10px;
+	background: var(--bgl-gray-light);
+	white-space: nowrap;
+	display: inline;
+}
+.pill.light {
+	background: var(--bgl-blue-light);
+	color: var(--bgl-black);
 }
 .pill.blue {
-    background: var(--bgl-blue-light);
-    color: var(--bgl-primary);
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 .pill.red {
-    background-color: var(--bgl-red-tint);
-    color: var(--bgl-red);
+	background-color: var(--bgl-red-tint);
+	color: var(--bgl-red);
 }
 .pill.green {
-    background-color: var(--bgl-green);
-    color: var(--bgl-white);
+	background-color: var(--bgl-green);
+	color: var(--bgl-white);
 }
 .pill.orange {
-    background-color: var(--bgl-yellow);
-    color: var(--bgl-black);
+	background-color: var(--bgl-yellow);
+	color: var(--bgl-black);
 }
 .pill.yellow {
-    background-color: var(--bgl-yellow);
+	background-color: var(--bgl-yellow);
 }
 .pill.Paid,
 .pill.Active {
-    background-color: var(--bgl-green);
-    color: white;
+	background-color: var(--bgl-green);
+	color: white;
 }
 .pill.Error {
-    background-color: var(--bgl-red-tint);
-    color: var(--bgl-red);
+	background-color: var(--bgl-red-tint);
+	color: var(--bgl-red);
 }
 
-.bgl_vid iframe[data-v-23835d69],
-.bgl_vid video[data-v-23835d69] {
-  width: 100%;
-  height: auto;
-  display: block
+.bgl_vid iframe[data-v-bbfc4353],
+.bgl_vid video[data-v-bbfc4353] {
+	width: 100%;
+	height: auto;
+	display: block;
+}
+.bgl_vid.vid_empty[data-v-bbfc4353] {
+	padding-top: 56.25%;
+	background: #f0f0f0;
 }
 
 .blocker[data-v-068aa914] {
@@ -1452,32 +1460,32 @@ display: block;
 }
 }
 
-.radio-pill label[data-v-e47ae8b5] {
-  color: var(--bgl-primary);
-  white-space: nowrap;
-  border-radius: calc(var(--btn-border-radius) * 2);
-  outline: 1px solid var(--bgl-primary);
-  padding-left: calc(var(--btn-padding) / 2);
-  padding-right: calc(var(--btn-padding) / 2);
-  padding-top: calc(var(--btn-padding) / 6);
-  padding-bottom: calc(var(--btn-padding) / 6);
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  background: var(--bgl-white);
-  user-select: none;
+.radio-pill label[data-v-ee7dd382] {
+	color: var(--bgl-primary);
+	white-space: nowrap;
+	border-radius: calc(var(--btn-border-radius) * 2);
+	outline: 1px solid var(--bgl-primary);
+	padding-left: calc(var(--btn-padding) / 2);
+	padding-right: calc(var(--btn-padding) / 2);
+	padding-top: calc(var(--btn-padding) / 6);
+	padding-bottom: calc(var(--btn-padding) / 6);
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	background: var(--bgl-white);
+	user-select: none;
 }
-.radio-pill label[data-v-e47ae8b5]:hover {
-  filter: var(--bgl-hover-filter);
+.radio-pill label[data-v-ee7dd382]:hover {
+	filter: var(--bgl-hover-filter);
 }
-.radio-pill input[data-v-e47ae8b5] {
-  display: none;
+.radio-pill input[data-v-ee7dd382] {
+	display: none;
 }
-.radio-pill input:checked~label[data-v-e47ae8b5] {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+.radio-pill input:checked ~ label[data-v-ee7dd382] {
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-3bb24b0c] {
+.bagel-input .fileUploadWrap[data-v-0dbacaa0] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1487,7 +1495,7 @@ display: block;
 	height: 132px;
 	font-size: var(--input-font-size);
 }
-.previewName[data-v-3bb24b0c] {
+.previewName[data-v-0dbacaa0] {
 	padding: 0.5rem;
 	text-align: start;
 	color: var(--input-color);
@@ -1496,37 +1504,37 @@ display: block;
 	align-items: center;
 	padding-inline: 14px;
 }
-.previewName p[data-v-3bb24b0c] {
+.previewName p[data-v-0dbacaa0] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-3bb24b0c] {
+.imagePreviewWrap[data-v-0dbacaa0] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 	height: 90px;
 	padding: 5px;
 }
-img.preview[data-v-3bb24b0c] {
+img.preview[data-v-0dbacaa0] {
 	height: 80px;
 	border-radius: var(--input-border-radius);
 	object-fit: contain;
 }
-.fileUploadWrap.dragover[data-v-3bb24b0c],
-.fileUploadWrap[data-v-3bb24b0c]:hover {
+.fileUploadWrap.dragover[data-v-0dbacaa0],
+.fileUploadWrap[data-v-0dbacaa0]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-3bb24b0c] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-0dbacaa0] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-3bb24b0c]:after {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-0dbacaa0]:after {
 	content: 'Drop files here or click to upload';
 }
-.pie[data-v-3bb24b0c] {
+.pie[data-v-0dbacaa0] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1534,7 +1542,7 @@ img.preview[data-v-3bb24b0c] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-3bb24b0c]:before {
+.pie[data-v-0dbacaa0]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1552,26 +1560,26 @@ img.preview[data-v-3bb24b0c] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-3bb24b0c] {
+.pie .success[data-v-0dbacaa0] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-3bb24b0c] {
+.pie .progress[data-v-0dbacaa0] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-3bb24b0c] {
+.pie.complete .progress[data-v-0dbacaa0] {
 	display: none;
 }
-.pie.complete .success[data-v-3bb24b0c] {
+.pie.complete .success[data-v-0dbacaa0] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-3bb24b0c]:before {
+.pie.complete[data-v-0dbacaa0]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-3bb24b0c] {
+.pie.complete[data-v-0dbacaa0] {
 	color: var(--bgl-green);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.378",
+  "version": "0.0.390",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -61,6 +61,8 @@
     "@vuepic/vue-datepicker": "^8.0.0",
     "@tiptap/pm": "^2.2.4",
     "@tiptap/starter-kit": "^2.2.4",
+    "@tiptap/extension-image": "^2.2.4",
+    "@tiptap/extension-youtube": "^2.2.4",
     "@tiptap/vue-3": "^2.2.4",
     "vue": "*",
     "vue-draggable-next": "^2.2.1",

package/src/components/Badge.vue

@@ -11,63 +11,68 @@ import { Icon } from '@bagelink/vue';
 import type { MaterialIcons } from '@bagelink/vue';
 
 type Props = {
-  color?: 'green' | 'red' | 'blue' | 'light' | 'gray',
-  size?: string,
-  text: string,
-  icon?: MaterialIcons
-  'icon.end'?: MaterialIcons
-}
+	'color'?: 'green' | 'red' | 'blue' | 'light' | 'gray';
+	'size'?: string;
+	'text': string;
+	'icon'?: MaterialIcons;
+	'icon.end'?: MaterialIcons;
+};
 
 const props = defineProps<Props>();
 </script>
 
 <style scoped>
 .inline {
-  display: inline;
+	display: inline;
 }
 </style>
 <style>
 .pill {
-    border-radius: 10px;
-    padding: 4px 8px;
-    font-size: 10px;
-    background: var(--bgl-gray-light);
-    white-space: nowrap;
-    display: inline;
+	border-radius: 10px;
+	padding: 4px 8px;
+	font-size: 10px;
+	background: var(--bgl-gray-light);
+	white-space: nowrap;
+	display: inline;
+}
+
+.pill.light {
+	background: var(--bgl-blue-light);
+	color: var(--bgl-black);
 }
 
 .pill.blue {
-    background: var(--bgl-blue-light);
-    color: var(--bgl-primary);
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .pill.red {
-    background-color: var(--bgl-red-tint);
-    color: var(--bgl-red);
+	background-color: var(--bgl-red-tint);
+	color: var(--bgl-red);
 }
 
 .pill.green {
-    background-color: var(--bgl-green);
-    color: var(--bgl-white);
+	background-color: var(--bgl-green);
+	color: var(--bgl-white);
 }
 
 .pill.orange {
-    background-color: var(--bgl-yellow);
-    color: var(--bgl-black);
+	background-color: var(--bgl-yellow);
+	color: var(--bgl-black);
 }
 
 .pill.yellow {
-    background-color: var(--bgl-yellow);
+	background-color: var(--bgl-yellow);
 }
 
 .pill.Paid,
 .pill.Active {
-    background-color: var(--bgl-green);
-    color: white;
+	background-color: var(--bgl-green);
+	color: white;
 }
 
 .pill.Error {
-    background-color: var(--bgl-red-tint);
-    color: var(--bgl-red);
+	background-color: var(--bgl-red-tint);
+	color: var(--bgl-red);
 }
 </style>