@3deye-toolkit/react-event-search 0.0.1-alpha.24 → 0.0.1-alpha.25

package/dist/react-event-search.css

@@ -10,12 +10,21 @@
 	   -moz-user-select: none;
 	    -ms-user-select: none;
 	        user-select: none;
-	text-align: center;
-	align-items: flex-start;
+  display: inline-flex;
+	justify-content: center;
+	align-items: center;
   border-radius: 4px;
+  letter-spacing: .0107142857em;
+  font-weight: 500;
+}
+
+.x-3deye-button sup {
+  position: relative;
+  top: -0.5em;
+  left: 0.25em;
 }
 
-.x-3deye-button.fullwidth {
+.x-3deye-button.x-3deye-button--fullwidth {
 	width: 100%;
 }
 
@@ -38,50 +47,49 @@
 	opacity: 0.4;
 }
 
-.x-3deye-button.x-3deye-button--ok,
-.x-3deye-button.x-3deye-button--cancel {
-	color: white;
-	text-transform: none;
-	min-width: 80px;
-}
-
-.x-3deye-button.x-3deye-button--ok.fullwidth,
-.x-3deye-button.x-3deye-button--cancel.fullwidth {
-	width: calc(100% - 8px);
-}
-
 .x-3deye-button:not(:disabled) {
 	cursor: pointer;
 }
 
