@embeddable.com/remarkable-ui 1.0.6 → 2.0.2

package/dist/ActionIcon.module-WZFHG44L.module.css

@@ -0,0 +1,34 @@
+.actionIcon {
+  cursor: pointer;
+  border: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+
+  color: var(--em-actionicon-color, #212129);
+  border-radius: var(--em-actionicon-border-radius, 624.9375rem);
+  background-color: var(--em-actionicon-background, #ededf1);
+  width: var(--em-actionicon-width, 1.25rem);
+  height: var(--em-actionicon-height, 2rem);
+  padding: var(--em-actionicon-padding-top-bottom, 0.5rem)
+    var(--em-actionicon-padding-left-right, 0.125rem);
+}
+
+.actionIcon svg {
+  width: var(--em-actionicon-icon-size, 1rem);
+  height: var(--em-actionicon-icon-size, 1rem);
+}
+
+.actionIcon:hover {
+  background-color: var(--em-actionicon-background--hover, #e4e4ea);
+}
+
+.actionIcon:active {
+  background-color: var(--em-actionicon-background--active, #d2d2d5);
+}
+
+.actionIcon:disabled {
+  pointer-events: none;
+  color: var(--em-actionicon-color--disabled, #b8b8bd);
+}

package/dist/Button.module-UAYCVFGG.module.css

@@ -0,0 +1,84 @@
+.button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border: unset;
+  border-radius: var(--em-button-border-radius, 624.9375rem);
+}
+
+.button.small {
+  height: var(--em-button-height--small, 2rem);
+  padding: var(--em-button-padding-top-bottom--small, 0.375rem)
+    var(--em-button-padding-left-right--small, 0.375rem);
+}
+
+.button.small span {
+  font-family: var(--em-button-font-family, sans-serif);
+  font-size: var(--em-button-font-size--small, 0.75rem);
+  font-style: normal;
+  font-weight: var(--em-button-font-weight--small, 500);
+  line-height: var(--em-button-line-height--small, 0.875rem);
+}
+
+.button.medium {
+  height: var(--em-button-height--medium, 2.5rem);
+  padding: var(--em-button-padding-top-bottom--medium, 0.75rem)
+    var(--em-button-padding-left-right--medium, 0.75rem);
+}
+
+.button.medium span {
+  font-family: var(--em-button-font-family, sans-serif);
+  font-size: var(--em-button-font-size--medium, 0.875rem);
+  font-style: normal;
+  font-weight: var(--em-button-font-weight--medium, 700);
+  line-height: var(--em-button-line-height--medium, 1rem);
+}
+
+.button.primary {
+  color: var(--em-button-color--primary, #fff);
+  background: var(--em-button-background--primary, #5c5c66);
+}
+
+.button.primary:hover {
+  background: var(--em-button-background--primary--hover, #212129);
+}
+
+.button.primary:active {
+  background: var(--em-button-background--primary--active, #000);
+}
+
+.button.primary:disabled {
+  color: var(--em-button-color--disabled, #b8b8bd);
+  background: var(--em-button-background--disabled, #ededf1);
+}
+
+.button.secondary {
+  color: var(--em-button-color--secondary, #212129);
+  background: var(--em-button-background--secondary, #ededf1);
+}
+
+.button.secondary:hover {
+  background: var(--em-button-background--secondary--hover, #e4e4ea);
+}
+
+.button.secondary:active {
+  background: var(--em-button-background--secondary--active, #d2d2d5);
+}
+
+.button.secondary:disabled {
+  color: var(--em-button-color--disabled, #b8b8bd);
+  background: var(--em-button-background--disabled, #ededf1);
+}
+
+.button:disabled {
+  pointer-events: none;
+}
+
+.button svg {
+  width: var(--em-button-icon-size, 1rem);
+  height: var(--em-button-icon-size, 1rem);
+}
+
+.button span {
+  padding: 0 var(--em-button-label-padding, 0.5rem);
+}

package/dist/ButtonIcon.module-JHFZQSMJ.module.css

@@ -0,0 +1,67 @@
+.buttonIcon {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  border: unset;
+  justify-content: center;
+  border-radius: var(--em-buttonicon-border-radius, 624.9375rem);
+}
+
+.buttonIcon.small {
+  height: var(--em-buttonicon-height--small, 2rem);
+  width: var(--em-buttonicon-height--small, 2rem);
+  padding: var(--em-buttonicon-padding-top-bottom--small, 0.375rem)
+    var(--em-buttonicon-padding-left-right--small, 0.375rem);
+}
+
+.buttonIcon.medium {
+  height: var(--em-buttonicon-height--medium, 2.5rem);
+  width: var(--em-buttonicon-height--medium, 2.5rem);
+  padding: var(--em-buttonicon-padding-top-bottom--medium, 0.75rem)
+    var(--em-buttonicon-padding-left-right--medium, 0.75rem);
+}
+
+.buttonIcon.primary {
+  color: var(--em-buttonicon-color--primary, #fff);
+  background: var(--em-buttonicon-background--primary, #5c5c66);
+}
+
+.buttonIcon.primary:hover {
+  background: var(--em-buttonicon-background--primary--hover, #212129);
+}
+
+.buttonIcon.primary:active {
+  background: var(--em-buttonicon-background--primary--active, #000);
+}
+
+.buttonIcon.primary:disabled {
+  background: var(--em-buttonicon-background--primary--disabled, #ededf1);
+}
+
+.buttonIcon.secondary {
+  color: var(--em-buttonicon-color--secondary, #212129);
+  background: var(--em-buttonicon-background--secondary, #ededf1);
+}
+
+.buttonIcon.secondary:hover {
+  background: var(--em-buttonicon-background--secondary--hover, #e4e4ea);
+}
+
+.buttonIcon.secondary:active {
+  background: var(--em-buttonicon-background--secondary--active, #d2d2d5);
+}
+
+.buttonIcon.secondary:disabled {
+  background: var(--em-buttonicon-background--secondary--disabled, #ededf1);
+}
+
+.buttonIcon:disabled {
+  pointer-events: none;
+  color: var(--em-buttonicon-color--disabled, #b8b8bd);
+}
+
+.buttonIcon svg {
+  width: var(--em-buttonicon-icon-size, 1rem);
+  height: var(--em-buttonicon-icon-size, 1rem);
+}

package/dist/Card.module-DHO64CIG.module.css

@@ -0,0 +1,55 @@
+.card {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  box-sizing: border-box;
+  gap: var(--em-card-gap, 2rem);
+  padding: var(--em-card-padding, 2rem);
+  border-radius: var(--em-card-border-radius, 2rem);
+  background: var(--em-card-background, #f7f7f8);
+}
+
+.card .cardHeader {
+  width: 100%;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--em-card-header-gap, 1rem);
+}
+
+.card .cardHeader .leftContent {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--em-card-header-gap, 1rem);
+}
+
+.card .cardHeader .leftContent h1 {
+  margin: unset;
+  overflow-wrap: break-word;
+  font-style: normal;
+  color: var(--em-card-title-color, #212129);
+  font-family: var(--em-card-font-family, sans-serif);
+  font-size: var(--em-card-title-font-size, 1rem);
+  font-weight: var(--em-card-title-font-weight, 700);
+  line-height: var(--em-card-title-line-height, 1.1875rem);
+}
+
+.card .cardHeader .leftContent p {
+  margin: unset;
+  overflow-wrap: break-word;
+  font-style: normal;
+  color: var(--em-card-subtitle-color, #5c5c66);
+  font-family: var(--em-card-font-family, sans-serif);
+  font-size: var(--em-card-subtitle-font-size, 0.875rem);
+  font-weight: var(--em-card-subtitle-font-weight, 400);
+  line-height: var(--em-card-subtitle-line-height, 1.1875rem);
+}
+
+.card .cardContent {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}

package/dist/CardFeedback.module-WCSHLBSM.module.css

@@ -0,0 +1,40 @@
+.feedback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+  gap: var(--em-card-feedback-gap, 0.75rem);
+}
+
+.feedback svg {
+  width: var(--em-card-feedback-icon-size, 1rem);
+  height: var(--em-card-feedback-icon-size, 1rem);
+}
+
+.feedback h2 {
+  margin: unset;
+  text-align: center;
+  font-style: normal;
+  color: var(--em-card-feedback-title-color, #212129);
+  font-family: var(--em-textfield-feedback-font-family, sans-serif);
+  font-size: var(--em-card-feedback-font-size, 0.875rem);
+  font-weight: var(--em-card-feedback-title-font-weight, 500);
+  line-height: var(--em-card-feedback-line-height, 1rem);
+}
+
+.feedback p {
+  margin: unset;
+  text-align: center;
+  font-style: normal;
+  color: var(--em-card-feedback-subtitle-color, #5c5c66);
+  font-family: var(--em-textfield-feedback-font-family, sans-serif);
+  font-size: var(--em-card-feedback-font-size, 0.875rem);
+  font-weight: var(--em-card-feedback-subtitle-font-weight, 400);
+  line-height: var(--em-card-feedback-line-height, 1rem);
+}
+
+.feedback.error,
+.feedback.error h2,
+.feedback.error p {
+  color: var(--em-card-feedback-color--error, #bc1010);
+}

package/dist/FieldFeedback.module-F7Z33KCS.module.css

@@ -0,0 +1,17 @@
+.fieldFeedback {
+  margin: unset;
+  font-style: normal;
+  color: var(--em-textfield-feedback-color, #5c5c66);
+  font-family: var(--em-textfield-feedback-font-family, sans-serif);
+  font-size: var(--em-textfield-feedback-font-size, 0.75rem);
+  font-weight: var(--em-textfield-feedback-font-weight, 400);
+  line-height: var(--em-textfield-feedback-line-height, 1rem);
+  padding-top: var(--em-field-feedback-padding-top, 0.5rem);
+}
+
+.fieldFeedback.error {
+  font-style: normal;
+  color: var(--em-textfield-feedback-color--error, #bc1010);
+  font-family: var(--em-textfield-font-family, sans-serif);
+  font-weight: var(--em-textfield-feedback-font-weight--error, 500);
+}

package/dist/FieldHeader.module-QOLBH472.module.css

@@ -0,0 +1,20 @@
+.fieldHeader {
+  font-style: normal;
+  display: flex;
+  justify-content: space-between;
+  color: var(--em-field-header-color, #212129);
+  font-family: var(--em-field-font-family, sans-serif);
+  font-size: var(--em-field-header-title-font-size, 0.875rem);
+  font-weight: var(--em-field-header-title-font-weight, 500);
+  line-height: var(--em-field-header-title-line-height, 1rem);
+  padding-bottom: var(--em-field-header-padding-bottom, 0.5rem);
+}
+
+.fieldHeader span {
+  font-style: normal;
+  margin-left: auto;
+  font-family: var(--em-field-font-family, sans-serif);
+  font-size: var(--em-field-header-required-font-size, 0.75rem);
+  font-weight: var(--em-field-header-required-font-weight, 400);
+  line-height: var(--em-field-header-required-line-height, 0.875rem);
+}

package/dist/GhostButton.module-43KOFC6W.module.css

@@ -0,0 +1,53 @@
+.ghostButton {
+  border: none;
+  cursor: pointer;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  background-color: transparent;
+  font-style: normal;
+
+  height: var(--em-ghostbutton-height, 1.25rem);
+  padding: var(--em-ghostbutton-padding, 0.125rem);
+
+  color: var(--em-ghostbutton-color, #212129);
+
+  font-family: var(--em-ghostbutton-font-family, sans-serif);
+  font-size: var(--em-ghostbutton-font-size, 0.75rem);
+  font-weight: var(--em-ghostbutton-font-weight, 400);
+  line-height: var(--em-ghostbutton-line-height, 0.875rem);
+
+  border-radius: var(--em-ghostbutton-border-radius, 0.25rem);
+}
+
+.ghostButton:hover,
+.ghostButton:focus {
+  background-color: var(--em-ghostbutton-background--hover, #f7f7f8);
+}
+
+.ghostButton:active {
+  background-color: var(--em-ghostbutton-background--active, #ededf1);
+}
+
+.ghostButton:disabled {
+  cursor: unset;
+  pointer-events: none;
+
+  background-color: transparent;
+  color: var(--em-ghostbutton-color--disabled, #b8b8bd);
+}
+
+.ghostButton svg {
+  width: var(--em-ghostbutton-icon-size, 0.75rem);
+  height: var(--em-ghostbutton-icon-size, 0.75rem);
+}
+
+.ghostButton span {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--em-ghostbutton-label-padding-right, 0.25rem) 0
+    var(--em-ghostbutton-label-padding-left, 0.25rem);
+}

package/dist/InputField.module-LDLOMDBK.module.css

@@ -0,0 +1,78 @@
+.input {
+  height: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--em-textfield-height, 2.5rem);
+  min-width: var(--em-textfield-min-width, 10rem);
+  padding: var(--em-textfield-padding, 0.5rem);
+  border-radius: var(--em-textfield-border-radius, 0.5rem);
+  border: var(--em-textfield-border-width, 1px) solid var(--em-textfield-border-color, #b8b8bd);
+  background: var(--em-textfield-background, #f7f7f8);
+}
+
+.input:hover {
+  background: var(--em-textfield-background--active, #e4e4ea);
+}
+
+.input.error {
+  border: var(--em-textfield-border-width--error, 2px) solid
+    var(--em-textfield-border-color--error, #bc1010);
+}
+.input:focus-within input {
+  color: var(--em-textfield-color--filled, #212129);
+  font-weight: var(--em-textfield-font-weight--filled, 500);
+}
+
+.input svg {
+  flex-shrink: 0;
+  width: var(--em-textfield-icon-size, 1rem);
+  height: var(--em-textfield-icon-size, 1rem);
+  color: var(--em-textfield-color, #5c5c66);
+}
+
+.input:focus-within svg {
+  color: var(--em-textfield-color--filled, #212129);
+}
+
+.input svg.clearIcon {
+  cursor: pointer;
+  visibility: hidden;
+}
+
+.input svg.clearIcon.clearIconVisible {
+  visibility: visible;
+}
+
+.input input {
+  height: inherit;
+  border: unset;
+  background: unset;
+  margin: unset;
+  width: 100%;
+  padding: 0 var(--em-textfield-label-padding, 0.5rem);
+  color: var(--em-textfield-color, #5c5c66);
+  font-family: var(--em-textfield-font-family, Inter);
+  font-size: var(--em-textfield-font-size, 0.75rem);
+  font-style: normal;
+  font-weight: var(--em-textfield-font-weight, 400);
+  line-height: var(--em-textfield-line-height, 1rem);
+}
+
+.input:has(input:not(:placeholder-shown)) {
+  background: var(--em-textfield-background--filled, #ededf1);
+}
+
+.input:has(input:disabled) {
+  background: var(--em-textfield-background--disabled, #fff);
+}
+
+.input:has(input:disabled) svg,
+.input:has(input:disabled) input {
+  color: var(--em-textfield-color--disabled, #b8b8bd);
+}
+
+.input input:focus {
+  outline: none;
+}

package/dist/KpiChart.module-KRTSMOWN.module.css

@@ -0,0 +1,34 @@
+.kpiChartContainer {
+  width: 100%;
+  height: 100%;
+  font-style: normal;
+  text-align: center;
+  display: flex;
+}
+
+.kpiChartCenter {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.kpiChartCenter h2 {
+  margin: unset;
+  overflow: hidden;
+  width: min-content;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--em-kpichart-color, #212129);
+  font-family: var(--em-kpichart-font-family, sans-serif);
+  font-weight: var(--em-kpichart-number-font-weight, 700);
+}
+
+.kpiComparisonContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  font-style: normal;
+  font-size: var(--em-kpichart-trend-font-size, 1rem);
+}

package/dist/KpiChartChange.module-M7E4IU7A.module.css

@@ -0,0 +1,52 @@
+.kpiChartChangeContainer {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--em-kpichart-label-gap, 0.5rem);
+  margin-top: var(--em-kpichart-gap, 1.5rem);
+}
+
+.kpiChangeBadge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--em-kpichart-trend-padding, 0.25rem);
+  border-radius: var(--em-kpichart-trend-border-radius, 0.375rem);
+  width: min-content;
+}
+
+.kpiChangeBadge > svg {
+  width: 1em; /* 87.5% of the parent font-size */
+  height: 1em; /* 87.5% of the parent font-size */
+}
+
+.kpiChangeBadge > span {
+  color: inherit;
+  font-style: normal;
+  font-size: 1em;
+  padding: 0 var(--em-kpichart-trend-padding, 0.25rem);
+  font-weight: var(--em-kpichart-trend-font-weight, 500);
+  line-height: var(--em-kpichart-trend-line-height, 1rem);
+}
+
+.kpiChangeBadge.positive {
+  background: var(--em-kpichart-trend-background--positive, #e1f0e9);
+  color: var(--em-kpichart-trend-color--positive, #0f955a);
+}
+
+.kpiChangeBadge.negative {
+  background: var(--em-kpichart-trend-background--negative, #f6e2e2);
+  color: var(--em-kpichart-trend-color--negative, #bc1010);
+}
+
+.kpiComparisonLabel {
+  text-align: center;
+  font-style: normal;
+  font-size: 0.875em; /* 87.5% of the parent font-size */
+  color: var(--em-kpichart-color, #212129);
+  font-family: var(--em-kpichart-font-family, sans-serif);
+  font-weight: var(--em-kpichart-label-font-weight, 400);
+  line-height: var(--em-kpichart-label-line-height, 0.875rem);
+  white-space: nowrap;
+}

package/dist/Overlay.module-FCW64VWM.module.css

@@ -0,0 +1,12 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--em-overlay-background, rgba(33, 33, 41, 0.8));
+}

package/dist/SelectFieldCategory.module-FMZMX5V2.module.css

@@ -0,0 +1,12 @@
+.selectFieldCategory {
+  display: flex;
+  font-style: normal;
+  padding: var(--em-selectfield-category-padding, 0.25rem);
+  border-radius: var(--em-selectfield-category-border-radius, 0.375rem);
+  background: var(--em-selectfield-category-background, #e4e4ea);
+  color: var(--em-selectfield-category-color, #000);
+  font-family: var(--em-selectfield-category-font-family, sans-serif);
+  font-size: var(--em-selectfield-category-font-size, 0.75rem);
+  font-weight: var(--em-selectfield-category-font-weight, 700);
+  line-height: var(--em-selectfield-category-line-height, 0.875rem);
+}

package/dist/SelectFieldContent.module-6FORUMWR.module.css

@@ -0,0 +1,34 @@
+.selectFieldContent {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  box-sizing: border-box;
+
+  max-width: max(
+    var(--radix-dropdown-menu-trigger-width),
+    var(--em-selectfield-content-max-width, 25rem)
+  );
+  min-width: var(--radix-dropdown-menu-trigger-width);
+  max-height: var(--em-selectfield-content-max-height, 20rem);
+  padding: var(--em-selectfield-content-padding, 0.5rem);
+  border-radius: var(--em-selectfield-content-border-radius, 0.75rem);
+  background: var(--em-selectfield-content-background, #fff);
+  box-shadow: var(--em-selectfield-content-shadow-position-x, 0)
+    var(--em-selectfield-content-shadow-position-y, 1px)
+    var(--em-selectfield-content-shadow-blur, 40px) var(--em-selectfield-content-shadow-spread, 0)
+    var(--em-selectfield-content-shadow-color, rgba(33, 33, 41, 0.25));
+}
+
+.selectFieldContentList {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  overflow: auto;
+}
+
+.selectFieldContentList.disabled {
+  opacity: var(--em-selectfield-content-opacity--loading, 0.5);
+  pointer-events: none;
+  user-select: none;
+}

package/dist/SelectFieldOption.module-SH3TOVNB.module.css

@@ -0,0 +1,95 @@
+.selectFieldOption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  outline: none;
+  cursor: pointer;
+  overflow: hidden;
+  box-sizing: border-box;
+  min-height: var(--em-selectfield-item-height, 2rem);
+  height: var(--em-selectfield-item-height, 2rem);
+  max-height: var(--em-selectfield-item-height, 2rem);
+  padding: var(--em-selectfield-item-padding, 0.5rem);
+  border-radius: var(--em-selectfield-item-border-radius, 0.5rem);
+  background: var(--em-selectfield-item-background, #fff);
+}
+
+.selectFieldOption .leftContent {
+  display: flex;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  align-items: center;
+  font-style: normal;
+  color: var(--em-selectfield-item-label-left-color, #212129);
+  font-family: var(--em-selectfield-item-font-family, sans-serif);
+  font-size: var(--em-selectfield-item-label-left-font-size, 0.75rem);
+  font-weight: var(--em-selectfield-item-label-left-font-weight, 500);
+  line-height: var(--em-selectfield-item-label-left-line-height, 0.875rem);
+}
+
+.selectFieldOption .rightContent {
+  display: flex;
+  min-width: 0;
+  font-style: normal;
+  color: var(--em-selectfield-item-label-right-color, #5c5c66);
+  font-family: var(--em-selectfield-item-font-family, sans-serif);
+  font-size: var(--em-selectfield-item-label-right-font-size, 0.75rem);
+  font-weight: var(--em-selectfield-item-label-right-font-weight, 400);
+  line-height: var(--em-selectfield-item-label-right-line-height, 0.875rem);
+}
+
+.selectFieldOption .leftContent span,
+.selectFieldOption .rightContent span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 var(--em-selectfield-item-label-padding-left-right, 0.5rem);
+}
+
+.selectFieldOption .rightContent span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: right;
+}
+
+.selectFieldOption:hover,
+.selectFieldOption:focus {
+  background: var(--em-selectfield-item-background--hover, #f7f7f8);
+}
+
+.selectFieldOption:active {
+  background: var(--em-selectfield-item-background--active, #ededf1);
+}
+
+.selectFieldOption.disabled {
+  pointer-events: none;
+  user-select: none;
+  color: var(--em-selectfield-item-label-left-color--disabled, #b8b8bd);
+  background: var(--em-selectfield-item-background, #fff);
+}
+
+.selectFieldOption.selected {
+  background: var(--em-selectfield-item-background--selected, #212129);
+}
+
+.selectFieldOption.selected svg {
+  color: var(--em-selectfield-item-icon-color--selected, #fff);
+}
+
+.selectFieldOption.selected .leftContent,
+.selectFieldOption.selected .rightContent {
+  color: var(--em-selectfield-item-label-left-color--selected, #fff);
+}
+
+.selectFieldOption svg,
+.selectFieldOption img {
+  flex-shrink: 0;
+  width: var(--em-selectfield-item-icon-size, 1rem);
+  height: var(--em-selectfield-item-icon-size, 1rem);
+  color: var(--em-selectfield-item-icon-color, #212129);
+}
+
+.selectFieldOption.disabled svg,
+.selectFieldOption.disabled img {
+  color: var(--em-selectfield-item-icon-color--disabled, #b8b8bd);
+}