@haiilo/catalyst 0.15.2 → 1.0.1

package/dist/collection/components/cat-select/cat-select.css

@@ -3,186 +3,6 @@
  */
 /* stylelint-disable value-keyword-case */
 /* stylelint-enable value-keyword-case */
-/* =============================================
-=            Generic styling                  =
-============================================= */
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  position: relative;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-}
-
-body {
-  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  font-size: 16px;
-  line-height: 1.4;
-  color: #fff;
-  background-color: #333;
-  overflow-x: hidden;
-}
-
-label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 8px;
-}
-
-hr {
-  display: block;
-  margin: 30px 0;
-  border: 0;
-  border-bottom: 1px solid #eaeaea;
-  height: 1px;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 12px;
-  font-weight: 400;
-  line-height: 1.2;
-}
-
-a,
-a:visited,
-a:focus {
-  color: #fff;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.form-control {
-  display: block;
-  width: 100%;
-  background-color: #f9f9f9;
-  padding: 12px;
-  border: 1px solid #ddd;
-  border-radius: 2.5px;
-  font-size: 14px;
-  appearance: none;
-  margin-bottom: 24px;
-}
-
-h1,
-.h1 {
-  font-size: 32px;
-}
-
-h2,
-.h2 {
-  font-size: 24px;
-}
-
-h3,
-.h3 {
-  font-size: 20px;
-}
-
-h4,
-.h4 {
-  font-size: 18px;
-}
-
-h5,
-.h5 {
-  font-size: 16px;
-}
-
-h6,
-.h6 {
-  font-size: 14px;
-}
-
-label + p {
-  margin-top: -4px;
-}
-
-.container {
-  display: block;
-  margin: auto;
-  max-width: 40em;
-  padding: 48px;
-}
-@media (max-width: 620px) {
-  .container {
-    padding: 0;
-  }
-}
-
-.section {
-  background-color: #fff;
-  padding: 24px;
-  color: #333;
-}
-.section a,
-.section a:visited,
-.section a:focus {
-  color: #00bcd4;
-}
-
-.logo {
-  display: block;
-  margin-bottom: 12px;
-}
-
-.logo-img {
-  width: 100%;
-  height: auto;
-  display: inline-block;
-  max-width: 100%;
-  vertical-align: top;
-  padding: 6px 0;
-}
-
-.visible-ie {
-  display: none;
-}
-
-.push-bottom {
-  margin-bottom: 24px;
-}
-
-.zero-bottom {
-  margin-bottom: 0;
-}
-
-.zero-top {
-  margin-top: 0;
-}
-
-.text-center {
-  text-align: center;
-}
-
-[data-test-hook] {
-  margin-bottom: 24px;
-}
-
-/* =====  End of Section comment block  ====== */
 .hint-section {
   display: flex;
   gap: 0.5rem;
@@ -193,16 +13,18 @@ label + p {
   font-size: 0.875rem;
   line-height: 1rem;
   font-weight: var(--cat-font-weight-body, 400);
-  margin: 0;
+  margin: 0 !important;
+}
+
+:host-context(.cat-error) .hint-section {
+  color: #d9340d;
 }
 
 :host {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-weight: var(--cat-font-weight-body, 400);
+  position: relative;
   margin-bottom: 1rem;
 }
 
@@ -212,9 +34,6 @@ label + p {
 
 label {
   align-self: flex-start;
-  font-size: inherit;
-  font-weight: inherit;
-  margin: 0;
 }
 label.hidden {
   position: absolute !important;
@@ -236,430 +55,180 @@ label.hidden {
   color: rgb(var(--cat-font-color-muted, 105, 118, 135));
 }
 
-.choices {
-  position: relative;
-  overflow: hidden;
-  font-size: 16px;
+.select-wrapper {
+  display: flex;
+  align-items: flex-start;
+  background: white;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 1px #d7dbe0;
+  transition: box-shadow 0.13s linear;
+  padding: 0.25rem;
 }
-.choices.is-focused, .choices:focus {
-  outline: none;
-  box-shadow: 0 1px 4px 0 #101d3033;
+.select-wrapper:not(.select-disabled):hover {
+  box-shadow: 0 0 0 2px #d7dbe0;
 }
-.choices:last-child {
-  margin-bottom: 0;
+.select-wrapper:not(.select-disabled):focus-within {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
 }
-.choices.is-open {
-  overflow: visible;
+
+:host(.cat-error) .select-wrapper {
+  box-shadow: 0 0 0 1px #d9340d;
 }
-.choices.is-disabled .choices__inner,
-.choices.is-disabled .choices__input {
-  background-color: #eaeaea;
-  cursor: not-allowed;
-  user-select: none;
+:host(.cat-error) .select-wrapper:not(.input-disabled):hover {
+  box-shadow: 0 0 0 2px #d9340d;
 }
-.choices.is-disabled .choices__item {
+
+.select-disabled {
+  background: #f8f8fb;
   cursor: not-allowed;
-}
-.choices [hidden] {
-  display: none !important;
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
 }
 
-.choices[data-type*=select-one] {
-  cursor: pointer;
-}
-.choices[data-type*=select-one] .choices__list--dropdown .choices__list {
-  padding-top: 0.5rem;
-}
-.choices[data-type*=select-one] .choices__input {
-  display: block;
-  width: 100%;
-  padding: 12px 16px 12px 40px;
-  border-bottom: 1px solid #d7dbe0;
-  margin: 0;
-  color: #000;
-  background: #fff url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjUgMC4yNUMzLjk0MzY1IDAuMjUgMC4yNSAzLjk0MzY1IDAuMjUgOC41QzAuMjUgMTMuMDU2MyAzLjk0MzY1IDE2Ljc1IDguNSAxNi43NUMxMC41MjU1IDE2Ljc1IDEyLjM4MDUgMTYuMDIwMSAxMy44MTYzIDE0LjgwODlDMTMuODUyNiAxNC44ODkyIDEzLjkwMzcgMTQuOTY0NCAxMy45Njk3IDE1LjAzMDNMMTYuNDY5NyAxNy41MzAzQzE2Ljc2MjYgMTcuODIzMiAxNy4yMzc0IDE3LjgyMzIgMTcuNTMwMyAxNy41MzAzQzE3LjgyMzIgMTcuMjM3NCAxNy44MjMyIDE2Ljc2MjYgMTcuNTMwMyAxNi40Njk3TDE1LjAzMDMgMTMuOTY5N0MxNC45NjQ0IDEzLjkwMzcgMTQuODg5MiAxMy44NTI2IDE0LjgwODkgMTMuODE2M0MxNi4wMjAxIDEyLjM4MDUgMTYuNzUgMTAuNTI1NSAxNi43NSA4LjVDMTYuNzUgMy45NDM2NSAxMy4wNTYzIDAuMjUgOC41IDAuMjVaTTEuNzUgOC41QzEuNzUgNC43NzIwOCA0Ljc3MjA4IDEuNzUgOC41IDEuNzVDMTIuMjI3OSAxLjc1IDE1LjI1IDQuNzcyMDggMTUuMjUgOC41QzE1LjI1IDEyLjIyNzkgMTIuMjI3OSAxNS4yNSA4LjUgMTUuMjVDNC43NzIwOCAxNS4yNSAxLjc1IDEyLjIyNzkgMS43NSA4LjVaIiBmaWxsPSIjNjk3Njg3Ii8+Cjwvc3ZnPgo=") no-repeat left 12px center;
-}
-.choices[data-type*=select-one] .choices__input::before {
-  content: "abc";
-}
-.choices[data-type*=select-one] .choices__button {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNDY5NjcgNi40Njk2N0M2Ljc2MjU2IDYuMTc2NzggNy4yMzc0NCA2LjE3Njc4IDcuNTMwMzMgNi40Njk2N0wxMCA4LjkzOTM0TDEyLjQ2OTcgNi40Njk2N0MxMi43NjI2IDYuMTc2NzggMTMuMjM3NCA2LjE3Njc4IDEzLjUzMDMgNi40Njk2N0MxMy44MjMyIDYuNzYyNTYgMTMuODIzMiA3LjIzNzQ0IDEzLjUzMDMgNy41MzAzM0wxMS4wNjA3IDEwTDEzLjUzMDMgMTIuNDY5N0MxMy44MjMyIDEyLjc2MjYgMTMuODIzMiAxMy4yMzc0IDEzLjUzMDMgMTMuNTMwM0MxMy4yMzc0IDEzLjgyMzIgMTIuNzYyNiAxMy44MjMyIDEyLjQ2OTcgMTMuNTMwM0wxMCAxMS4wNjA3TDcuNTMwMzMgMTMuNTMwM0M3LjIzNzQ0IDEzLjgyMzIgNi43NjI1NiAxMy44MjMyIDYuNDY5NjcgMTMuNTMwM0M2LjE3Njc4IDEzLjIzNzQgNi4xNzY3OCAxMi43NjI2IDYuNDY5NjcgMTIuNDY5N0w4LjkzOTM0IDEwTDYuNDY5NjcgNy41MzAzM0M2LjE3Njc4IDcuMjM3NDQgNi4xNzY3OCA2Ljc2MjU2IDYuNDY5NjcgNi40Njk2N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMC4yNUM0LjYxNTIyIDAuMjUgMC4yNSA0LjYxNTIyIDAuMjUgMTBDMC4yNSAxNS4zODQ4IDQuNjE1MjIgMTkuNzUgMTAgMTkuNzVDMTUuMzg0OCAxOS43NSAxOS43NSAxNS4zODQ4IDE5Ljc1IDEwQzE5Ljc1IDQuNjE1MjIgMTUuMzg0OCAwLjI1IDEwIDAuMjVaTTEuNzUgMTBDMS43NSA1LjQ0MzY1IDUuNDQzNjUgMS43NSAxMCAxLjc1QzE0LjU1NjMgMS43NSAxOC4yNSA1LjQ0MzY1IDE4LjI1IDEwQzE4LjI1IDE0LjU1NjMgMTQuNTU2MyAxOC4yNSAxMCAxOC4yNUM1LjQ0MzY1IDE4LjI1IDEuNzUgMTQuNTU2MyAxLjc1IDEwWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
-  padding: 0;
-  background-size: 20px;
-  position: absolute;
-  top: 50%;
-  right: 0;
-  margin-top: -10px;
-  margin-right: 35px;
-  height: 20px;
-  width: 20px;
+.select-wrapper-inner {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
 }
-.choices[data-type*=select-one] .choices__button:focus {
-  box-shadow: 0 0 0 2px rgba(105, 118, 135, 0.1);
+.select-wrapper-inner > cat-avatar {
+  padding-left: 0.25rem;
 }
-.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
-  display: none;
+.select-wrapper-inner cat-avatar {
+  --cat-avatar-size: 1.25rem;
 }
-.choices[data-type*=select-one] .choices__item {
+
+.select-input {
+  font: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0.375rem 0.5rem;
+  flex: 1 1 auto;
   /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
 }
-.choices[data-type*=select-one][dir=rtl]::after {
-  left: 11.5px;
-  right: auto;
+.select-disabled .select-input {
+  cursor: inherit;
 }
-.choices[data-type*=select-one][dir=rtl] .choices__button {
-  right: auto;
-  left: 0;
-  margin-left: 35px;
-  margin-right: 0;
+
+.select-pills {
+  display: contents;
 }
 
-.choices[data-type*=select-multiple] .choices__inner,
-.choices[data-type*=text] .choices__inner {
-  cursor: text;
-  display: flex;
-  flex-flow: row wrap;
+.pill {
+  display: inline-flex;
   align-items: center;
-  padding: 4px 60px 4px 4px;
-  gap: 4px;
-}
-.choices[data-type*=select-multiple] .choices__item cat-checkbox,
-.choices[data-type*=text] .choices__item cat-checkbox {
-  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
-  overflow: hidden;
-  text-overflow: ellipsis;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: #ebecf0;
+  border-radius: 0.125rem;
   white-space: nowrap;
-  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
-  margin: 0;
+  min-width: 0;
 }
-.choices[data-type*=select-multiple] .choices__item cat-checkbox::part(label),
-.choices[data-type*=text] .choices__item cat-checkbox::part(label) {
-  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+.pill > span {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
-}
-.choices[data-type*=select-multiple] .choices__input,
-.choices[data-type*=text] .choices__input {
-  min-width: 1ch;
-  width: 1ch;
 }
-.choices[data-type*=select-multiple] .choices__button,
-.choices[data-type*=text] .choices__button {
-  position: relative;
-  display: inline-block;
-  padding-left: 24px;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMjc1MzIgMC4zOTEzNzFDMS4wMzEyNCAwLjE0NzI5NCAwLjYzNTUxIDAuMTQ3Mjk0IDAuMzkxNDMyIDAuMzkxMzcxQzAuMTQ3MzU1IDAuNjM1NDQ5IDAuMTQ3MzU1IDEuMDMxMTggMC4zOTE0MzIgMS4yNzUyNUw0LjExNjE2IDQuOTk5OThMMC4zOTE0MzIgOC43MjQ3QzAuMTQ3MzU1IDguOTY4NzggMC4xNDczNTUgOS4zNjQ1MSAwLjM5MTQzMiA5LjYwODU5QzAuNjM1NTEgOS44NTI2NyAxLjAzMTI0IDkuODUyNjcgMS4yNzUzMiA5LjYwODU5TDUuMDAwMDQgNS44ODM4Nkw4LjcyNDc3IDkuNjA4NTlDOC45Njg4NCA5Ljg1MjY3IDkuMzY0NTcgOS44NTI2NyA5LjYwODY1IDkuNjA4NTlDOS44NTI3MyA5LjM2NDUxIDkuODUyNzMgOC45Njg3OCA5LjYwODY1IDguNzI0N0w1Ljg4MzkyIDQuOTk5OThMOS42MDg2NSAxLjI3NTI1QzkuODUyNzMgMS4wMzExOCA5Ljg1MjczIDAuNjM1NDQ5IDkuNjA4NjUgMC4zOTEzNzFDOS4zNjQ1NyAwLjE0NzI5NCA4Ljk2ODg0IDAuMTQ3Mjk0IDguNzI0NzcgMC4zOTEzNzFMNS4wMDAwNCA0LjExNjFMMS4yNzUzMiAwLjM5MTM3MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
-  background-size: 10px;
-  width: 10px;
-  line-height: 1;
-  opacity: 0.75;
-  border-radius: 0;
-}
-.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
-.choices[data-type*=text] .choices__button:hover,
-.choices[data-type*=text] .choices__button:focus {
-  opacity: 1;
-}
-.choices[data-type*=select-multiple] cat-button,
-.choices[data-type*=text] cat-button {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  margin-top: -20px;
-  margin-right: 25px;
-}
-.choices[data-type*=select-multiple] cat-button::part(button),
-.choices[data-type*=text] cat-button::part(button) {
-  box-shadow: unset;
-  background-color: transparent;
-}
-.choices[data-type*=select-multiple][dir=rtl] .choices__inner,
-.choices[data-type*=text][dir=rtl] .choices__inner {
-  padding-right: 4px;
-  padding-left: 60px;
-}
-.choices[data-type*=select-multiple][dir=rtl] cat-button,
-.choices[data-type*=text][dir=rtl] cat-button {
-  right: auto;
-  left: 0;
-  margin-left: 25px;
-  margin-right: 0;
+.pill > cat-button {
+  margin-right: -0.25rem;
+  margin-left: -0.25rem;
 }
 
-.choices[data-type*=select-one]::after,
-.choices[data-type*=select-multiple]::after {
-  content: "";
-  width: 12px;
-  height: 6.5px;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40Njk2NyAwLjQ2OTY3QzAuNzYyNTYzIDAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMS41MzAzMyAwLjQ2OTY3TDYgNC45MzkzNEwxMC40Njk3IDAuNDY5NjcxQzEwLjc2MjYgMC4xNzY3NzggMTEuMjM3NCAwLjE3Njc3OCAxMS41MzAzIDAuNDY5NjcxQzExLjgyMzIgMC43NjI1NjQgMTEuODIzMiAxLjIzNzQ0IDExLjUzMDMgMS41MzAzM0w2LjUzMDMzIDYuNTMwMzNDNi4yMzc0NCA2LjgyMzIyIDUuNzYyNTYgNi44MjMyMiA1LjQ2OTY3IDYuNTMwMzNMMC40Njk2NyAxLjUzMDMzQzAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMC43NjI1NjMgMC40Njk2NyAwLjQ2OTY3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
-  position: absolute;
-  right: 11.5px;
-  top: 50%;
-  margin-top: -2.5px;
-  pointer-events: none;
-  transition: transform 0.25s linear;
-}
-.choices[data-type*=select-one][dir=rtl]::after,
-.choices[data-type*=select-multiple][dir=rtl]::after {
-  left: 11.5px;
-  right: auto;
-}
-.choices[data-type*=select-one].is-open::after,
-.choices[data-type*=select-multiple].is-open::after {
-  transform: rotate(180deg);
-  transition: transform 0.25s linear;
-}
-
-.choices__inner {
-  display: inline-block;
-  vertical-align: top;
-  width: 100%;
-  background-color: #fff;
-  border: 1px solid #d7dbe0;
-  border-radius: 4px;
-  font-size: 15px;
-  min-height: 40px;
-  overflow: hidden;
+.select-btn {
+  transition: transform 0.13s linear;
 }
-.is-open .choices__inner {
-  border-radius: 4px 4px 0 0;
-}
-.is-flipped.is-open .choices__inner {
-  border-radius: 0 0 4px 4px;
+.select-btn::part(button) {
+  outline: none;
 }
 
-.choices__list {
-  margin: 0;
-  padding-left: 0;
-  list-style: none;
-}
-.choices__list--single {
-  display: flex;
-  padding: 9px 50px 9px 12px;
-  width: 100%;
-}
-[dir=rtl] .choices__list--single {
-  padding-right: 12px;
-  padding-left: 50px;
-}
-.choices__list--single .choices__item {
-  width: 100%;
+cat-spinner {
+  padding: 0.375rem;
 }
 
-.choices__list--multiple {
-  display: contents;
-}
-.choices__list--multiple .choices__item {
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-weight: 600;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 2px;
-  padding: 5px 8px 5px 4px;
-  background-color: rgba(105, 118, 135, 0.1);
-  color: #000;
-  word-break: break-all;
-  box-sizing: border-box;
-}
-.choices__list--multiple .choices__item[data-deletable] {
-  padding-right: 5px;
-}
-[dir=rtl] .choices__list--multiple .choices__item {
-  margin-right: 0;
-  margin-left: 3.75px;
-}
-.choices__list--multiple .choices__item.is-highlighted {
-  background-color: rgba(94, 105, 121, 0.1);
-}
-.is-disabled .choices__list--multiple .choices__item {
-  background-color: #aaaaaa;
+.select-btn-open {
+  transform: rotate(180deg);
 }
 
-.choices__list--dropdown, .choices__list[aria-expanded] {
-  visibility: hidden;
-  z-index: 1;
+.select-dropdown {
   position: absolute;
-  width: 100%;
-  background-color: #fff;
-  border: 1px solid #d7dbe0;
-  top: 100%;
-  margin-top: -1px;
-  overflow: hidden;
-  word-break: break-all;
-  will-change: visibility;
-  box-shadow: 0 2px 4px 0 #101d3033;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] {
-  visibility: visible;
-}
-.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: -1px;
-  border-radius: 0.25rem 0.25rem 0 0;
-}
-.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
-  position: relative;
-  max-height: 300px;
-  padding: 8px 0;
+  right: 0;
+  background: white;
+  display: none;
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  will-change: scroll-position;
-}
-.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  position: relative;
-  padding: 10px;
-  min-height: 40px;
-}
-[dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
-  text-align: right;
-}
-@media (min-width: 640px) {
-  .choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=""]), .choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=""]) {
-    padding-right: 100px;
-  }
-  [dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=""]), [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=""]) {
-    padding-right: 10px;
-  }
-  .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable::after {
-    content: attr(data-select-text);
-    font-size: 12px;
-    opacity: 0;
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  [dir=rtl] .choices__list--dropdown .choices__item--selectable, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
-    text-align: right;
-    padding-left: 100px;
-  }
-  [dir=rtl] .choices__list--dropdown .choices__item--selectable::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
-    right: auto;
-    left: 10px;
-  }
-}
-.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
-  background-color: rgba(105, 118, 135, 0.05);
-}
-.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
-  opacity: 0.5;
+  box-shadow: 0 1px 4px 0 rgba(16, 29, 48, 0.2);
+  border-radius: 0.25rem;
+  z-index: 100;
 }
 
-.choices__item {
-  cursor: default;
-  border-left: 3px solid transparent;
-  transition: 0.25s linear;
+.select-options-wrapper {
+  max-height: 16rem;
+  width: 100%;
 }
 
-.choices__item--selectable {
-  cursor: pointer;
+.select-empty {
+  margin: 1rem 0;
+  padding: 0 1.25rem;
 }
 
-.choices__item--selected {
-  border-color: rgb(var(--cat-primary-bg, 32, 127, 138));
+.select-options {
+  list-style-type: none;
+  margin: 0;
+  padding: 0.5rem 0;
 }
-
-.choices__item--disabled {
-  cursor: not-allowed;
-  user-select: none;
-  opacity: 0.5;
+.select-options cat-checkbox,
+.select-options .select-option-single {
+  margin: 0;
+  padding: 0.5rem 1rem;
 }
 
-.choices__heading {
-  font-weight: 600;
-  font-size: 12px;
-  padding: 10px;
-  border-bottom: 1px solid #f4f5f6;
-  color: gray;
+.select-option-inner {
+  display: flex;
+  gap: 0.5rem;
+  --cat-avatar-size: 1.25rem;
 }
 
-.choices__button {
-  text-indent: -9999px;
-  appearance: none;
-  border: 0;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-position: center;
+.select-option-single {
   cursor: pointer;
 }
-.choices__button:focus {
-  outline: none;
-}
 
-.choices__input {
-  display: inline-block;
-  vertical-align: baseline;
-  background-color: white;
-  font-size: 15px;
-  font-family: var(--cat-font-family-body, "Lato"), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  border: 0;
-  border-radius: 0;
-  max-width: 100%;
-  padding: 7px 0 4px 2px;
-}
-.choices__input:focus {
-  outline: 0;
-}
-.choices__input::-webkit-search-decoration, .choices__input::-webkit-search-cancel-button, .choices__input::-webkit-search-results-button, .choices__input::-webkit-search-results-decoration {
-  display: none;
-}
-.choices__input::-ms-clear, .choices__input::-ms-reveal {
-  display: none;
-  width: 0;
-  height: 0;
-}
-[dir=rtl] .choices__input {
-  padding-right: 2px;
-  padding-left: 0;
+.select-input-transparent-caret {
+  caret-color: transparent;
 }
 
-.choices__placeholder {
-  opacity: 0.5;
+.select-option-empty,
+.select-option-loading {
+  padding: 0.5rem 1rem;
 }
 
-.choices__group {
-  padding: 8px 16px;
-  height: 34px;
-}
-.choices__group .choices__heading {
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 18px;
-  padding: unset;
-  border-bottom: 0;
-  color: #697687;
-}
-.choices__group:not(:first-child) {
-  border-top: 1px solid #f4f5f6;
-  margin-top: 8px;
+.select-option:hover {
+  background-color: rgba(105, 118, 135, 0.05);
 }
 
-.d-flex {
-  display: flex;
+.select-option-active {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: -2px;
 }
 
-.align-items-center {
-  align-items: center;
+.select-option-label {
+  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
 }
 
-.choices-option-icon {
-  width: 20px;
-  aspect-ratio: 1;
-  border-radius: 0.125rem;
+.select-option-description {
+  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
 }