@wix/web5-core 1.56.0

package/dist/cjs/components/ui/SearchSection.css

@@ -0,0 +1,538 @@
+.web5-prompt-shell {
+  width: 100%;
+  pointer-events: none;
+}
+
+.web5-prompt-shell--collapsed {
+  pointer-events: none;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.web5-prompt-shell__stage {
+  position: relative;
+  width: 100%;
+  min-height: calc(
+    var(--pi-field-min-h) + var(--pi-panel-padding-block-start) +
+      var(--pi-panel-padding-block-end)
+  );
+}
+
+.web5-prompt-shell__content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  pointer-events: none;
+  transform-origin: right bottom;
+  transition: opacity 220ms ease, transform 260ms ease, filter 220ms ease;
+}
+
+.web5-prompt-shell--collapsed .web5-prompt-shell__content {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: min(100vw, var(--pi-content-max-w));
+  opacity: 0;
+  transform: translate3d(160px, 30px, 0) scale(0.26, 0.72);
+  filter: blur(1px);
+  pointer-events: none;
+}
+
+.web5-prompt-shell--collapsed .web5-prompt-shell__stage {
+  width: max-content;
+  min-height: auto;
+}
+
+.web5-prompt-shell__collapsed-button {
+  position: absolute;
+  right: 24px;
+  bottom: 16px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--pi-collapsed-btn-min-h);
+  padding: var(--pi-collapsed-btn-padding-y) var(--pi-collapsed-btn-padding-x);
+  border: 1px solid var(--pi-collapsed-btn-border);
+  border-radius: var(--pi-collapsed-btn-radius);
+  isolation: isolate;
+  overflow: hidden;
+  background: var(--pi-collapsed-btn-bg);
+  box-shadow: var(--pi-collapsed-btn-shadow);
+  color: var(--pi-collapsed-btn-fg);
+  font-family: var(--pi-field-font-family);
+  font-size: var(--pi-collapsed-btn-font-size);
+  font-weight: var(--pi-collapsed-btn-font-weight);
+  line-height: var(--pi-collapsed-btn-line-height);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: opacity 220ms ease, transform 260ms ease,
+    box-shadow var(--pi-transition-fast);
+  opacity: 0;
+  transform: translate3d(18px, 14px, 0) scale(0.92);
+  pointer-events: none;
+}
+
+.web5-prompt-shell__collapsed-button::before,
+.web5-prompt-shell__collapsed-button::after {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+}
+
+.web5-prompt-shell__collapsed-button::before {
+  top: 50%;
+  left: 50%;
+  z-index: -2;
+  width: 240%;
+  height: 760%;
+  transform: translate(-50%, -50%) rotate(0deg);
+  transform-origin: center;
+  background-image: var(--pi-collapsed-btn-decoration);
+  opacity: var(--pi-collapsed-btn-decoration-opacity);
+  animation: web5-prompt-border-snake 3.4s linear infinite;
+}
+
+.web5-prompt-shell__collapsed-button::after {
+  inset: 1px;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--pi-collapsed-btn-inner-bg);
+}
+
+.web5-prompt-shell--collapsed .web5-prompt-shell__collapsed-button {
+  position: relative;
+  right: auto;
+  bottom: auto;
+  margin: 0 24px 16px 0;
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+  pointer-events: auto;
+}
+
+.web5-prompt-shell__collapsed-button:hover {
+  box-shadow: var(--pi-collapsed-btn-hover-shadow);
+}
+
+.web5-prompt-shell--collapsed .web5-prompt-shell__collapsed-button:hover {
+  transform: translate3d(0, -1px, 0) scale(1);
+}
+
+.web5-prompt-shell__collapsed-button:focus-visible {
+  outline: 2px solid var(--pi-submit-active-bg);
+  outline-offset: 2px;
+}
+
+@keyframes web5-prompt-border-snake {
+  100% {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+
+.web5-prompt-shell__panel {
+  width: 100%;
+  padding-block: var(--pi-panel-padding-y);
+  background: var(--pi-panel-bg);
+  box-shadow: var(--pi-panel-shadow);
+  backdrop-filter: blur(var(--pi-panel-blur));
+  pointer-events: none;
+}
+
+.web5-prompt-shell__stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.web5-prompt-shell__stack:has(.web5-prompt-shell__chips--visible) {
+  gap: var(--pi-stack-gap);
+}
+
+.web5-prompt-shell__stack--chips-top {
+  flex-direction: column-reverse;
+}
+
+.web5-prompt-shell__chips {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--pi-chip-gap);
+  margin: 0 auto;
+  width: 100%;
+  max-width: 835px;
+  overflow: hidden;
+  transition: transform var(--pi-transition-medium),
+    opacity var(--pi-transition-medium), max-height var(--pi-transition-medium);
+  pointer-events: auto;
+}
+
+.web5-prompt-shell__chips--visible {
+  transform: translateY(0);
+  opacity: 1;
+  max-height: 8rem;
+  overflow: visible;
+}
+
+.web5-prompt-shell__chips--hidden {
+  transform: translateY(1rem);
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+}
+
+.web5-prompt-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: var(--pi-chip-padding-y) var(--pi-chip-padding-x);
+  border: 1px solid var(--pi-chip-border, transparent);
+  border-radius: var(--pi-chip-radius);
+  background: var(--pi-chip-bg);
+  box-shadow: var(--pi-chip-shadow);
+  color: var(--pi-chip-text);
+  font-family: var(--pi-field-font-family);
+  font-size: var(--pi-chip-font-size);
+  font-weight: 500;
+  line-height: var(--pi-chip-line-height);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background-color var(--pi-transition-fast);
+}
+
+.web5-prompt-chip:hover {
+  background: var(--pi-chip-hover-bg);
+}
+
+/* Inset ring so the focus indicator isn't clipped by the chips container's overflow: hidden */
+.web5-prompt-chip:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px rgba(128, 0, 177, 0.8), var(--pi-chip-shadow);
+}
+
+.web5-prompt-search {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.web5-prompt-search__inner {
+  position: relative;
+  width: min(100%, var(--pi-content-max-w));
+  min-width: min(100%, var(--pi-content-min-w));
+  margin-inline: auto;
+  pointer-events: auto;
+}
+
+.web5-prompt-field-wrap {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.web5-prompt-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--pi-field-min-h);
+  padding: var(--pi-field-padding-top) var(--pi-field-padding-right)
+    var(--pi-field-padding-bottom) var(--pi-field-padding-left);
+  border: var(--pi-field-border-width) solid var(--pi-field-border);
+  border-radius: var(--pi-field-radius-pill);
+  background: var(--pi-field-bg);
+  box-shadow: var(--pi-field-shadow);
+  transition: min-height var(--pi-transition-medium),
+    border-radius var(--pi-transition-medium),
+    padding-top var(--pi-transition-medium),
+    padding-bottom var(--pi-transition-medium);
+}
+
+.web5-prompt-field--multiline {
+  align-items: flex-end;
+  padding-top: var(--pi-field-padding-top-multiline);
+  border-radius: var(--pi-field-radius-multiline);
+}
+
+.web5-prompt-input {
+  appearance: none;
+  display: block;
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--pi-field-line-height);
+  max-height: calc(var(--pi-field-max-h) - var(--pi-field-line-height));
+  padding: 0 56px 0 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--pi-field-text);
+  caret-color: var(--pi-field-caret);
+  font-family: var(--pi-field-font-family);
+  font-size: var(--pi-field-font-size);
+  line-height: var(--pi-field-line-height);
+  resize: none;
+  overflow-y: auto;
+}
+
+.web5-prompt-field--multiline .web5-prompt-input {
+  line-height: var(--pi-field-line-height-multiline);
+}
+
+.web5-prompt-input::placeholder {
+  color: var(--pi-field-placeholder);
+}
+
+.web5-prompt-input:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: transparent;
+}
+
+.web5-prompt-input:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: transparent;
+}
+
+.web5-prompt-input::-webkit-scrollbar {
+  width: 6px;
+}
+
+.web5-prompt-input::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.18);
+  border-radius: 999px;
+}
+
+.web5-prompt-actions {
+  position: absolute;
+  right: var(--pi-field-padding-right);
+  top: 50%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transform: translateY(-50%);
+}
+
+.web5-prompt-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 4px;
+  color: var(--pi-field-placeholder);
+  font-family: var(--pi-field-font-family);
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}
+
+.web5-prompt-hint__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  padding: 1px 4px;
+  border: 1px solid var(--pi-field-placeholder);
+  border-radius: 3px;
+  background: transparent;
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 1;
+}
+
+@media (pointer: coarse) {
+  .web5-prompt-hint {
+    display: none;
+  }
+}
+
+.web5-prompt-field--multiline .web5-prompt-actions {
+  top: auto;
+  bottom: var(--pi-submit-bottom);
+  transform: none;
+}
+
+.web5-prompt-voice {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #5f6368;
+  cursor: pointer;
+  transition: color var(--pi-transition-fast);
+}
+
+.web5-prompt-voice:hover {
+  color: #202124;
+}
+
+.web5-prompt-submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pi-submit-size);
+  height: var(--pi-submit-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--pi-submit-radius);
+  background: var(--pi-submit-bg);
+  color: var(--pi-submit-fg);
+  cursor: pointer;
+  transition: background-color var(--pi-transition-fast),
+    color var(--pi-transition-fast), transform var(--pi-transition-fast);
+}
+
+.web5-prompt-submit:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+
+.web5-prompt-submit:disabled {
+  cursor: default;
+}
+
+.web5-prompt-submit--active {
+  background: var(--pi-submit-active-bg);
+  color: var(--pi-submit-active-fg);
+}
+
+.web5-prompt-submit svg,
+.web5-prompt-send-icon,
+.web5-prompt-voice svg {
+  width: var(--pi-submit-icon-size);
+  height: var(--pi-submit-icon-size);
+  flex-shrink: 0;
+}
+
+.web5-prompt-submit--active:hover {
+  transform: translateY(-1px);
+}
+
+.web5-prompt-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: 2rem;
+}
+
+.web5-prompt-progress__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 10px 25px -15px rgba(0, 0, 0, 0.35);
+}
+
+.web5-prompt-progress__message {
+  margin-left: 0.75rem;
+  color: #4b5563;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (max-width: 768px) {
+  .web5-prompt-shell__collapsed-button {
+    right: 12px;
+    bottom: 12px;
+    width: auto;
+    max-width: 100%;
+    min-height: 44px;
+    padding: 10px 20px;
+    line-height: 24px;
+  }
+
+  .web5-prompt-shell--collapsed .web5-prompt-shell__collapsed-button {
+    margin: 0 12px 12px 0;
+  }
+
+  .web5-prompt-shell--collapsed .web5-prompt-shell__content {
+    transform: translate3d(88px, 18px, 0) scale(0.3, 0.72);
+  }
+
+  .web5-prompt-shell__panel {
+    padding-inline: var(--pi-panel-mobile-padding-inline);
+    background: var(--pi-panel-mobile-bg);
+  }
+
+  .web5-prompt-shell__chips {
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: var(--pi-chip-mobile-gap);
+    max-width: none;
+    overflow-y: var(--pi-chip-mobile-overflow-y);
+  }
+
+  .web5-prompt-field {
+    min-width: 0;
+  }
+
+  .web5-prompt-input {
+    font-size: max(16px, var(--pi-field-font-size));
+  }
+
+  .web5-prompt-chip {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 10px 18px;
+    background: transparent;
+    box-shadow: none;
+    font-size: 16px;
+    line-height: 20px;
+    white-space: normal;
+  }
+
+  .web5-prompt-chip .web5-prompt-send-icon {
+    display: none;
+  }
+
+  .web5-prompt-field--focused,
+  .web5-prompt-field--multiline {
+    min-height: 135px;
+    align-items: stretch;
+    padding-top: 14px;
+    padding-bottom: 12px;
+    border-radius: var(--pi-field-radius-multiline);
+  }
+
+  .web5-prompt-field--focused .web5-prompt-input,
+  .web5-prompt-field--multiline .web5-prompt-input {
+    padding-right: 72px;
+    line-height: 24px;
+  }
+
+  .web5-prompt-field--focused .web5-prompt-actions,
+  .web5-prompt-field--multiline .web5-prompt-actions {
+    top: auto;
+    bottom: 12px;
+    transform: none;
+  }
+
+  .web5-prompt-field--focused .web5-prompt-submit,
+  .web5-prompt-field--multiline .web5-prompt-submit {
+    width: 40px;
+    height: 40px;
+  }
+
+  .web5-prompt-field--focused .web5-prompt-submit svg,
+  .web5-prompt-field--focused .web5-prompt-send-icon,
+  .web5-prompt-field--multiline .web5-prompt-submit svg,
+  .web5-prompt-field--multiline .web5-prompt-send-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .web5-prompt-hint {
+    display: none;
+  }
+}