@flower-city-online/itinerary-lib 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flower-city-online/itinerary-lib",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "peerDependencies": {
     "@angular/animations": "^17.3.10",
     "@angular/cdk": "^17.3.10",

package/src/styles/_colors.scss

@@ -1,69 +0,0 @@
-$ns-blue: #45899b;
-$ns-orange: #d4863d;
-$ns-neutral-1: #333333;
-$ns-neutral-2: #666666;
-$ns-neutral-3: #868686;
-$ns-neutral-4: #a6a6a6;
-$ns-neutral-5: #cccccc;
-$ns-neutral-6: #dfe0e3;
-$ns-neutral-7: #eeeef0;
-$ns-neutral-8: #f4f6f7;
-$ns-error-primary: #c7472e;
-$ns-error-secondary: #f0dbd6;
-$ns-success-green: #599b4e;
-$ns-warn-orange: #f8a91d;
-$ns-teal: #10365a;
-
-$ns-dark-blue-800: #10365a;
-$ns-blue-900: #1350a4;
-$ns-grey-800: #464a4c;
-$ns-grey-900: #24282a;
-$ns-background-grey: #eff2f3;
-$ns-red-700: #d32f2f;
-$ns-orange-400: #f4a947;
-$ns-green-600: #2db231;
-$ns-blue-800: #1e6ec3;
-
-$background-color-1: #27242c;
-$background-color-10: #0c0b0e;
-$background-color-2: #cdd5d8;
-$background-color-3: #f5f5f5;
-$background-color: linear-gradient(
-  191.18deg,
-  $background-color-1 61.33%,
-  $background-color-10 101.43%
-);
-$background-color-4: #000000;
-$background-color-5: #28252d;
-$background-color-6: #ffb5e9;
-$background-color-7: #676767;
-$background-color-8: #dcdcdc;
-$background-color-9: #413f47;
-$background-color-11: #f7f5dd;
-$background-color-12: #403d46;
-$background-color-13: #3e3b44;
-
-$data-table-border: #212121;
-$cyrano-background: #28242d;
-$cyrano-primary: #e15561;
-
-$border-color-1: #b6b6b6;
-$border-color-2: #ffd7d7;
-
-$text-color-1: #0a0a0a;
-$text-color-2: #fe638e;
-$text-color-3: #ffffff;
-$text-color-4: #bdbdbd;
-$text-color-5: #94939b;
-$text-color-6: #939195;
-$text-color-7: #bbbabc;
-
-$scroll-color: #fe3c72;
-
-$box-shadow: #494949;
-$box-shadow-1: #323232;
-$box-shadow-2: #272a2c;
-$box-shadow-3: #151617;
-$box-shadow-4: #333333;
-$box-shadow-5: #cbc7d140;
-$box-shadow-6: #111014a6;

package/src/styles/component-global-styles/bottom-navigation.scss

@@ -1,19 +0,0 @@
-.active {
-  color: var(--secondary-color) !important;
-  opacity: 100% !important;
-}
-
-.lib-menu-bg-none {
-  --lib-list-button-padding: 10px !important;
-  --lib-button-container-background: transparent !important;
-  --lib-button-background: transparent !important;
-  --lib-button-border-radius: 0 !important;
-  --lib-button-border: 0 !important;
-  --box-shadow: none !important;
-}
-
-.lib-menu-bg-none button.mat-ripple {
-  background-color: black !important;
-  border-radius: 0 !important;
-  border: 0 !important;
-}

package/src/styles/component-global-styles/create-itinerary.scss

@@ -1,16 +0,0 @@
-.builder-add-btn lib-base-btn .mat-ripple .btn-text {
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-  flex-direction: row !important;
-  width: 100% !important;
-  color: var(--lib-secondary-button-font-color) !important;
-  text-shadow: var(--lib-secondary-button-text-shadow) !important;
-}
-
-.builder-add-btn .lib-button-container {
-  display: none !important;
-}
-.builder-add-btn .mat-ripple {
-  height: 60px !important;
-}

package/src/styles/component-global-styles/custom-menu.scss