-.x-3deye-button.x-3deye-button--ok {
-	background-color: #27b9a1;
+.x-3deye-button.x-3deye-button--filled,
+.x-3deye-button.x-3deye-button--text {
+  min-width: 80px;
+  text-transform: capitalize;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+  padding: 0 1rem;
 }
 
-.x-3deye-button.x-3deye-button--ok:not(:disabled):hover {
+.x-3deye-button.x-3deye-button--filled {
+  background-color: #27b9a1;
+  color: white;
+}
+
+.x-3deye-button.x-3deye-button--filled:not(:disabled):hover {
 	background-color: #61beaf;
 }
 
-.x-3deye-button.x-3deye-button--ok:focus {
+.x-3deye-button.x-3deye-button--filled:focus {
 	transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
 	box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
 }
 
-.x-3deye-button.x-3deye-button--cancel {
-	background-color: rgb(119, 87, 178);
-}
-
-.x-3deye-button.x-3deye-button--cancel:not(:disabled):hover {
-	background-color: rgb(142, 122, 180);
+.x-3deye-button canvas {
+	color: rgb(var(--surface-highlight-rgb));
 }
 
-.x-3deye-button.x-3deye-button--cancel:focus {
-	transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
-	box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
+.x-3deye-button--overlay {
+	pointer-events: auto;
+	background: rgba(0, 0, 0, 0.5);
+	border: 2px solid rgba(255, 255, 255, 0.25);
+	color: white;
 }
 
-.x-3deye-button canvas {
-	color: rgb(var(--surface-highlight-rgb));
+.x-3deye-button.x-3deye-button--overlay:focus, .x-3deye-button.x-3deye-button--overlay:not(:disabled):hover {
+  background: rgba(0, 0, 0, 0.5);
+	border: 2px solid rgba(255, 255, 255, 0.5);
 }
 
 :root {
@@ -148,279 +156,133 @@
   padding: 6px;
 }
 
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
- */
-@-webkit-keyframes mdc-slider-emphasize {
-  0% {
-    -webkit-animation-timing-function: ease-out;
-            animation-timing-function: ease-out;
-  }
-  50% {
-    -webkit-animation-timing-function: ease-in;
-            animation-timing-function: ease-in;
-    transform: scale(0.85);
-  }
-  100% {
-    transform: scale(0.571);
-  }
-}
-@keyframes mdc-slider-emphasize {
-  0% {
-    -webkit-animation-timing-function: ease-out;
-            animation-timing-function: ease-out;
-  }
-  50% {
-    -webkit-animation-timing-function: ease-in;
-            animation-timing-function: ease-in;
-    transform: scale(0.85);
-  }
-  100% {
-    transform: scale(0.571);
-  }
-}
-.mdc-slider {
-  position: relative;
-  width: 100%;
-  height: 48px;
-  cursor: pointer;
-  touch-action: pan-x;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-container::after {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-  opacity: 0.26;
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-marker-container {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb {
-  fill: #018786;
-  /* @alternate */
-  fill: var(--mdc-theme-secondary, #018786);
-  stroke: #018786;
-  /* @alternate */
-  stroke: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__focus-ring {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
-  color: white;
-  /* @alternate */
-  color: var(--mdc-theme-text-primary-on-dark, white);
-}
-.mdc-slider--disabled {
-  cursor: auto;
-}
-.mdc-slider--disabled .mdc-slider__track {
-  background-color: #9a9a9a;
-}
-.mdc-slider--disabled .mdc-slider__track-container::after {
-  background-color: #9a9a9a;
-  opacity: 0.26;
-}
-.mdc-slider--disabled .mdc-slider__track-marker-container {
-  background-color: #9a9a9a;
-}
-.mdc-slider--disabled .mdc-slider__thumb {
-  fill: #9a9a9a;
-  stroke: #9a9a9a;
-}
-.mdc-slider--disabled .mdc-slider__thumb {
-  /* @alternate */
-  stroke: white;
-  stroke: var(--mdc-slider-bg-color-behind-component, white);
-}
-.mdc-slider:focus {
-  outline: none;
-}
-.mdc-slider__track-container {
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-}
-.mdc-slider__track-container::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  content: "";
-}
-.mdc-slider__track {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  transform-origin: left top;
-  will-change: transform;
-}
-.mdc-slider[dir=rtl] .mdc-slider__track, [dir=rtl] .mdc-slider .mdc-slider__track {
-  transform-origin: right top;
+.x-3deye-slider {
+	position: relative;
+	display: flex;
+	align-items: center;
 }
 
-.mdc-slider__track-marker-container {
-  display: flex;
-  margin-right: 0;
-  margin-left: -1px;
-  visibility: hidden;
-}
-.mdc-slider[dir=rtl] .mdc-slider__track-marker-container, [dir=rtl] .mdc-slider .mdc-slider__track-marker-container {
-  margin-right: -1px;
-  margin-left: 0;
+.x-3deye-slider:focus-visible {
+	outline: none;
 }
 
-.mdc-slider__track-marker-container::after {
-  display: block;
-  width: 2px;
-  height: 2px;
-  content: "";
+.x-3deye-slider.horizontal {
+	width: 100%;
+	height: 20px;
 }
-.mdc-slider__track-marker {
-  flex: 1;
+
+.x-3deye-slider.vertical {
+	width: 20px;
+	height: 100%;
+	flex-direction: column;
 }
-.mdc-slider__track-marker::after {
-  display: block;
-  width: 2px;
-  height: 2px;
-  content: "";
+
+.x-3deye-slider__track {
+	background: var(--surface-inverse, gainsboro);
+	position: relative;
+	flex: 1;
 }
-.mdc-slider__track-marker:first-child::after {
-  width: 3px;
+
+.x-3deye-slider__bar {
+	background-color: var(--primary-color, #0067ac);
+	position: absolute;
 }
-.mdc-slider__thumb-container {
-  position: absolute;
-  top: 15px;
-  left: 0;
-  width: 21px;
-  height: 100%;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  will-change: transform;
+
+.x-3deye-slider.disabled .x-3deye-slider__bar {
+	background-color: rgb(165, 165, 165);
 }
-.mdc-slider__thumb {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: scale(0.571);
-  stroke-width: 3.5;
-  transition: transform 100ms ease-out, fill 100ms ease-out, stroke 100ms ease-out;
+
+.x-3deye-slider.horizontal .x-3deye-slider__bar {
+	top: 0;
+	bottom: 0;
+	left: 0;
 }
-.mdc-slider__focus-ring {
-  width: 21px;
-  height: 21px;
-  border-radius: 50%;
-  opacity: 0;
-  transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out;
+
+.x-3deye-slider.vertical .x-3deye-slider__bar {
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
-.mdc-slider__pin {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  margin-top: -2px;
-  margin-left: -2px;
-  transform: rotate(-45deg) scale(0) translate(0, 0);
-  border-radius: 50% 50% 50% 0%;
-  z-index: 1;
-  transition: transform 100ms ease-out;
-}
-.mdc-slider__pin-value-marker {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Roboto, sans-serif;
-  /* @alternate */
-  font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-  font-size: 0.875rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-body2-font-size, 0.875rem);
-  line-height: 1.25rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-body2-line-height, 1.25rem);
-  font-weight: 400;
-  /* @alternate */
-  font-weight: var(--mdc-typography-body2-font-weight, 400);
-  letter-spacing: 0.0178571429em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
-  text-decoration: inherit;
-  /* @alternate */
-  -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
-          text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
-  text-transform: inherit;
-  /* @alternate */
-  text-transform: var(--mdc-typography-body2-text-transform, inherit);
-  transform: rotate(45deg);
+
+.x-3deye-slider.horizontal .x-3deye-slider__track {
+	height: 3px;
 }
 
-.mdc-slider--active .mdc-slider__thumb {
-  transform: scale3d(1, 1, 1);
+.x-3deye-slider.vertical .x-3deye-slider__track {
+	width: 3px;
 }
 
-.mdc-slider--focus .mdc-slider__thumb {
-  -webkit-animation: mdc-slider-emphasize 266.67ms linear;
-          animation: mdc-slider-emphasize 266.67ms linear;
+.x-3deye-slider__thumb {
+	will-change: transform box-shadow;
+	background: white;
+	box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	transition: box-shadow 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
 }
-.mdc-slider--focus .mdc-slider__focus-ring {
-  transform: scale3d(1.55, 1.55, 1.55);
-  opacity: 0.25;
+
+.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
+.x-3deye-slider:focus .x-3deye-slider__thumb {
+	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
+		1px 1px 2px 0 rgba(0, 0, 0, 0.25);
 }
 
-.mdc-slider--in-transit .mdc-slider__thumb {
-  transition-delay: 140ms;
+.x-3deye-slider:focus .x-3deye-slider__thumb.active {
+	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
+		1px 1px 2px 0 rgba(0, 0, 0, 0.25);
 }
 
-.mdc-slider--in-transit .mdc-slider__thumb-container,
-.mdc-slider--in-transit .mdc-slider__track,
-.mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__thumb-container,
-.mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__track {
-  transition: transform 80ms ease;
+.x-3deye-slider.horizontal .x-3deye-slider__thumb {
+	margin-left: -10px;
 }
 
-.mdc-slider--discrete.mdc-slider--active .mdc-slider__thumb {
-  transform: scale(calc(12 / 21));
+.x-3deye-slider.vertical .x-3deye-slider__thumb {
+	margin-bottom: -10px;
 }
-.mdc-slider--discrete.mdc-slider--active .mdc-slider__pin {
-  transform: rotate(-45deg) scale(1) translate(19px, -20px);
+
+.x-3deye-slider__label {
+	pointer-events: none;
+	touch-action: none;
+	will-change: transform;
+	transform: translate(-50%, -100%) scale(0);
+	background: var(--primary-color, #0067ac);
+	bottom: 50%;
+	left: 50%;
+	color: var(--on-primary-color, white);
+	font-size: 0.75rem;
+	border-radius: 4px;
+	width: -webkit-fit-content;
+	width: -moz-fit-content;
+	width: fit-content;
+	min-width: 24px;
+	padding: 4px 8px;
+	position: relative;
+	transition: transform 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
+	transform-origin: center bottom;
 }
-.mdc-slider--discrete.mdc-slider--focus .mdc-slider__thumb {
-  -webkit-animation: none;
-          animation: none;
+
+.x-3deye-slider__label.open,
+.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover .x-3deye-slider__label,
+.x-3deye-slider:focus .x-3deye-slider__label {
+	transform: translate(-50%, -100%) scale(1);
 }
-.mdc-slider--discrete.mdc-slider--display-markers .mdc-slider__track-marker-container {
-  visibility: visible;
+
+.x-3deye-slider__label::before {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 100%;
+	left: calc(50% - 5px);
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 5px solid var(--primary-color, #0067ac);
 }
+
 .preloader-container {
-  color: var(--primary-text);
+  color: var(--on-container);
   flex: 1;
   display: flex;
   justify-content: center;
@@ -1268,7 +1130,7 @@
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
   border-radius: 0.3rem;
-  background-color: #2a87d0;
+  background-color: #2579ba;
   color: #fff;
 }
 .react-datepicker__day--keyboard-selected:hover,
@@ -1530,14 +1392,14 @@
 
 .x-3deye-button-group > .x-3deye-button {
 	flex: 1;
-	color: var(--secondary-text);
 	height: 35px;
 	font-size: 11px;
 }
 
-.x-3deye-button-group > .x-3deye-button.button-selected {
-	color: var(--primary-text);
-	background-color: var(--background);
+.x-3deye-button-group > .x-3deye-button.button-selected,
+.x-3deye-button-group > .x-3deye-button.button-selected:hover {
+	color: var(--on-container);
+	background-color: var(--container);
 }
 
 .x-3deye-button-group > .x-3deye-button + .x-3deye-button {
@@ -1545,15 +1407,15 @@
 }
 
 .x-3deye-button-group > .x-3deye-button:hover {
-	color: var(--primary-text);
+	color: var(--on-container);
 }
 
 .x-3deye-button-group > .x-3deye-button.button-unselected {
-	color: var(--secondary-text);
+	color: var(--on-surface);
 }
 
 .x-3deye-button-group > .x-3deye-button.button-selected canvas {
-	color: var(--background);
+	color: var(--container);
 }
 
 .x-3deye-popover {