@@ -1,42 +0,0 @@
-.lib-menu-custom-class .text {
-  padding: 0 !important;
-  font-size: 10px !important;
-}
-
-.mat-mdc-menu-item-text {
-  padding: 0 !important;
-  font-size: 14px !important;
-}
-
-.mat-mdc-menu-item-text img {
-  height: 15px !important;
-  width: 15px !important;
-  margin-top: 5px !important;
-  margin-right: 20px !important;
-}
-
-.mat-mdc-menu-item {
-  min-height: 35px !important;
-}
-
-.lib-menu-custom-class .btn-text {
-  margin-bottom: 10px;
-}
-
-.lib-menu-custom-class .mat-ripple {
-  background: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
-.lib-menu-custom-class .lib-button-component {
-  background: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
-.lib-menu-custom-class .lib-button-container {
-  background: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-}

package/src/styles/component-global-styles/dashboard.scss

@@ -1,5 +0,0 @@
-@use "../../styles/colors" as *;
-
-// .customBody {
-//   background: $background-color-7 !important;
-// }

package/src/styles/component-global-styles/delete-itineraries.scss

@@ -1,7 +0,0 @@
-.check-box svg {
-  padding: 1.5px !important;
-}
-
-.mat-mdc-dialog-surface {
-  border-radius: 10px !important;
-}

package/src/styles/component-global-styles/filter-menu.scss

@@ -1,40 +0,0 @@
-@use "../../styles/colors" as *;
-
-.btn-selectable {
-  padding: 0px !important;
-  font-size: 11px !important;
-  margin-right: 12px !important;
-  position: relative;
-  box-shadow: -4.1px -4.1px 13.13px -2.46px $box-shadow-5;
-  background-color: $background-color-1 !important;
-  color: $text-color-3 !important;
-}
-
-.selectable-container {
-  padding: 0 !important;
-}
-
-.btn-selectable.selected {
-  background: linear-gradient(
-    94.44deg,
-    $scroll-color 1.26%,
-    $cyrano-primary 100%
-  );
-}
-
-.filter-btn .lib-button-component .mat-ripple {
-  background: $background-color-1 !important;
-  border: none !important;
-}
-
-.filter-btn .lib-button-component .lib-button-container {
-  display: none !important;
-}
-
-.button-native {
-  background: transparent !important;
-}
-
-.btn-selectable[_ngcontent-ng-c3164006478] {
-  padding: 0 !important;
-}

package/src/styles/component-global-styles/header.scss

@@ -1,22 +0,0 @@
-@use "../../styles/colors" as *;
-
-.header-back-btn .lib-button-component .mat-ripple {
-  background: $background-color-1 !important;
-  border: none !important;
-}
-
-.header-back-btn .lib-button-component .lib-button-container {
-  display: none !important;
-}
-
-.header-back-btn .lib-button-component {
-  border: none !important;
-}
-
-.header-back-btn .mat-ripple {
-  border: none !important;
-  background: $background-color-1;
-  box-shadow:
-    9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65),
-    -4.102px -4.102px 13.128px -2.462px rgba(203, 199, 209, 0.25) !important;
-}

package/src/styles/component-global-styles/navbar.scss

@@ -1,47 +0,0 @@
-.nav-top-search .search-field {
-  margin-top: 0 !important;
-}
-
-.container {
-  padding: 0 !important;
-}
-
-.nav-main-bar .menu-btn-image {
-  height: 26px !important;
-  width: 26px !important;
-}
-
-/*menu*/
-#mat-menu-panel-0
-  .mat-mdc-menu-panel.lib-btn-menu-panel
-  button.mat-mdc-menu-item
-  .mat-mdc-menu-item-text {
-  justify-content: flex-start !important;
-}
-// #mat-menu-panel-0 .mat-mdc-menu-item-text img {
-//   position: relative !important;
-//   right: -22px !important;
-// }
-
-.dashboard-menu .lib-button-container {
-  box-shadow: none !important;
-  background: none !important;
-}
-
-.dashboard-menu .lib-button-component {
-  height: 29px !important;
-  width: 29px !important;
-}
-
-.dashboard-menu .btn-text img {
-  height: 24px !important;
-  width: 24px !important;
-}
-
-.nav-top-search .search-field {
-  top: 0px !important;
-}
-
-.nav-top-search .search-field .container {
-  height: auto !important;
-}

package/src/styles/component-global-styles/search-bar.scss

@@ -1,17 +0,0 @@
-.search-field .container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 46px;
-  width: 100%;
-  margin: 0px;
-  position: relative;
-  padding: 6px;
-  min-width: 100%;
-}
-
-.container__search-bar__icon.container__search-bar__search-icon {
-  position: absolute;
-  right: 6%;
-  top: 39%;
-}

package/src/styles/component-global-styles/side-bar.scss

@@ -1,28 +0,0 @@
-.side-bar-heading-bar .mat-ripple {
-  box-shadow: none !important;
-}
-
-.side-bar-heading-bar .header-btn:last-child {
-  box-shadow: none !important;
-  margin-right: 10px !important;
-  margin-top: 5px !important;
-}
-
-.side-bar-heading-bar .lib-button-container {
-  box-shadow: none !important;
-}
-
-.filter-side-bar {
-  display: flex !important;
-  flex-direction: column-reverse !important;
-}
-
-.filter-side-bar .selectable-container {
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center;
-}
-
-.filter-side-bar .btn-selectable {
-  height: 100% !important;
-}

package/src/styles/component-global-styles/tab-bar.scss

@@ -1,21 +0,0 @@
-@use "../../styles/colors" as *;
-
-.p-tabmenu-nav-content {
-  font-family: "Calistoga", cursive;
-  margin: 0px 0px !important;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.p-ripple.p-element.p-menuitem-link.p-menuitem-link-active {
-  border-width: 3px !important;
-}
-
-.p-menuitem-text {
-  color: rgb(255, 255, 255, 0.5) !important;
-}
-
-.p-menuitem-link-active .p-menuitem-text {
-  color: $text-color-3 !important;
-}

package/src/styles/fonts.scss

@@ -1,2 +0,0 @@
-$header-font: "Calistoga", cursive;
-$filter-font: Gilroy-Thin;

package/src/styles/media-queries.scss

@@ -1,416 +0,0 @@
-@use "../styles/colors" as *;
-
-@media (max-width: 380px) {
-  .min-screen-main {
-    padding: 0px !important;
-  }
-  .min-screen {
-    padding: 5px 10px !important;
-  }
-}
-
-@media (max-height: 720px) {
-  .h-screen {
-    padding-bottom: 60px;
-  }
-}
-
-@media (max-height: 720px) and (max-width: 380px) {
-  .h-screen {
-    padding-bottom: 60px !important;
-  }
-}
-
-@media (max-height: 720px) and (max-width: 380px) {
-  .h-screen {
-    padding-bottom: 60px !important;
-  }
-}
-
-@media (min-width: 320px) and (max-width: 379px) {
-  .h-screen {
-    padding-bottom: 100px !important;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .bottom-navigation {
-    padding: 8px 8px;
-  }
-}
-
-@media screen and (min-width: 500px) {
-  .custom-nav-bottom-modal {
-    background: none;
-    z-index: 20003;
-    pointer-events: auto;
-    box-shadow: none;
-    width: 500px !important;
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .bottom-navitem img {
-    height: 13px !important;
-    width: 13px !important;
-  }
-  .bottom-nav-item span {
-    font-size: 10px;
-    line-height: 12px;
-  }
-}
-
-@media screen and (max-width: 390px) {
-  .header-btn {
-    height: 27px !important;
-    width: 27px !important;
-  }
-  .header-btn img {
-    height: 13px !important;
-    width: 13px !important;
-  }
-  .header-main-bar {
-    padding-inline: 10px !important;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .p-tabmenu-nav-content ul {
-    font-size: 12px !important;
-  }
-}
-
-@media screen and (max-width: 1492px) {
-  .sub-nav {
-    gap: 100px;
-  }
-}
-
-@media screen and (max-width: 1282px) {
-  .sub-nav {
-    gap: 80px;
-  }
-}
-
-@media screen and (max-width: 1152px) {
-  .sub-nav {
-    gap: 50px;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .delete-modal p {
-    font-size: 10px;
-    padding: 0px 11px;
-  }
-  .check-box {
-    height: 13px !important;
-    width: 13px !important;
-    margin-top: -1px;
-  }
-
-  .check-box-feild {
-    margin-top: 20px !important;
-  }
-}
-
-@media (min-width: 960px) {
-  .btn-selectable {
-    margin: 7px !important;
-    margin-right: 7px !important;
-  }
-
-  .selectable-container {
-    padding: 0 14px !important;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .btn-selectable {
-    font-size: 10px !important;
-    margin-right: 7px !important;
-    position: relative;
-    box-shadow: -4.1px -4.1px 13.13px -2.46px $box-shadow-5;
-  }
-
-  .filter-btn {
-    height: 32px !important;
-    width: 32px !important;
-  }
-
-  .filter-btn img {
-    height: 14px !important;
-    width: 14px !important;
-  }
-}
-
-@media screen and (max-width: 320px) {
-  .btn-selectable {
-    margin: 2px !important;
-  }
-}
-
-@media (min-width: 320px) and (max-width: 327px) {
-  .btn-selectable {
-    margin: 2px !important;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .report-itineraies {
-    width: 280px;
-    padding: 0px 10px;
-  }
-
-  .radio-group {
-    font-size: 11px !important;
-  }
-}
-
-@media (max-width: 380px) {
-  .builder-add-btn {
-    width: 100% !important;
-    font-size: 14px !important;
-  }
-  .builder-add-btn img {
-    height: 13px;
-    width: 13px;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .content {
-    width: fit-content;
-  }
-  .content-text {
-    width: fit-content;
-  }
-  .content-text span {
-    font-size: 12px;
-  }
-  .content p {
-    font-size: 9px;
-    width: 100%;
-  }
-  .content-icon-last {
-    margin-left: 0px;
-  }
-}
-
-@media (max-width: 1500px) {
-  .grid-columns {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 1160px) {
-  .grid-columns {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
-
-@media (max-width: 380px) {
-  .favourite-main-section,
-  .favouriteSubSection {
-    margin-top: 10% !important;
-  }
-  .favourite-sub-section div img {
-    height: 120px;
-    width: 120px;
-  }
-  .favourite-main-section h1 {
-    font-size: 20px;
-  }
-
-  .btn-style {
-    padding-inline: 20px;
-  }
-}
-@media (max-height: 630px) {
-  .favourite-main-section,
-  .favouriteSubSection {
-    margin-top: 5% !important;
-  }
-  .favourite-sub-section div img {
-    height: 120px;
-    width: 120px;
-  }
-  .favourite-main-section h1 {
-    font-size: 20px;
-  }
-  .btn-style {
-    padding-inline: 20px;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .main-btn {
-    width: 140px;
-    font-size: 16px !important;
-  }
-  .main-btn:last-child {
-    width: 168px;
-  }
-  .main-btn span img {
-    height: 14px !important;
-    width: 15px !important;
-  }
-  .main-btn span {
-    margin-top: 0px !important;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .search-history-text {
-    font-size: 12px;
-  }
-
-  .search-history-bar span img:first-child {
-    height: 11px;
-    width: 10px;
-  }
-  .search-history-bar span img:last-child {
-    height: 11px;
-    width: 10px;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .search-chips {
-    font-size: 12px !important;
-    padding-inline: 8px !important;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .search-chips {
-    font-size: 12px !important;
-    padding-inline: 8px !important;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .search-bottom {
-    padding-top: 0%;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .clear-history-main {
-    width: 95px;
-    font-size: 12px !important;
-  }
-  .clear-history-main span img {
-    height: 13px;
-    width: 14px;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .sub-ccreen {
-    padding-inline: 15px;
-  }
-  .search-chips {
-    font-size: 10px !important;
-    padding-inline: 2px !important;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .title {
-    font-size: 15px !important;
-  }
-  .draft-header {
-    font-size: 10px !important;
-    left: 20px;
-  }
-  .bottom-icons {
-    height: 12px;
-    width: 13px;
-  }
-  .user-icon-text {
-    font-size: 13px;
-  }
-  .bottom-tags {
-    font-size: 10px;
-    font-family: Gilroy-Thin;
-  }
-  .draft-description {
-    font-size: 10px;
-  }
-}
-
-@media screen and (max-width: 390px) {
-  h4 {
-    font-size: 12px !important;
-  }
-  .archive-css h4 {
-    font-size: 10px !important;
-  }
-  .archive-css img {
-    margin-top: 4px !important;
-  }
-  .icon-button p {
-    font-size: 12px !important;
-  }
-  .icon-button img {
-    height: 12px !important;
-    width: 12px !important;
-    margin-top: 1px;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .title {
-    font-size: 145x !important;
-  }
-  .draft-header {
-    font-size: 10px !important;
-    left: 20px;
-  }
-  .bottom-icons {
-    height: 12px;
-    width: 13px;
-  }
-  .user-icon-text {
-    font-size: 13px;
-  }
-  .bottom-tags {
-    font-size: 10px;
-    font-family: Gilroy-Thin;
-  }
-  .draft-description {
-    font-size: 10px;
-  }
-}
-
-@media screen and (max-width: 390px) {
-  .search-field {
-    margin-top: 10px !important;
-  }
-  .container {
-    margin: 0px 5px;
-    position: relative;
-    padding: 0px;
-  }
-
-  .container__search-bar__input {
-    font-size: 12px !important;
-  }
-
-  .container__search-bar__input::placeholder {
-    font-size: 12px !important;
-    padding-bottom: 2px;
-  }
-
-  .container__search-bar__icon.container__search-bar__search-icon {
-    position: absolute;
-    right: 6%;
-    height: 12px !important;
-    width: 12px !important;
-  }
-}

package/src/styles/modal.scss

@@ -1,186 +0,0 @@
-// @use "src/styles/colors" as *;
-
-// .modal-tab-shadow {
-//   box-shadow: 9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65);
-// }
-
-// .parent-class-for-modal {
-//   width: 100%;
-//   padding: 0px 20px;
-//   margin-top: 15px;
-//   font-family: "Calistoga";
-//   border-radius: 10px;
-// }
-
-// .lib-bottom-modal .modal-wrapper {
-//   background: transparent !important;
-//   box-shadow: none !important;
-// }
-
-// #bottom-modal-content-ref {
-//   background: transparent;
-//   margin-top: 0px !important;
-// }
-
-// .lib-bottom-modal-loader {
-//   display: none !important;
-// }
-
-// .lib-bottom-modal-header {
-//   display: none !important;
-// }
-
-// .lib-bottom-modal-header.ng-star-inserted {
-//   display: none;
-// }
-
-// .modal-handle {
-//   display: none !important;
-// }
-
-// .modal-wrapper.ion-overlay-wrapper {
-//   background: transparent !important;
-// }
-
-// .modal-handle {
-//   display: none !important;
-// }
-
-// ion-modal.lib-bottom-modal[_ngcontent-ng-c1153917535]::part(handle) {
-//   opacity: 0 !important;
-//   display: none !important;
-// }
-
-// .custom-nav-bottom-modal {
-//   height: 60px;
-//   margin-top: auto;
-//   position: absolute !important;
-//   z-index: 9999 !important;
-//   display: flex !important;
-//   box-shadow: var(
-//     --lib-popup-modal-shadow,
-//     5px 5px 95px 0px rgba(255, 255, 255, 0.32),
-//     -3px -3px 16px 0px rgba(255, 255, 255, 0.1)
-//   ) !important;
-//   border-radius: var(--lib-popup-modal-radius) !important;
-// }
-
-// .custom-nav-bottom-modal #bottomModalContentRef {
-//   height: 60px !important;
-//   max-width: 100% !important;
-//   padding-bottom: 0px;
-// }
-
-// .delete-modal {
-//   padding: 10px;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   flex-direction: column;
-// }
-
-// .delete-modal h1 {
-//   font-size: 15px;
-//   color: $text-color-3;
-//   font-family: "Calistoga";
-// }
-
-// .delete-modal p {
-//   font-size: 12px;
-//   color: $text-color-3;
-//   width: 250px;
-// }
-
-// .parent-class-for-modal {
-//   margin-top: 30px;
-// }
-
-// .custom-modal .modal-wrapper.ion-overlay-wrapper {
-//   background: transparent !important;
-//   box-shadow: none !important;
-// }
-
-// #ion-overlay-2.modal-wrapper {
-//   background: transparent !important;
-// }
-
-// .modal-wrapper.ion-overlay-wrapper {
-//   background: transparent !important;
-// }
-
-// .bottom-modal-items {
-//   margin-bottom: 20px;
-// }
-
-// .bottom-modal {
-//   font-family: Gilroy-Regular !important;
-//   font-size: 12px !important;
-// }
-
-// .delete-modal {
-//   padding: 10px;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   flex-direction: column;
-// }
-
-// .delete-modal h1 {
-//   font-size: 15px;
-//   color: $text-color-3;
-//   font-family: "Calistoga";
-// }
-
-// .delete-modal p {
-//   font-size: 13px;
-//   color: $text-color-3;
-//   width: 245px;
-// }
-
-// .parent-class-for-modal {
-//   margin-top: 40px;
-// }
-
-// .modal-bottom-bar {
-//   display: flex;
-//   justify-content: space-around;
-//   align-items: center;
-//   width: 100%;
-//   position: relative;
-// }
-
-// .modal-bottom-bar button:last-child {
-//   color: var(--secondary-color);
-// }
-
-// // Ng-deep removed from component styles
-
-// // create-itinerary.component.scss
-// .mat-mdc-dialog-surface {
-//   border-radius: 10px !important;
-// }
-
-// .mdc-label {
-//   padding: 5px 4px !important;
-//   font-size: 12px;
-// }
-
-// .input-label {
-//   top: 24px !important;
-// }
-
-// // create-itinerary-modal.component.scss
-// .cdk-overlay-dark-backdrop {
-//   opacity: 80.2% !important;
-//   background: $background-color-4;
-//   backdrop-filter: blur(16.40999984741211px) !important;
-// }
-
-// .mat-mdc-dialog-surface.mdc-dialog__surface {
-//   background: transparent !important;
-//   margin-bottom: 40px !important;
-// }
-
-// .cdk-global-overlay-wrapper {
-//   align-items: end !important;
-// }

package/src/styles/styles.scss

@@ -1,308 +0,0 @@
-// Custom Theming for Angular Material
-@use "@angular/material" as mat;
-// For more information: https://material.angular.io/guide/theming
-// @import '@angular/material/theming';
-// Plus imports for other components in your app.
-
-$custom-typography: mat.define-typography-config(
-  $font-family: "Gilroy-Regular, serif",
-);
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-// @include mat.core($custom-typography);
-@include mat.core();
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$ns-add-in-primary: mat.define-palette(mat.$indigo-palette);
-$ns-add-in-accent: mat.define-palette(mat.$pink-palette);
-
-// The warn palette is optional (defaults to red).
-$ns-add-in-warn: mat.define-palette(mat.$red-palette);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$ns-add-in-theme: mat.define-dark-theme(
-  (
-    color: (
-      primary: $ns-add-in-primary,
-      accent: $ns-add-in-accent,
-      warn: $ns-add-in-warn,
-    ),
-    typography: $custom-typography,
-    density: -12,
-  )
-);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($ns-add-in-theme);
-
-@import "../assets/styles/typography.scss";
-@import "../../node_modules/nextsapien-component-lib/src/lib/shared-styles/styles.scss";
-
-@import "./colors";
-
-html {
-  display: flex;
-  font-size: 12px;
-}
-
-body {
-  background: var(--primary-background);
-  display: flex;
-  width: 100vw;
-  min-height: 100vh;
-  margin: 0;
-  justify-content: center;
-}
-
-input {
-  font-family: "Gilroy-Regular", serif;
-}
-
-.primary-text,
-button {
-  font-family: "Calistoga", cursive;
-}
-
-a {
-  color: $cyrano-primary;
-
-  &.link {
-    justify-content: center;
-    margin: auto;
-    width: 100%;
-    display: flex;
-    text-decoration: none;
-    color: $cyrano-primary;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-code {
-  color: $text-color-1;
-  background-color: $background-color-2;
-  padding: 10px;
-  margin: 10px auto;
-  position: relative;
-  display: block;
-  border-radius: 20px;
-  border: 1px solid $border-color-1;
-  width: -moz-fit-content;
-  width: fit-content;
-  max-width: 90%;
-}
-
-table {
-  width: 100%;
-  border-radius: 4px;
-  margin-top: 15px;
-  &.nested-table {
-    width: 95%;
-
-    tr td:first-child {
-      font-weight: bold;
-      width: 250px;
-    }
-  }
-  code {
-    max-width: unset;
-  }
-}
-
-table,
-th,
-td {
-  border: 1px solid $ns-neutral-6;
-  border-collapse: collapse;
-  color: $ns-neutral-8;
-}
-
-th,
-td {
-  padding: 5px;
-  max-width: 25%;
-}
-
-.hidden {
-  display: none !important;
-}
-
-h1,
-h2,
-p {
-  color: $ns-neutral-8;
-}
-
-.intro {
-  display: flex;
-  flex: 0 0 auto;
-  font-size: 22px;
-  text-align: center;
-  color: $ns-neutral-8;
-  max-width: 75%;
-  padding: 20px;
-  justify-content: center;
-}
-
-.header {
-  display: flex;
-  flex: 0 0 auto;
-  font-size: 15px;
-  text-align: center;
-  color: $ns-neutral-6;
-  width: 75%;
-  justify-content: center;
-  padding: 10px;
-}
-
-.info {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  font-size: 14px;
-  color: $ns-neutral-5;
-  padding: 10px;
-  line-height: 20px;
-  max-width: 75%;
-}
-
-.detail-section {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  padding-top: 10px;
-
-  .mat-expansion-panel {
-    background: transparent !important;
-    border: none !important;
-  }
-}
-
-.code-section {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-top: 15px;
-  max-width: 60%;
-}
-
-.component-demo {
-  background-color: transparent;
-  margin: 20px 20px 40px 20px;
-  padding: 10px;
-  border-radius: 3px;
-}
-
-.detail {
-  display: flex;
-  flex: 1 1 100%;
-  flex-direction: column;
-  align-items: center;
-  overflow: auto;
-  height: 100%;
-}
-
-.showcase-container {
-  width: 100%;
-  padding: 25px 25px 25px 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  height: calc(100% - 55px);
-  &.full-screen {
-    height: 100%;
-  }
-}
-
-.centered-scrollable {
-  align-items: center;
-  overflow-y: auto;
-  h2 {
-    position: relative;
-    display: block;
-    width: 100%;
-    text-align: left;
-    color: $text-color-2;
-    text-transform: capitalize;
-  }
-}
-
-.tag-name {
-  background: $background-color-3;
-  padding: 2px 10px;
-  border-radius: 10px;
-  border: 1px solid $border-color-2;
-}
-
-.first-td {
-  min-width: 130px;
-}
-
-.last-td {
-  padding: 15px;
-  background: $background-color-1;
-  &.demo-container {
-    min-width: 250px;
-  }
-}
-
-.mat-autocomplete-panel {
-  font-family: var(--input-number-filed-font);
-  background: var(--button-background);
-  color: var(--input-font-color) !important;
-  .mat-mdc-option {
-    color: var(--input-font-color) !important;
-    line-height: 35px;
-    height: 35px;
-  }
-}
-.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
-  background: var(--cyrano-pink-shade-1);
-  color: var(--input-font-color) !important;
-}
-
-/*-----------------
-scrollbar styling
-------------------*/
-// moz
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: thin;
-    scrollbar-base-color: rgba(0, 0, 0, 0.5);
-    scrollbar-color: var(--cyrano-pink-shade-1, $scroll-color) transparent;
-  }
-}
-
-// webkit
-::-webkit-scrollbar {
-  width: 8px;
-  opacity: 0.5;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--cyrano-dark-color, $background-color-5);
-  opacity: 0.5;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 5px;
-  background-color: var(--cyrano-pink-shade-1, $scroll-color);
-  opacity: 0.5;
-  border: 3px solid $background-color-4;
-}
-
-.one-line-textarea textarea {
-  overflow: hidden;
-}